Image Swap with the Mouse

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
vegaseat vegaseat is offline Offline Feb 5th, 2005, 4:14 am |
0
Swap two images as you move your mouse in and out of the image field. Uses onMouseOver, onMouseOut and a short javascript code.
Show Printable Version Show Printable Version
Quick reply to this message  
Code Snippet
•
•
•
•
JavaScript / DHTML / AJAX Syntax
Toggle Plain Text
  1. <!-- Experiments with images  vegaseat  6/15/04 -->
  2. <!-- onMouseOver, onMouseOut, JS -->
  3.  
  4. <html>
  5. <head>
  6.  
  7. 	<title>Swap Images with onMouseOver and onMouseOut</title>
  8.  
  9. </head>
  10. <body bgcolor="#FFFFCC" text="#3300FF">
  11.  
  12.  
  13. <CENTER>
  14. <FORM NAME = form1>
  15. <H2>
  16. Move the mouse across to swap the image ...
  17. </H2>
  18. <A HREF="" name= link1 onMouseOver = "ImgOver()" onMouseOut = "ImgOut()">
  19.     <IMG NAME = "IMG1" SRC = "c:/windows/web/wallpaper/follow.jpg" WIDTH = 800 HEIGHT = 600>
  20. </A>
  21. </CENTER>
  22.  
  23. <SCRIPT LANGUAGE= JavaScript>
  24.  
  25. function ImgOver()
  26. {
  27.   // use an image file you have or use one of XP's wallpaper
  28.   document.form1.IMG1.src = 'c:/windows/web/wallpaper/home.jpg';
  29. }
  30.  
  31. function ImgOut()
  32. {
  33.   // use an image file you have or use one of XP's wallpaper
  34.   document.form1.IMG1.src = 'c:/windows/web/wallpaper/follow.jpg';
  35. }
  36.  
  37. </SCRIPT>
  38.  
  39. </body>
  40. </html>
Code Snippet Comments
0
egaus egaus is offline Offline | Apr 12th, 2006
•
•
•
•
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
wiko wiko is offline Offline | Jul 2nd, 2008
•
•
•
•
ok
 
0
almostbob almostbob is offline Offline | Jan 14th, 2009
•
•
•
•
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[
<!--
image2 = new Image();
image2.src = "image2.jpg";
//-->
//]]>
</script>
</html>[/icode}
 
 

Quick Comment
•
•
•
•
•
•
•
•
Message:
•
•
•
•


Similar Threads
Thread Tools Search this Thread



Tag cloud for JavaScript / DHTML / AJAX
acid2 ajax ajaxcode ajaxhelp animate array automatically autoplay beta boarder box bug button calendar captcha card cart codes column cookies createrange() css cursor date debugger decimal design developer dom download dropdown element enter error events firefox firehose flash focus form frameworks getselection google gwt html htmlform iframe image() index java javascript javascripts jawascriptruntimeerror jquery jsp listbox maps marquee masterpage menu microsoft mimic mp3 mp4 offline onmouseover parameters php player post problem programming progressbar prototype rating redirect regex safari scale scriptlets search select size sources sql starrating text textarea toggle twitter validation variables w3c web website window windowofwords windowsxp xml xspf
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC