onmouse over function is not working:

Discussion in 'JavaScript' started by promotingspace.net, Aug 30, 2008.

0
  1. #1
    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);'>
   &nbsp; <img src='img2-sm.GIF' onMouseOver='changeImg(2);'>
   &nbsp; <img src='img3-sm.GIF' onMouseOver='changeImg(3);'>
</div>
 ...</html>
    Code (markup):

     
    promotingspace.net, Aug 30, 2008 IP
  2. ForumJoiner

    ForumJoiner Active Member

    Messages:
    762
    Likes Received:
    32
    Best Answers:
    0
    Trophy Points:
    83
    #2
    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>
    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.
     
    ForumJoiner, Aug 30, 2008 IP