I'm not sure why the "onmouseover" event works but the "onmouseout" does not. <html> <head> <script> //element id, hover image , normal image function swap(docID,img) { imageSrc = "<img src='images/" + img + "' />"; e = document.getElementById(docID); e.innerHTML = imageSrc; } </script> </head> <body> <!-- width: 117px; height: 40px;--> <div style="float: left;" onmouseover="swap('img1','ho-home.gif');" onmouseout="swap('img1','no-home.gif');"> <div id="img1"><img src="images/no-home.gif" /></div> </div> </body> </html> Code (markup): Any help would be greatly appreciated.
That is weird..the event is not firing when I look at it using FireBug...if you use the img.src instead it works... <html> <head> <script> //element id, hover image , normal image function swap(docID,img) { imageSrc = "images/" + img; e = document.getElementById(docID); e.src = imageSrc; } </script> </head> <body> <!-- width: 117px; height: 40px;--> <div style="float: left;" onmouseover="swap('img1','folder_open_128.png');" onmouseout="swap('img1','folder_closed_128.png');"> <img id="img1" src="images/folder_closed_128.png" /> </div> </body> </html>
How about something like this: <SCRIPT LANGUAGE="JavaScript"> var aryImages = new Array(2); aryImages[0] = "images/default.gif"; aryImages[1] = "images/flowers_LRG.jpg"; aryImages[2] = "images/leaf_LRG.jpg"; aryImages[3] = "images/cat_LRG.jpg"; for (i=0; i < aryImages.length; i++) { var preload = new Image(); preload.src = aryImages[i]; } function swap(imgIndex, imgTarget) { document[imgTarget].src = aryImages[imgIndex]; } </script> <div id="thmbs"> <img src="images/flowers.jpg" onMouseOver="swap(1, 'imgDefault')" onMouseOut="swap(0,'imgDefault')" > <img src="images/leaf.jpg" onMouseOver="swap(2, 'imgDefault')" onMouseOut="swap(0, 'imgDefault')"> <img src="images/cat.jpg" onMouseOver="swap(3, 'imgDefault')" onMouseOut="swap(0, 'imgDefault')"> </div> <div id="target"> <img name="imgDefault" src="images/default.gif" > </div> Code (markup):
Okay, I want to create a navigation bar. There are 14 links, and each will have an image swap function. If you put your mouse over the Homepage link, for example, the "dotted" image next to it will swap images into a different image (image #3). And if you put your mouse over this "dotted" image, it will also swap into this same different image (image #3). How can I make this (tabled?) script work correctly? So far, all three images are pointing to the very same target image, which I want them each to point to their very own targeted image. Can it be done? And if so, what's the code to do it? Thanks ! luceduce
So here's my code so far: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <SCRIPT LANGUAGE="JavaScript"> var aryImages = new Array(2); aryImages[0] = "images/weddingbandsdot.gif"; aryImages[1] = "images/weddingbandssmall.gif"; aryImages[2] = "images/weddingbandssmall.gif"; aryImages[3] = "images/weddingbandssmall.gif"; aryImages[4] = "images/weddingbandssmall.gif"; aryImages[5] = "images/weddingbandssmall.gif"; aryImages[6] = "images/weddingbandssmall.gif"; aryImages[7] = "images/weddingbandssmall.gif"; aryImages[8] = "images/weddingbandssmall.gif"; aryImages[9] = "images/weddingbandssmall.gif"; aryImages[10] = "images/weddingbandssmall.gif"; aryImages[11] = "images/weddingbandssmall.gif"; aryImages[12] = "images/weddingbandssmall.gif"; aryImages[13] = "images/weddingbandssmall.gif"; aryImages[14] = "images/weddingbandssmall.gif"; for (i=0; i < aryImages.length; i++) { var preload = new Image(); preload.src = aryImages[i]; } function swap(imgIndex, imgTarget) { document[imgTarget].src = aryImages[imgIndex]; } </script> <style type="text/css"> <!-- #Layer1 { position:absolute; width:200px; height:115px; z-index:1; top: 27px; } #Layer2 { position:absolute; width:40px; height:297px; z-index:2; left: 221px; top: 15px; } --> </style> </head> <body> <div id="Layer1"> <div id="thmbs"> <img src="images/links/homepage.gif" width="82" height="17" align="right" onMouseOver="swap(1, 'imgDefault')" onMouseOut="swap(0,'imgDefault')" ><br/> <img src="images/links/theevent.gif" width="78" height="15" align="right" onMouseOver="swap(2, 'imgDefault')" onMouseOut="swap(0, 'imgDefault')"><br/> <img src="images/links/journal.gif" width="56" height="15" align="right" onMouseOver="swap(3, 'imgDefault')" onMouseOut="swap(0, 'imgDefault')"><br/> <img src="images/links/ourstories.gif" width="87" height="15" align="right" onMouseOver="swap(4, 'imgDefault')" onMouseOut="swap(0, 'imgDefault')"><br/> <img src="images/links/polls.gif" width="38" height="15" align="right" onMouseOver="swap(5, 'imgDefault')" onMouseOut="swap(0, 'imgDefault')"><br/> <img src="images/links/quizzes.gif" width="61" height="18" align="right" onMouseOver="swap(6, 'imgDefault')" onMouseOut="swap(0, 'imgDefault')"><br/> <img src="images/links/familyandfriends.gif" width="148" height="18" align="right" onMouseOver="swap(7, 'imgDefault')" onMouseOut="swap(0, 'imgDefault')"><br/> <img src="images/links/theweddingparty.gif" width="147" height="18" align="right" onMouseOver="swap(8, 'imgDefault')" onMouseOut="swap(0, 'imgDefault')"><br/> <img src="images/links/photoalbums.gif" width="109" height="15" align="right" onMouseOver="swap(9, 'imgDefault')" onMouseOut="swap(0, 'imgDefault')"><br/> <img src="images/links/videos.gif" width="53" height="15" align="right" onMouseOver="swap(10, 'imgDefault')" onMouseOut="swap(0, 'imgDefault')"><br/> <img src="images/links/giftregistry.gif" width="99" height="18" align="right" onMouseOver="swap(11, 'imgDefault')" onMouseOut="swap(0, 'imgDefault')"><br/> <img src="images/links/thankyou.gif" width="83" height="15" align="right" onMouseOver="swap(12, 'imgDefault')" onMouseOut="swap(0, 'imgDefault')"><br/> <img src="images/links/guestbook.gif" width="82" height="15" align="right" onMouseOver="swap(13, 'imgDefault')" onMouseOut="swap(0, 'imgDefault')"><br/> <img src="images/links/contactus.gif" width="85" height="14" align="right" onMouseOver="swap(14, 'imgDefault')" onMouseOut="swap(0, 'imgDefault')"><br/><br/> </div> </div> <div id="Layer2"> <div id="target"> <img src="images/weddingbandsdot.gif" name="imgDefault" align="left"> </div> </div> </body> </html> Code (markup): Now, does anyone know how to get each "linked" image to have its own image swapping icon next to it? P.S.: The "linked" images are as follows: homepage.gif thevent.gif journal.gif ourstories.gif polls.gif quizzes.gif familyandfriends.gif theweddingparty.gif photoalbums.gif videos.gif giftregistry.gif thankyou.gif guestbook.gif contactus.gif Thanks in advance to those of you reading my post!