Alternate images and div content

jimbojones · 03-03-2011, 06:14 PM

Hi,

I am currently working on a project that requires javascript onClick events.

What I am looking to achieve is that when an image is clicked, the content is shown and the image changes to another image, and when this is clicked again the image reverts back and the content becomes hidden

Currently I have this in script tags

Code:

<script language="javascript" type="text/javascript">

function setVis(id, vis) {
document.getElementById(id).style.display = vis;
}

function swapImage() {
switch (imageNo) {
 case 1:
   image.src = "images/img.png"
   imageNo = 2
   return(false);
case 2:
   image.src = "images/img1.png"
   imageNo = 1
   return(false);
 }
}

</script>

and this in the main html page

Code:

<h4><a href="#" onclick="setVis('content','inline');return false;"><img id="image" name="image" src="images/img.png" width="10" height="10" border="0" onclick="swapImage();"/></a> Content</h4>

This doesn't work it shows the content but it won't hide it again, and the images do not change.

I would appreciate any help that can be offered thanks

Kor · 03-04-2011, 11:33 AM

Code:

switch (imageNo) {

What supposes to be the variable imageNo? You have not defined it before the switch.

Could be something like this:

Code:

function swapImage(img) {
img.src=img.src.match(/img1/)?'images/img.png':'images/img1.png';
}