Image Swap with the Mouse

0

By vegaseat on Feb 5th, 2005 2:14 pm

Swap two images as you move your mouse in and out of the image field. Uses onMouseOver, onMouseOut and a short javascript code.

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

6 Years Ago

0

Is no closing 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

egaus

Newbie Poster

1 post since Mar 2006

Reputation Points: 10

Solved Threads: 0

3 Years Ago

0

ok

wiko

Newbie Poster

1 post since Jul 2008

Reputation Points: 10

Solved Threads: 0

3 Years Ago

0

the code is unneccessarily complex 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

[icode] ...snip ..

almostbob

Posting Sensei

3,149 posts since Jan 2009

Reputation Points: 571

Solved Threads: 376

Image Swap with the Mouse

This article has been dead for over three months