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
image change on rollover
Moderator: General Moderators
Re: image change on rollover
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: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
- 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.
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
thanks a lot
your post was great
your post was great