Skipjackrick Posted February 11, 2009 Share Posted February 11, 2009 Can anybody tell me why my onmouseover etc is not working? Here is the page. (Working with CSS to get layout correct...ignore alignment issues..LOL) http://www.extremecoast.com/KW09/layoutdoc2.php A short section of code where I believe the problem is. <script type="text/javascript"> image1 = new Image();image1.src = "http://extremecoast.com/layout/v2/menu1on.jpg"; image2 = new Image();image2.src = "http://extremecoast.com/layout/v2/menu2on.jpg"; image3 = new Image();image3.src = "http://extremecoast.com/layout/v2/menu3on.jpg"; image4 = new Image();image4.src = "http://extremecoast.com/layout/v2/menu4on.jpg"; image5 = new Image();image5.src = "http://extremecoast.com/layout/v2/menu5on.jpg"; image6 = new Image();image6.src = "http://extremecoast.com/layout/v2/menu6on.jpg"; image7 = new Image();image7.src = "http://extremecoast.com/layout/v2/menu7on.jpg"; image8 = new Image();image8.src = "http://extremecoast.com/layout/v2/2menu1on.jpg"; image9 = new Image();image9.src = "http://extremecoast.com/layout/v2/2menu2on.jpg"; image10 = new Image();image10.src = "http://extremecoast.com/layout/v2/2menu3on.jpg"; image11 = new Image();image11.src = "http://extremecoast.com/layout/v2/2menu4on.jpg"; image12 = new Image();image12.src = "http://extremecoast.com/layout/v2/2menu5on.jpg"; image13 = new Image();image13.src = "http://extremecoast.com/layout/v2/2menu6on.jpg"; image14 = new Image();image14.src = "http://extremecoast.com/layout/v2/2menu7on.jpg"; </script> <script src="http://www.extremecoast.com/KW09/AC_RunActiveContent.js" type="text/javascript"></script> </head> <body> <a href="http://extremecoast.com"><img src="http://www.extremecoast.com/layout/v2/ecpp.png" border="0" align="middle" alt="" /></a> <table border="2" cellspacing="0" cellpadding="0" align="center" width="765" bgcolor="#000000" > <tr> <td><script type="text/javascript"> AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','765','height','200','pluginspage','http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash','src','http://extremecoast.com/layout/v2/kayakwars09banner','wmode','transparent','allowscriptaccess','always','movie','http://www.extremecoast.com/layout/v2/kayakwars09banner','bgcolor','#000000','quality','high' ); //end AC code </script> <br /> <a href="http://extremecoast.com" onmouseover="image1.src='http://extremecoast.com/layout/v2/menu1on.jpg';" onmouseout="image1.src='http://extremecoast.com/layout/v2/menu1off.jpg';"> <img name="image1" src="http://extremecoast.com/layout/v2/menu1off.jpg" border="0" alt="" /> </a> <a href="http://extremecoast.com/reports/reports.php" onmouseover="image2.src='http://extremecoast.com/layout/v2/menu2on.jpg';" onmouseout="image2.src='http://extremecoast.com/layout/v2/menu2off.jpg';"> <img name="image2" src="http://extremecoast.com/layout/v2/menu2off.jpg" border="0" alt="" /> </a> <a href="http://extremecoast.com/Kayak_Wars/index.php" onmouseover="image3.src='http://extremecoast.com/layout/v2/menu3on.jpg';" onmouseout="image3.src='http://extremecoast.com/layout/v2/menu3onon.jpg';"> <img name="image3" src="http://extremecoast.com/layout/v2/menu3onon.jpg" border="0" alt="" /> </a> <a href="http://extremecoast.com/phpBB3/index.php" onmouseover="image4.src='http://extremecoast.com/layout/v2/menu4on.jpg';" onmouseout="image4.src='http://extremecoast.com/layout/v2/menu4off.jpg';"> <img name="image4" src="http://extremecoast.com/layout/v2/menu4off.jpg" border="0" alt="" /> </a> <a href="http://extremecoast.com/multimedia/multimedia.php" onmouseover="image5.src='http://extremecoast.com/layout/v2/menu5on.jpg';" onmouseout="image5.src='http://extremecoast.com/layout/v2/menu5off.jpg';"> <img name="image5" src="http://extremecoast.com/layout/v2/menu5off.jpg" border="0" alt="" /> </a> <a href="http://extremecoast.com/contest.php" onmouseover="image6.src='http://extremecoast.com/layout/v2/menu6on.jpg';" onmouseout="image6.src='http://extremecoast.com/layout/v2/menu6off.jpg';"> <img name="image6" src="http://extremecoast.com/layout/v2/menu6off.jpg" border="0" alt="" /> </a> <a href="http://extremecoast.com/contact.php" onmouseover="image7.src='http://extremecoast.com/layout/v2/menu7on.jpg';" onmouseout="image7.src='http://extremecoast.com/layout/v2/menu7off.jpg';"> <img name="image7" src="http://extremecoast.com/layout/v2/menu7off.jpg" border="0" alt="" /> </a> <br /> Quote Link to comment https://forums.phpfreaks.com/topic/144768-onmouseover-and-onmouseout-not-working/ Share on other sites More sharing options...
KevinM1 Posted February 11, 2009 Share Posted February 11, 2009 Can anybody tell me why my onmouseover etc is not working? Here is the page. (Working with CSS to get layout correct...ignore alignment issues..LOL) http://www.extremecoast.com/KW09/layoutdoc2.php A short section of code where I believe the problem is. <script type="text/javascript"> image1 = new Image();image1.src = "http://extremecoast.com/layout/v2/menu1on.jpg"; image2 = new Image();image2.src = "http://extremecoast.com/layout/v2/menu2on.jpg"; image3 = new Image();image3.src = "http://extremecoast.com/layout/v2/menu3on.jpg"; image4 = new Image();image4.src = "http://extremecoast.com/layout/v2/menu4on.jpg"; image5 = new Image();image5.src = "http://extremecoast.com/layout/v2/menu5on.jpg"; image6 = new Image();image6.src = "http://extremecoast.com/layout/v2/menu6on.jpg"; image7 = new Image();image7.src = "http://extremecoast.com/layout/v2/menu7on.jpg"; image8 = new Image();image8.src = "http://extremecoast.com/layout/v2/2menu1on.jpg"; image9 = new Image();image9.src = "http://extremecoast.com/layout/v2/2menu2on.jpg"; image10 = new Image();image10.src = "http://extremecoast.com/layout/v2/2menu3on.jpg"; image11 = new Image();image11.src = "http://extremecoast.com/layout/v2/2menu4on.jpg"; image12 = new Image();image12.src = "http://extremecoast.com/layout/v2/2menu5on.jpg"; image13 = new Image();image13.src = "http://extremecoast.com/layout/v2/2menu6on.jpg"; image14 = new Image();image14.src = "http://extremecoast.com/layout/v2/2menu7on.jpg"; </script> <script src="http://www.extremecoast.com/KW09/AC_RunActiveContent.js" type="text/javascript"></script> </head> <body> <a href="http://extremecoast.com"><img src="http://www.extremecoast.com/layout/v2/ecpp.png" border="0" align="middle" alt="" /></a> <table border="2" cellspacing="0" cellpadding="0" align="center" width="765" bgcolor="#000000" > <tr> <td><script type="text/javascript"> AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','765','height','200','pluginspage','http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash','src','http://extremecoast.com/layout/v2/kayakwars09banner','wmode','transparent','allowscriptaccess','always','movie','http://www.extremecoast.com/layout/v2/kayakwars09banner','bgcolor','#000000','quality','high' ); //end AC code </script> <br /> <a href="http://extremecoast.com" onmouseover="image1.src='http://extremecoast.com/layout/v2/menu1on.jpg';" onmouseout="image1.src='http://extremecoast.com/layout/v2/menu1off.jpg';"> <img name="image1" src="http://extremecoast.com/layout/v2/menu1off.jpg" border="0" alt="" /> </a> <a href="http://extremecoast.com/reports/reports.php" onmouseover="image2.src='http://extremecoast.com/layout/v2/menu2on.jpg';" onmouseout="image2.src='http://extremecoast.com/layout/v2/menu2off.jpg';"> <img name="image2" src="http://extremecoast.com/layout/v2/menu2off.jpg" border="0" alt="" /> </a> <a href="http://extremecoast.com/Kayak_Wars/index.php" onmouseover="image3.src='http://extremecoast.com/layout/v2/menu3on.jpg';" onmouseout="image3.src='http://extremecoast.com/layout/v2/menu3onon.jpg';"> <img name="image3" src="http://extremecoast.com/layout/v2/menu3onon.jpg" border="0" alt="" /> </a> <a href="http://extremecoast.com/phpBB3/index.php" onmouseover="image4.src='http://extremecoast.com/layout/v2/menu4on.jpg';" onmouseout="image4.src='http://extremecoast.com/layout/v2/menu4off.jpg';"> <img name="image4" src="http://extremecoast.com/layout/v2/menu4off.jpg" border="0" alt="" /> </a> <a href="http://extremecoast.com/multimedia/multimedia.php" onmouseover="image5.src='http://extremecoast.com/layout/v2/menu5on.jpg';" onmouseout="image5.src='http://extremecoast.com/layout/v2/menu5off.jpg';"> <img name="image5" src="http://extremecoast.com/layout/v2/menu5off.jpg" border="0" alt="" /> </a> <a href="http://extremecoast.com/contest.php" onmouseover="image6.src='http://extremecoast.com/layout/v2/menu6on.jpg';" onmouseout="image6.src='http://extremecoast.com/layout/v2/menu6off.jpg';"> <img name="image6" src="http://extremecoast.com/layout/v2/menu6off.jpg" border="0" alt="" /> </a> <a href="http://extremecoast.com/contact.php" onmouseover="image7.src='http://extremecoast.com/layout/v2/menu7on.jpg';" onmouseout="image7.src='http://extremecoast.com/layout/v2/menu7off.jpg';"> <img name="image7" src="http://extremecoast.com/layout/v2/menu7off.jpg" border="0" alt="" /> </a> <br /> Your JavaScript created images and the images within your HTML are not the same thing. Look at your code. You explicitly create new images within your JavaScript. These images, despite having a source, aren't displayed. Instead, you recreate them within your HTML. Your JavaScript most likely is swapping the values of the src attribute. The problem is that it's doing it to the wrong images. Instead, you should do something like: <script type="text/javascript"> window.onload = function() //<-- ensures that the script won't run until the entire HTML document is made { var image1 = document.images["image1"]; //<-- don't need to specify the src...simply use the one originally given in the HTML var image2 = document.images["image2"]; /* ... */ } </script> Another solution is to forget using JavaScript for rollovers and simply use CSS. You can tie image movement to CSS' a:hover pseudo-element. For more info, do a google search for CSS rollovers. Quote Link to comment https://forums.phpfreaks.com/topic/144768-onmouseover-and-onmouseout-not-working/#findComment-759647 Share on other sites More sharing options...
bibby Posted February 12, 2009 Share Posted February 12, 2009 When using inline javascript with images, as well as with other elements, the keyword this can be used. <img src="some.jpg" onmouseover="this.src='someother.jpg'" onmouseout="this.src='some.jpg'" /> I much rather prefer to teach the images how to rollover themselves. If you continue the naming convention 'menu#on.jpg' and '2menu#on.jpg', you could use something like this: // anonymous function leaves no mess, // just run it AFTER the images are created (function() { //gather all images var img,imgs=document.getElementsByTagName('img'); for(var i=0; i< imgs.length; i++) { img=imgs[i]; // use only those that match menu#on.jpg if(img.src.match(/menu\don\.jpg/)==null) continue; // assign the alternate source as a member var img.over_img = (function() { var parts = img.src.split(/\//).reverse(); parts[0]="2"+parts[0]; return parts.reverse().join('/'); })(); // retain the original src img.orig_img = img.src; // use the alternate on hover img.onmouseover = function() { this.src = this.over_img; } // return to normal when out img.onmouseout = function() { this.src = this.orig_img; } } })(); Quote Link to comment https://forums.phpfreaks.com/topic/144768-onmouseover-and-onmouseout-not-working/#findComment-760254 Share on other sites More sharing options...
Skipjackrick Posted February 12, 2009 Author Share Posted February 12, 2009 Thanks for the help!! When using inline javascript with images, as well as with other elements, the keyword this can be used. <img src="some.jpg" onmouseover="this.src='someother.jpg'" onmouseout="this.src='some.jpg'" /> I much rather prefer to teach the images how to rollover themselves. If you continue the naming convention 'menu#on.jpg' and '2menu#on.jpg', you could use something like this: // anonymous function leaves no mess, // just run it AFTER the images are created (function() { //gather all images var img,imgs=document.getElementsByTagName('img'); for(var i=0; i< imgs.length; i++) { img=imgs[i]; // use only those that match menu#on.jpg if(img.src.match(/menu\don\.jpg/)==null) continue; // assign the alternate source as a member var img.over_img = (function() { var parts = img.src.split(/\//).reverse(); parts[0]="2"+parts[0]; return parts.reverse().join('/'); })(); // retain the original src img.orig_img = img.src; // use the alternate on hover img.onmouseover = function() { this.src = this.over_img; } // return to normal when out img.onmouseout = function() { this.src = this.orig_img; } } })(); Quote Link to comment https://forums.phpfreaks.com/topic/144768-onmouseover-and-onmouseout-not-working/#findComment-760774 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.