onmouse over function is not working:

promotingspace.net

Aug 30th 2008, 6:17 pm

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 used this code but the image does not change on mouseover
<html><head>
<script type='text/javascript'>
Function changeImg (which1) {
var obj
obj = document.getElementById('big')
switch (which1) {
case 1:
obj.src='image1.JPG'
break;
case 2:
obj.src='image2.GIF'
break;
case 3:
obj.src='image3.JPG'
}
}
</script></head>
...
...
<div><img id='big' src='default.JPG'></div>
<div><img src='img1-sm.JPG' onMouseOver='changeImg(1);'>
  <img src='img2-sm.GIF' onMouseOver='changeImg(2);'>
  <img src='img3-sm.GIF' onMouseOver='changeImg(3);'>
</div>
...</html>

ForumJoiner

Aug 30th 2008, 7:03 pm

Let's try to simplify the problem: we have 1 image, which is replaced with another 1 image.

The code below works. Please note that JavaScript is case sensitive and 'Function' means a variable name, while 'function' is a function definition

<html>
<head>
<script type='text/javascript'>
function changeImg (which1)
{
var obj
obj = document.getElementById ('big')
switch (which1)
{
case 1:
obj.src='2.gif'
break;
}
}
</script>
</head>

<body>
<div>
<img id='big' src='1.gif' onMouseOver='changeImg(1);'>
</div>
</body>
</html>

Of course, if you want the image to change back when you loose focus, you'll have to do a toggle test.

It worth to know that even the actual program uses JavaScript, if you have a large number of images, their names could be read from a MySQL database or from an external file. Both cases, a PHP program can generate, on the fly, the correct JavaScript code. More exactly, it will replace on the JavaScript template the actual names of the graphic files.