CODEWITHSUNDEEP
javascripthtmlcss
Alex
Alex

Reputation: 1497

Javascript to get and change element Title

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?

Upvotes: 3

Views: 17184

Answers (4)

Arindam Nayak
Arindam Nayak

Reputation: 7462

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;
}

Upvotes: 0

Frogmouth
Frogmouth

Reputation: 1818

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.

Upvotes: 1

Harutyun Abgaryan
Harutyun Abgaryan

Reputation: 2023

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"/>

Upvotes: 1

dfsq
dfsq

Reputation: 193261

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.

Upvotes: 2

Related Questions