toggle img.src

[nosepilot]

I found javascript to toggle an image between 2 sources:

http://www.toknowmore.net/e/1/javascript/change-image-onclick.php

I've got a page with 5 images I'd like to toggle.
I've been trying to edit the javascript so it can handle 5 images.
I haven't gotten far.
Is there a simpler way to do this?

This is my code:



<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='1.gif'
}
if(y=='1.gif')
{
document.example.src='jj.gif'
}
}

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

 

[vacunita]

It seems you want to replace an image with a secondary image when its clicked, and you want to do this for 5 image elements.

Are the images the same for all 5 elements? If so you could try something simpler like:

<script>
function changeIt([red]imgObj[/red]){
  if([red]imgObj[/red].src=="jj.gif"){
    [red]imgObj[/red].src="1.gif";
  }
  else {
    [red]imgObj[/red].src="jj.gif";
  }
}

</script>

...

<img src='jj.gif' name='example' onclick="changeIt([red]this[/red])">
<img src='jj.gif' name='example2' onclick="changeIt([red]this[/red])">
...

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[feherke]

Hi

Of course, would be easier if the OP would give clear description of the task.

Seems that Phil's interpretation is to change the 5 images separately.

My interpretation is to change all 5 images together, with only one click :

[b]function[/b] [COLOR=darkgoldenrod]changeIt[/color][teal]()[/teal]
[teal]{[/teal]
  [b]var[/b] x [teal]=[/teal] document[teal].[/teal]example[teal].[/teal]src[teal].[/teal][COLOR=darkgoldenrod]split[/color][teal]([/teal][green][i]"/"[/i][/green][teal]);[/teal]
  [b]var[/b] t [teal]=[/teal] x[teal].[/teal]length[teal]-[/teal][purple]1[/purple][teal];[/teal]
  [b]var[/b] y [teal]=[/teal] x[teal][[/teal]t[teal]];[/teal]

  [b]if[/b] [teal]([/teal]y[teal]==[/teal][green][i]'jj.gif'[/i][/green][teal])[/teal] [teal]{[/teal]
    document[teal].[/teal]example[teal].[/teal]src[teal]=[/teal][green][i]'1.gif'[/i][/green]
    document[teal].[/teal]example2[teal].[/teal]src[teal]=[/teal][green][i]'1.gif'[/i][/green]
    document[teal].[/teal]example3[teal].[/teal]src[teal]=[/teal][green][i]'1.gif'[/i][/green]
    document[teal].[/teal]example4[teal].[/teal]src[teal]=[/teal][green][i]'1.gif'[/i][/green]
    document[teal].[/teal]example5[teal].[/teal]src[teal]=[/teal][green][i]'1.gif'[/i][/green]
  [teal]}[/teal] [b]if[/b] [teal]([/teal]y[teal]==[/teal][green][i]'1.gif'[/i][/green][teal])[/teal] [teal]{[/teal]
    document[teal].[/teal]example[teal].[/teal]src[teal]=[/teal][green][i]'jj.gif'[/i][/green]
    document[teal].[/teal]example2[teal].[/teal]src[teal]=[/teal][green][i]'jj.gif'[/i][/green]
    document[teal].[/teal]example3[teal].[/teal]src[teal]=[/teal][green][i]'jj.gif'[/i][/green]
    document[teal].[/teal]example4[teal].[/teal]src[teal]=[/teal][green][i]'jj.gif'[/i][/green]
    document[teal].[/teal]example5[teal].[/teal]src[teal]=[/teal][green][i]'jj.gif'[/i][/green]
  [teal]}[/teal]
[teal]}[/teal]

Feherke.

http://free.rootshell.be/~feherke/

 

[nosepilot]

Thank you.
I am looking to change all the images in one click.
different sources for each image.
this works:


<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='1.gif'
document.example2.src='2.gif'
document.example3.src='3.gif'
document.example4.src='4.gif'
document.example5.src='5.gif'
} if (y=='1.gif') {
document.example.src='jj.gif'
document.example2.src='jj.gif'
document.example3.src='jj.gif'
document.example4.src='jj.gif'
document.example5.src='jj.gif'
}
}
</script>
<img src='jj.gif' name='example' border="2" id='example' onclick="changeIt(this)">
<img src='jj.gif' name='example2' border="2" id='example2' onclick="changeIt(this)">
<img src='jj.gif' name='example3' border="2" id='example3' onclick="changeIt(this)">
<img src='jj.gif' name='example4' border="2" id='example4' onclick="changeIt(this)">
<img src='jj.gif' name='example5' border="2" id='example5' onclick="changeIt(this)">

 

[vacunita]

So you want to change all 5 when you click on any of the 5?

By the way if you aren't going to use the parameter being passed, you should not include it in the function call.

function changeIt([COLOR=red yellow]   [/color])

...


<img src='jj.gif' name='example' border="2" id='example' onclick="changeIt([red]this[/red])">

You can remove the "this" reference in your calls.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[nosepilot]

>So you want to change all 5 when you click on any of the 5?

Yes.

>You can remove the "this" reference in your calls.
Ok.

Thank you. This forum is amazing.