toggle img.src

toggle several image sources

[nosepilot]

<script type="text/javascript"> 

function changeIt() 
{

var x = document.example.src.split("/");
var t = x.length-1;
var y = x[t];

if(y=='jj.gif')
{
document.example.src='n.gif'
}
if(y=='n.gif')
{
document.example.src='jj.gif'
}
}

</script>
<img src='jj.gif' name='example' onclick="changeIt()">

That's a lot of code for toggling one image. Is there a simpler way to do this?
I have a page with a lot of images that toggle.

[ProbablyMike]

Here is one way to do it:

<script type="text/javascript">

function changeIt() {
var img = document.getElementById("example");
if (img.src.indexOf("jj.gif") != -1) {
img.src = "n.gif";
} else {
img.src = "jj.gif";
}
}

</script>
<img src='jj.gif' name='example' id='example' onclick="changeIt()">

[nosepilot]

Thank you. That is simpler. I plugged this in into a 3 image scenario. Is there a cleaner way to do this?

<script type="text/javascript">

function changeIt() {
var img = document.getElementById("example");

if (img.src.indexOf("jj.gif") != -1) {
img.src = "n.gif";
} else {
img.src = "jj.gif";
}
}

function changeIt2() {
var img = document.getElementById("example2");

if (img.src.indexOf("jj.gif") != -1) {
img.src = "n2.gif";
} else {
img.src = "jj.gif";
}
}

function changeIt3() {
var img = document.getElementById("example3");

if (img.src.indexOf("jj.gif") != -1) {
img.src = "n3.gif";
} else {
img.src = "jj.gif";
}
}

</script>
<img src='jj.gif' name='example' id='example' onclick="changeIt()">
<img src='jj.gif' name='example2' id='example2' onclick="changeIt2()">
<img src='jj.gif' name='example3' id='example3' onclick="changeIt3()">

[Fotiman]

<script type="text/javascript">
function changeIt(img) {
  var src;
  switch (img.id) {
  case "example":
    src = "n.gif";
    break;
  case "example2":
    src = "n2.gif";
    break;
  case "example3":
    src = "n3.gif";
    break;
  }
  img.src = (img.src.indexOf("jj.gif") < 0 ? "jj.gif" : src);
}
</script>
<img src='jj.gif' name='example' id='example' onclick="changeIt(this)">
<img src='jj.gif' name='example2' id='example2' onclick="changeIt(this)">
<img src='jj.gif' name='example3' id='example3' onclick="changeIt(this)"> 

[nosepilot]

Great! Thank you!