Sorry - I think I should have posted this in CSS forum???? Hi, I am a complete novice but I've been playing around with buttons which work fine in Firefox but behave really weird in IE6. I created the buttons in Fireworks and they are basically a rectangle with text that changes colour on rollover. BTW I've tried it with and without CSS and the results are the same. The first time my page is loaded in IE6 rollover is not recognised even though the button itself works (well it goes to the right external page). But if I leave the page and then go back with/without reloading the rollover works. Also always on clicking the button the image completely disappears (so do other button images in a random way). Please save my sanity Suzella
Thank you for replying - the code is the nth time I've tried to sort this out. So I created this latest one using the insert image navbar in Dreamwever and got rid of the rest of the page. I have created rollovers in Fireworks and Dreamweaver, I have tried tables and individual image based and now using DW but the result in IE6 is always the same. I've now tried it in Opera and that works too! Guess it's going to be stupidity on my part! Here is the code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> <script type="text/JavaScript"> <!-- function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_nbGroup(event, grpName) { //v6.0 var i,img,nbArr,args=MM_nbGroup.arguments; if (event == "init" && args.length > 2) { if ((img = MM_findObj(args[2])) != null && !img.MM_init) { img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src; if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array(); nbArr[nbArr.length] = img; for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args)) != null) { if (!img.MM_up) img.MM_up = img.src; img.src = img.MM_dn = args[i+1]; nbArr[nbArr.length] = img; } } } else if (event == "over") { document.MM_nbOver = nbArr = new Array(); for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args)) != null) { if (!img.MM_up) img.MM_up = img.src; img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up); nbArr[nbArr.length] = img; } } else if (event == "out" ) { for (i=0; i < document.MM_nbOver.length; i++) { img = document.MM_nbOver; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; } } else if (event == "down") { nbArr = document[grpName]; if (nbArr) for (i=0; i < nbArr.length; i++) { img=nbArr; img.src = img.MM_up; img.MM_dn = 0; } document[grpName] = nbArr = new Array(); for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args)) != null) { if (!img.MM_up) img.MM_up = img.src; img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up; nbArr[nbArr.length] = img; } } } //--> </script> </head> <body onLoad="MM_preloadImages('buttout.png','buttout.jpg','buttabo.jpg')"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td><a href="http://suzesite.atspace.com/index.htm" target="_top" onClick="MM_nbGroup('down','group1','againh','buttout.png',1)" onMouseOver="MM_nbGroup('over','againh','buttout.jpg','',1)" onMouseOut="MM_nbGroup('out')"><img src="butt.jpg" alt="" name="againh" width="125" height="32" border="0" onload=""></a></td> <td><a href="http://suzesite.atspace.com/aboutus.htm" target="_top" onClick="MM_nbGroup('down','group1','againa','buttabo.jpg',1)" onMouseOver="MM_nbGroup('over','againa','buttabo.jpg','',1)" onMouseOut="MM_nbGroup('out')"><img src="buttab.jpg" alt="" name="againa" width="125" height="32" border="0" onload=""></a></td> </tr> </table> </body> </html> Thank you for taking time out to look at this Suzella
Here is rollover code I use and it works in the major browsers. The first is the javascript and then the last part is an example of an IMG tag. You need to give the IMG tag an ID. That is what you will pass in the onmouseover and onmouseout. <script language="javascript">function rollover(imgID) { document.getElementById(imgID).src = document.getElementById(imgID).src.replace(/_off(\.[a-z0-9]+)$/i,'_on$1'); } function rollout(imgID) { document.getElementById(imgID).src = document.getElementById(imgID).src.replace(/_on(\.[a-z0-9]+)$/i,'_off$1'); } var images = new Array(); function preloading() { for (i = 0; i < preloading.arguments.length; i++){ images[i] = new Image(); images[i].src = preloading.arguments[i]; } } preloading("images/home_on.gif","images/about_on.gif","images/buy_on.gif","images/sell_on.gif","images/services_on.gif","images/refinancing_on.gif","images/contacts_on.gif"); </script> <img id="contacts" src="images/contacts_off.gif" width="175" height="15" alt="Contacts" onmouseover="rollover('contacts');" onmouseout="rollout('contacts');" /></div> Code (markup):
I've narrowed the problem down to IE6 service pack 2. When I tried my stuff on IE6 sp1 it worked perfectly. I'd welcome any ideas/advice! Thank you Slapyo for your code - I'm certainly going to try it out. Why haven't I tried it yet??? My problem is that I am an experienced programmer in things non-Web/Windows and as a newbie to Web stuff it almost hurts not to understand - especially when I can't apply logic to a problem! Suzella
Heh I understand your frustration. I haven't checked out that code that you used. I'd assume it would work since the code was inserted by DW. Let us know if you do end up finding a solution. The code I provided works, I use it on a few sites already. So that will work if you can't get the other stuff going.
Using DW's code you will probably always run into a few problems. I would recommend one of the other codes from myself or Slapyo. Usually it is easier to dissect in case you run into a problem
I've been trying to get your code working for about the past hour or so now and I think I've finally got it. Here it is... <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> <META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css"> <META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript"> <TITLE>Untitled Document</TITLE> <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> <!-- var pics_array = new Array(); function preloadImages() { if (document.images) { for(i = 0; i < preloadImages.arguments.length; i++) { pics_array[i] = new Image(); pics_array[i].src = preloadImages.arguments[i]; } } } function replaceImage(image_name, new_image_src) { if (document.images) { document.images[image_name].src = new_image_src; } } //--> </SCRIPT> </HEAD> <BODY onLoad="preloadImages('image1_down.gif','image1_over.gif','image2_down.gif','image2_over.gif')"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td><a href="http://suzesite.atspace.com/index.htm" target="_top" onMouseDown="replaceImage('image1','image1_down.gif')" onMouseOver="replaceImage('image1','image1_over.gif')" onMouseOut="replaceImage('image1', 'image1.gif')"><img src="image1.gif" alt="Image 1" name="image1" width="125" height="32" border="0"></a></td> <td><a href="http://suzesite.atspace.com/aboutus.htm" target="_top" onMouseDown="replaceImage('image2','image2_down.gif')" onMouseOver="replaceImage('image2','image2_over.gif')" onMouseOut="replaceImage('image2', 'image2.gif')"><img src="image2.gif" alt="Image 2" name="image2" width="125" height="32" border="0"></a></td> </tr> </table> </BODY> </HTML> Code (markup): You can download the test images I used here for your own local testing: http://home.earthlink.net/~joemax99/mouse_over_test/image1.gif http://home.earthlink.net/~joemax99/mouse_over_test/image1_down.gif http://home.earthlink.net/~joemax99/mouse_over_test/image1_over.gif http://home.earthlink.net/~joemax99/mouse_over_test/image2.gif http://home.earthlink.net/~joemax99/mouse_over_test/image2_down.gif http://home.earthlink.net/~joemax99/mouse_over_test/image2_over.gif You can also try viewing a small test page I've set up here: http://home.earthlink.net/~joemax99/mouse_over_test/index.html to see if it's working. Also, you want to make sure you're looking at the most recent version of the page, so make sure to delete all of Internet Explorer's cache and shut down and restart the browser if necassary. Let me know if it works. So far, I've tested it on all the major browsers and IE6 SP1 and it seems to be working fine.
Firstly I want to say sorry for not responding sooner - I have been quite ill and only just recovered. Enough! I will follow all the advice I have been given and report back. The people on this forum are incredible and one day I hope to be good enough to contribute and help others as you have helped me. A huge thank you for caring