<!-- Experiments with images  vegaseat  6/15/04 -->
<!-- onMouseOver, onMouseOut, JS -->

<html>
<head>

	<title>Swap Images with onMouseOver and onMouseOut</title>
	
</head>
<body bgcolor="#FFFFCC" text="#3300FF">


<CENTER>
<FORM NAME = form1>
<H2>
Move the mouse across to swap the image ...
</H2>
<A HREF="" name= link1 onMouseOver = "ImgOver()" onMouseOut = "ImgOut()">
    <IMG NAME = "IMG1" SRC = "c:/windows/web/wallpaper/follow.jpg" WIDTH = 800 HEIGHT = 600>
</A>
</CENTER>

<SCRIPT LANGUAGE= JavaScript>

function ImgOver()
{
  // use an image file you have or use one of XP's wallpaper
  document.form1.IMG1.src = 'c:/windows/web/wallpaper/home.jpg';
}

function ImgOut()
{
  // use an image file you have or use one of XP's wallpaper
  document.form1.IMG1.src = 'c:/windows/web/wallpaper/follow.jpg';
}

</SCRIPT>

</body>
</html>
4
Contributors
3
Replies
5
Views
12 Years
Discussion Span
Last Post by almostbob
0

Is no closing <form> tag required here? What could you use to give a name to instead of a form to refer to in the document.whatever.IMG1.src line? I've tried using several things I give names to but they don't work. Hmm..

Take a break and go to:

Check out: http://www.wsiwebsitestudio.com/thebeat.html

0

the code is unneccessarily complex

<img src='image1.jpg' onmouseover='src="image2.jpg";' onmouseout='src="image1.jpg";'>

the only javascript required is to load the second image in the background after the page is loaded and displayed, so there is no mouseover delay

 ...snip .. 

</body>
<script language="javascript" type="text/javascript">
//<![CDATA[
<!-- 
image2 = new Image();
image2.src = "image2.jpg";
//-->
//]]>
</script>
</html>

Edited by mike_2000_17: Fixed formatting

Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.