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">
		<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";



			<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>

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:

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

5 Years
Discussion Span
Last Post by Violet_82

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:


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


<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>

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?

function change_mouseon('image')

'image' is a string and should be a variable


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.


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?

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.