Member Avatar for Violet_82

HI there, I have done a little work on a simple script to change images on mouse over and on mouse off. It was meant to be a very simple one but it is not working and I am not quite sure why.
here's the coplete html and script code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Javascript test</title>
		<script type = "text/javascript">
			<!--

				function change_mouseon('image')
					{

						document.images['image'].src = image + "_in.jpg";

					}
				function change_mouseoff('image')
					{

						document.images['image'].src = image + "_out.jpg";

					}

			//-->
		</script>
	</head>

	<body>
		<div>
			<a href = "#" onmouseover = "change_mouseon('image_1')" onmouseout = "change_mouseoff('image_1')"><img src = "image_1_out.jpg" alt = "" style = "border:none;" name = "image_1"></a>
			<a href = "#" onmouseover = "change_mouseon('image_2')" onmouseout = "change_mouseoff('image_2')"><img src = "image_2_out.jpg" alt = "" style = "border:none;" name = "image_2"></a>
		</div>
	</body>
</html>

I would like to go through it just to make sure I have done it correctly:
1)the first image link has 2 functions change_mouseon('image_1') and change_mouseoff('image_1') passing a parameter to the function. then image1 gets passed to the first function therefore document.images['image'].src = image + "_in.jpg"; becomes document.images['image_1'].src = image_1 + "_in.jpg"; Similarly for the second function and the the other image. I named my images as follow:
image_1_in.jpg
image_1_out.jpg
image_2_in.jpg
image_2_out.jpg

and I have attached them too, they are very small files
Can't quite understand what I got wrong and when I hover on the images they don't change
thanks

  • 2 Contributors
  • 4 Replies
  • 227 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Violet_82
Member Avatar for stbuchok

since all you are doing is changing the image on mouseover and mouseout, you can keep it simple:

<a href="#"><img src="Images/image_0.png" onmouseover="this.src='Images/image_1.png'" onmouseout="this.src='Images/image_0.png'" /></a>
<a href="#"><img src="Images/image_2.png" onmouseover="this.src='Images/image_3.png'" onmouseout="this.src='Images/image_2.png'" /></a>
<a href="#"><img src="Images/image_4.png" onmouseover="this.src='Images/image_5.png'" onmouseout="this.src='Images/image_4.png'" /></a>

or if you prefer to have a function you can use the following:

<script>

function changeImage(control, image){
	control.src = image;
}

</script>

<a href="#"><img src="Images/image_0.png" onmouseover="changeImage(this, 'Images/image_1.png');" onmouseout="changeImage(this, 'Images/image_0.png');" /></a>
<a href="#"><img src="Images/image_2.png" onmouseover="changeImage(this, 'Images/image_3.png');" onmouseout="changeImage(this, 'Images/image_2.png');" /></a>
<a href="#"><img src="Images/image_4.png" onmouseover="changeImage(this, 'Images/image_5.png');" onmouseout="changeImage(this, 'Images/image_4.png');" /></a>
Member Avatar for Violet_82

Hi stbuchok,
thanks for posting that code, I will give it a go. Can I ask you though, what was wrong with the script I posted? I mean, wqas I making some kind of mistake? The reason why I ask is that i just want to understand it better, that's all. I was following a javascript tutorial here http://www.trainingtools.com/online/javascript/index.htm so I simply redone what they have done. Perhaps I need a better tutorial?

Member Avatar for stbuchok 
function change_mouseon('image')

'image' is a string and should be a variable

document.images['image'].src

What you have there is referring to an image with the name image, your images are named image_1 and image_2.

These are the main issues.

Member Avatar for Violet_82

hiya, thanks for that, so I will have to pass the actual image to the function like you did, rather than the name of the picture. Or perhaps I could get the element by id in the function, that will do wouldn't it?
thanks

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.