Image change onclick...and if clicked again change to another!

[F430]

hello,

Im still trying to get my head round JS and am having difficulty.

I have the following code in the head:

function swapImage_new(sImg,sRImage)
{

            document.images[sImg].src=sRImage;
}
function showtext(x) 
{ 
     if (document.getElementById(x).style.display == 'none')

     {
          document.getElementById(x).style.display = 'block';
     }
     else
     {
          document.getElementById(x).style.display = 'none';
     }
}
</script>

and this in the body around the image

<tr>

  <td><img src="../images/faqs_head_1.gif"     Onclick="showtext('row1'); this.src='../images/faqs_head_R_1.gif';return true;" style="display:block;"></td>

<tr id="row1" style="display:none;">

   <td class="content" style="padding-left:23px"></td>
</tr>

So if the image is clicked the hidden row is shown. and the onclick also changes the image to the rollover.

NOW,.... when the button is pressed again the row is hidden, but image does not revert back to the original image!

can you help?

 

[theniteowl]

Because in your onclick event you specifically state to change the src to faqs_head_R_1.gif.

Rather than doing a this.src= statement call a function to make the change and pass in both values to the function toggling to the state that it is not currently at.

function changeImg(one,two) {
  if (this.src == one)
    this.src = two;
  else
    this.src = one;
}

And in your image tag do it like this

<tr>

  <td><img src="../images/faqs_head_1.gif"     Onclick="showtext('row1'); [COLOR=red]changeImg('../images/faqs_head_1.gif','../images/faqs_head_R_1.gif');[/color]return true;" style="display:block;"></td>

<tr id="row1" style="display:none;">

   <td class="content" style="padding-left:23px"></td>
</tr>

Stamp out, eliminate and abolish redundancy!

 

[manarth]

  <td><img src="../images/faqs_head_1.gif"     [COLOR=blue]Onclick="showtext('row1'); [COLOR=red]this.src='../images/faqs_head_R_1.gif'[/color];return true;"[/color] style="display:block;"></td>

Your 'onclick' action does two things:
- calls the 'showtext' function
- sets the image src.

Your image src is not swapping, it's being set to '../images/faqs_head_R_1.gif' every time the image is clicked.

There are plenty of rollover image scripts available, so rather than typing one out in full here, here's a link to a list of rollover image scripts and the iDocs script.

---
Marcus
better questions get better answers - faq581-3339
accessible web design - zioncore.com