Q1687 How do you make a generic function to change the image at on mouse out and on mouse over events which can be accessed from anywhere in the document just by specifiying the names of the images to change?

You are here: irt.org | FAQ | JavaScript | Image | Q1687 [ previous next ]

Here I have written the names of the images in the function along with at what index of the images[] array the SRC lies. On recieving the index value and the name of the image, it puts the index in the images[] array which changes the image now stored in the variable img_name. In this way I can call this function as many times and this single function will act for all the images in the document.

<html>
<head>
<title>image_change</title>
<script language="javascript"><!--
//index is the location of the image in the document when accesed by images[] array

function GetImage(index,img_name) {
  document.images[index].src=img_name
}
//--></script>

</head>

<body>

<img src="1_off.gif" name="hi" onMouseOver="GetImage(0,'1_on.gif')" onMouseOut="GetImage(0,'1_off.gif')" >

</body>
</html>

Submitted by anshumanmishra@yahoo.com