Swap two images as you move your mouse in and out of the image field. Uses onMouseOver, onMouseOut and a short javascript code.
Image Swap with the Mouse
<!-- 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>
egaus 0 Newbie Poster
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
wiko 0 Newbie Poster
ok
almostbob 866 Retired: passive income ROCKS
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>
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.