Ad:

Image Swap with the Mouse

by vegaseat on Feb 5th, 2005

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

JavaScript / DHTML / AJAX Code Snippet (Toggle Plain Text)

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

Comments on this Code Snippet

Permalink

Apr 12th, 2006

Re: Image Swap with the Mouse

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

egaus

Newbie Poster

Offline

1 posts
since Mar 2006

Permalink

Jul 2nd, 2008

Re: Image Swap with the Mouse

wiko

Newbie Poster

Offline

1 posts
since Jul 2008

Permalink

Jan 14th, 2009

Re: Image Swap with the Mouse

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

[icode] ...snip ..

</body>
<script language="javascript" type="text/javascript">
//<![CDATA[

//]]>
</script>
</html>[/icode}

almostbob

Posting Maven

Online

2,970 posts
since Jan 2009

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: please help about Dojo grid

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Word press and javascript

DaniWeb Message

Cancel Changes

User Name
Password