Page 1 of 1
image change on rollover
Posted: Sat Aug 30, 2008 11:47 am
by m2babaey
Hi
I want to dsplay 3 images for a product. one image tag, and I’d like 3 small tags with images (corresponding to Image1, Image2, Image3 of the product ( the image names are in database) that when you rollover them the large image changes into that image
I think java script is required
can you help me with this ?
thanks in advance
Re: image change on rollover
Posted: Sat Aug 30, 2008 1:06 pm
by califdon
m2babaey wrote:I want to dsplay 3 images for a product. one image tag, and I’d like 3 small tags with images (corresponding to Image1, Image2, Image3 of the product ( the image names are in database) that when you rollover them the large image changes into that image
I think java script is required
Right. Javascript executes in the browser and has access to the Document Object Model (DOM) of the page it's in. Here are the elements needed to produce the effect you described:
- For each image, you should have both a large and a small version on the server.
- In your HTML, the element that holds the large image should have an id='xxx' parameter, so it can be identified in the JS code.
- The buttons or images you want the user to click on must have an onMouseOver= property, calling a JS function that you have defined in your script.
- Your JS function will need to have a calling parameter to determine which image is to be displayed.
- If you have multiple instances of this on the page, you would have to modify the function to account for which position to change.
- If your large image(s) are very large, you should pre-load the images at the beginning of your script, to reduce the loading time when you rollover.
So this would be a minimal template for doing it (I haven't tested this):
Code: Select all
...
<script type='text/javascript'>
Function changeImg (which) {
var obj
obj = document.getElementById('big')
switch (which) {
case 1:
obj.src='image1.jpg'
break;
case 2:
obj.src='image2.jpg'
break;
case 3:
obj.src='image3.jpg'
}
}
</script>
...
...
<div><img id='big' src='default.jpg'></div>
<div><img src='img1-sm.jpg' onMouseOver='changeImg(1);'>
<img src='img2-sm.jpg' onMouseOver='changeImg(2);'>
<img src='img3-sm.jpg' onMouseOver='changeImg(3);'>
</div>
...
Re: image change on rollover
Posted: Sat Aug 30, 2008 7:44 pm
by m2babaey
thanks a lot
your post was great
