how to change images

[Gina]

Hello

in order to show a number of logos for a site, I had the idea of having a
script that could change the images e.g when clicking on the image itself
I have 10 images all named logo_0 .... logo_9

<img src="images/logo_0.png" ... />

unfortunately my javascript knowledge is very limited and I don't know how
to start
I was hoping to be pointed into the right direction here.

tia

Gina

 

[Gina]

Hello

in order to show a number of logos for a site, I had the idea of having a
script that could change the images e.g when clicking on the image itself
I have 10 images all named logo_0 .... logo_9

<img src="images/logo_0.png" ... />

unfortunately my javascript knowledge is very limited and I don't know how
to start
I was hoping to be pointed into the right direction here.

tia

Gina

this is my code .... but it only works once ... but should work each time I
click on the logo and increase the number by one to call the image logo_ +1
.... well hope it makes sense

<a href="javascript:void(0)"
onclick="siteLogo.src='images/logo_4.png'">
<img id="logoimgTest" name="siteLogo" src="images/logo_10.png" />
</a>

 

[purcaholic]

this is my code .... but it only works once ... but should work each timeI
click on the logo and increase the number by one to call the image logo_ +1
... well hope it makes sense

         <a href="javascript:void(0)"
onclick="siteLogo.src='images/logo_4.png'">
         <img id="logoimgTest" name="siteLogo" src="images/logo_10.png" />
</a>

Hi Gina,

you need a JavaScript function where you can incerase the numer of
your image counter an reassign the new image path to the image. Take a
look at the following example which works for images from 1 to 10:

<script type="text/javascript">
var currentImage = 1; // to store current image number
function nextImage(){
var lastImage = 10;
currentImage++;  // increase by one
if (currentImage > lastImage) {
// current image can't be greater than last one, start
from first
currentImage = 1;
}
// assign new image
document.images["siteLogo"].src = "images/logo_" +
currentImage + ".png";
}
</script>

<a href="javascript:void(0)" onclick="nextImage();">
<img id="logoimgTest" name="siteLogo" src="images/logo_10.png" /></
a>

As you can see, each time, when the anchor is clicked, the function
nextImage() will be called. It increases the current number and
updates the src-atribute of the image.

Afaik the changing of png images won't work with IE6 due to it's poor
png support.

Regards
purcaholic

 

[Gina]

Hello purcaholic

it works like a treat ... thank you SO much !!!
very nice Sunday to you !!

Gina

this is my code .... but it only works once ... but should work each time
I
click on the logo and increase the number by one to call the image logo_
+1
... well hope it makes sense

<a href="javascript:void(0)"
onclick="siteLogo.src='images/logo_4.png'">
<img id="logoimgTest" name="siteLogo" src="images/logo_10.png" />
</a>

Hi Gina,

you need a JavaScript function where you can incerase the numer of
your image counter an reassign the new image path to the image. Take a
look at the following example which works for images from 1 to 10:

<script type="text/javascript">
var currentImage = 1; // to store current image number
function nextImage(){
var lastImage = 10;
currentImage++;  // increase by one
if (currentImage > lastImage) {
// current image can't be greater than last one, start
from first
currentImage = 1;
}
// assign new image
document.images["siteLogo"].src = "images/logo_" +
currentImage + ".png";
}
</script>

<a href="javascript:void(0)" onclick="nextImage();">
<img id="logoimgTest" name="siteLogo" src="images/logo_10.png" /></
a>

As you can see, each time, when the anchor is clicked, the function
nextImage() will be called. It increases the current number and
updates the src-atribute of the image.

Afaik the changing of png images won't work with IE6 due to it's poor
png support.

Regards
purcaholic