html - Javascript to get and change element Title - Stack Overflow

admin管理员组

文章数量:1296468

I want to change images inside a div when a link is clicked. I did that, but I can't retrieve the TITLE of the image from the TITLE of the link.

JavaScript

function changeImage(element) {
    document.getElementById('imageReplace').src = element;
}

HTML 1

<a href="#" title="PIC1" onclick="changeImage('pics/1.jpg');return false;">my link</a>

HTML 2

<img src="pics/empty.png" id="imageReplace"/>

When I click the link shown in HTML1, the image changes where the HTML2 code is, but the "title" attribute is not retrieved and nothing pops up when the mouse is over the new pic. I want to retrieve this title attribute.

Can anyone help?

I want to change images inside a div when a link is clicked. I did that, but I can't retrieve the TITLE of the image from the TITLE of the link.

JavaScript

function changeImage(element) {
    document.getElementById('imageReplace').src = element;
}

HTML 1

<a href="#" title="PIC1" onclick="changeImage('pics/1.jpg');return false;">my link</a>

HTML 2

<img src="pics/empty.png" id="imageReplace"/>

When I click the link shown in HTML1, the image changes where the HTML2 code is, but the "title" attribute is not retrieved and nothing pops up when the mouse is over the new pic. I want to retrieve this title attribute.

Can anyone help?

• javascript
• html
• css

Share Improve this question Follow edited Oct 19, 2014 at 19:23 ROMANIA_engineer 56.7k3030 gold badges209209 silver badges205205 bronze badges asked Oct 19, 2014 at 19:14 AlexAlex 1,49722 gold badges1515 silver badges2525 bronze badges 1

• Can you show the before HTML and the after HTML, to give some clear idea of what you're doing? – David Thomas Commented Oct 19, 2014 at 19:24

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

Modify your function a little:

function changeImage(src, a) {
    var img = document.getElementById('imageReplace');
    img.src = src;
    img.title = a.title;
}

and HTML:

<a href="#" title="PIC1" onclick="changeImage('pics/1.jpg', this);return false;">my link</a>

So you basically pass HTMLAnchorElement object (a tag) into changeImage function where you can use its properties like title. There you set image title equal to link one.

Link:

<a href="#" title="PIC1" onclick="changeImage.call(this,'pics/1.jpg');">my link</a>

Image:

<img src="pics/empty.png" id="imageReplace"/>

Function:

var changeImage = function(element) {
    document.getElementById('imageReplace').src = element;
    document.getElementById('imageReplace').title = this.title;
    return false;
}

Fucntion.prototype.call()

The call() method calls a function with a given this value and arguments provided individually.

use this

function changeImage(element) {
    var element_title =element.title;
    var element_src=element.src;
    document.getElementById('imageReplace').src = element_src;
    document.getElementById('imageReplace').title= element_title ;
}
</script>
<a href="#" title="PIC1" onclick="changeImage(this);return false;">my link</a>
<img src="pics/empty.png" id="imageReplace"/>

Since you tagged this as jQuery, you can use that to set title of any element like this,

To get title attribute value = $("#elem").attr("title");

To set title = $("#elem).attr("title","title-value");

Assumption - there is an element with id = elem.

In your case you need to get title in onclick. To achieve this, you can do it like this.

onclick="return changeImage('pics/1.jpg',this);"

function changeImage(imgsrc,element) {
    $("#imageReplace").attr("src",imgsrc);
    var title = $(this).attr("title");
    $("#imageReplace").attr("title",title);
    return false;
}

本文标签： htmlJavascript to get and change element TitleStack Overflow