CODEWITHSUNDEEP
javascriptjqueryhtml
UI_Dev
UI_Dev

Reputation: 3427

how to change the image when the hyperlink which is clicked in javascript?

This will run when the page loads

<TD width=115 >
    <a href="#" onclick="some functions"> Expand All</a>
</TD>

<TD align=left>
    <a href="#"><IMG id="img1" border=0 alt="" src="expand.png">12345 </a>
</TD>

By default, expand.png image will be displayed with 12345.. My question is If I click expand all link, I need to change the image "expand.png" to "collapse.png"..Is it possible in javascript?

Upvotes: 0

Views: 87

Answers (4)

Slugge
Slugge

Reputation: 180

Does it need to be pure JS?

Jquery:

$('#button').click(function(){
     $('#withImage').attr('src', 'collapse.png');
});

You would have to give the TD's a class or an ID

pure JS:

document.getElementById('button').onClick(runFunction());

function runFunction(){
   document.getElementById('withImage').src = 'collapse.png';
}

First line of code is telling the script that when a tag with the id "button" (

In the function you are telling the script that the tag with id "withImage" should change its attribute "src" to be 'collapse.png'.

Upvotes: 4

Salman Siddique
Salman Siddique

Reputation: 90

Just add below code to your function of Expand All, if its Jquery

$('#img1').attr('src', 'collapse.png');

Upvotes: 0

Kapi
Kapi

Reputation: 567

I think this will solve your issue. 

 <a href="#" onclick="document.getElementById('img1').src='collapse.png'">Expand All</a>
 <a href="#"><IMG id="img1" border=0 alt="" src="expand.png">12345</a>

JSfiddle: http://jsfiddle.net/zJ85X/

Upvotes: 2

Gwenc37
Gwenc37

Reputation: 2048

You can use this:

<TD width=115 >
     <a href="#" onclick="expand()"> Expand All</a>
</TD>
<TD align=left>
     <a href="#"><IMG id="img1" border=0 alt="" src="expand.png">12345 </a>
</TD>
<script>
     function expand(){
          $('#img1').attr('src','collapse.png');
     }
</script>

Upvotes: 0

Related Questions