ChaosKnight Posted January 11, 2009 Share Posted January 11, 2009 Hey guys, On the website I'm busy with I use an opensource image preload and rollover swap functions... It works great but the one I use for a drop down doesn't work as advertised in IE and Google Chrome... Please assist The site is situated at: http://www.hotels-tours-safaris.com/new_site/index.php Here's the opensource code I talked about: <script language="JavaScript" 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[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } 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[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } 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[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function s_show(){return false} function s_hide(){return false} if(window.event+''=='undefined')event=0 //--> </script> <body onload="MM_preloadImages('images/web_04_ro.jpg','images/web_05_ro.jpg','images/web_06_ro.jpg','images/web_07_ro.jpg','images/home_ro.gif','images/countries.gif','images/countries_ro.gif,'images/about_ro.gif','images/car_rental_ro.gif','images/maps_ro.gif','images/bookings_ro.gif','images/contact_ro.gif','subnav/southafrica','subnav/southafrica_ro','subnav/kenya','subnav/kenya_ro','subnav/botswana','subnav/botswana_ro')"> //Gets called like this <a href="index.php?page=home" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/home_ro.gif',1)"><img src="images/home.gif" alt="Home" name="home" width="93" height="35" border="0" id="home" /></a> As you can see it's really bulky code, the roll over image also take it's time before displaying... Any ideas to make it less hard on the code and faster to load? Here's the code for the one drop down link... // SAMPLE FUNCTION USED FOR RELATIVE POSITIONING function s_getStart(a){ var bodyMarginTop=0;// specify manually to get over bugs var bodyMarginLeft=0;// in Opera 5/6, Konqueror<3.2 and IE5.x/Mac var o=document.images["getStart"];if(!o)return a=="x"?-630:0; if(s_nS4)return a=="x"?o.x:o.y; var oP,oC,ieW;oP=o.offsetParent;oC=a=="x"?o.offsetLeft:o.offsetTop; ieW=s_iE&&!s_mC?1:0; while(oP){if(ieW&&oP.tagName&&oP.tagName.toLowerCase()=="table"&&oP.border&&oP.border>0)oC++;oC+=a=="x"?oP.offsetLeft:oP.offsetTop;oP=oP.offsetParent}; return s_oP7m||s_kN31p&&!s_kN32p||s_iE5M?a=="x"?s_oP7m?oC:oC+bodyMarginLeft:oC+bodyMarginTop:oC}; /* All browsers have problems with finding the real position of an element on the page in certain cases. I have tried to get over some browser bugs with the above function- that's why it's so complex. */ // SAMPLE FUNCTION USED FOR RELATIVE POSITIONING // CODE USED FOR REPOSITIONING PERMANENT MENUS WHILE PAGE LOADING function s_whilePageLoading(){if(typeof s_ML=="undefined"){setTimeout("s_whilePageLoading()",1000);return};var px=s_oP7m||s_nS4?0:"px",os=null,x,y,i,S;for(i=0;i<s_P.length;i++){S=s_[s_P[i]][0];if(typeof(S.T)=="number"&&typeof(S.L)=="number")continue;os=s_nS4?document.layers["s_m"+s_P[i]]:s_getOS("s_m"+s_P[i]);os.left=eval(S.L)+px;os.top=eval(S.T)+px};if(typeof s_Bl=="undefined")setTimeout("s_whilePageLoading()",1000)};s_whilePageLoading();s_ol=window.onload?window.onload:function(){};window.onload=function(){setTimeout('s_Bl=1',3000);s_ol()} // CODE USED FOR REPOSITIONING PERMANENT MENUS WHILE PAGE LOADING // === 4 === MENU DEFINITIONS s_add( { N:'countries',// NAME LV:1, // LEVEL (look at IMPORTANT NOTES 1 in the Manual) MinW:93, // MINIMAL WIDTH T:'s_getStart("y")', // TOP (look at IMPORTANT HOWTOS 6 in the Manual) L:'s_getStart("x")', // LEFT (look at IMPORTANT HOWTOS 6 in the Manual) P:true, // menu is PERMANENT (you can only set true if this is LEVEL 1 menu) S:s_CSS1 // STYLE Array to use for this menu }, [ // define items {U:'url',T:'text' ...} look at the Manual for details {Image:['images/countries.gif',93,35],OnImage:'images/countries_ro.gif', Show:'sub',U:'index.php',T:'',Target:'_self'} ] ); s_add( {N:'sub',LV:2,MinW:170,T:'s_getStart("y")+30',L:'s_getStart("x")+5',P:false,S:s_CSS1}, [ {Image:['subnav/botswana.jpg',170,19],OnImage:'subnav/botswana_ro.jpg', U:'index.php?page=country&country=botswana',T:'',Target:'_self'}, {Image:['subnav/namibia.jpg',170,19],OnImage:'subnav/namibia_ro.jpg', U:'index.php?page=country&country=namibia',T:'',Target:'_self'}, {Image:['subnav/southafrica.jpg',170,19],OnImage:'subnav/southafrica_ro.jpg', U:'index.php?page=country&country=southafrica',T:'',Target:'_self'}, {Image:['subnav/zimbabwe.jpg',170,19],OnImage:'subnav/zimbabwe_ro.jpg', U:'index.php?page=country&country=zimbabwe',T:'',Target:'_self'} ] ); Isn't there an easier way to get the positioning right in every browser and to get the drop down to work correct? I call that image like this: <img name="getStart" src="images/spacer.gif" height="35" alt="" /> Why doesn't this work in IE and Google Chrome? Thanks (Anyone that thinks he want this to use this code, please don't, as I said above it's really slow, doesn't work in 2 browsers and makes the whole page load really long) Quote Link to comment https://forums.phpfreaks.com/topic/140396-image-swap/ Share on other sites More sharing options...
KevinM1 Posted January 11, 2009 Share Posted January 11, 2009 I don't see any dropdown menu at the site you provided a link to. In any event, image rollovers are very easy to do, especially if you're using the images as links. The big question, however, is how much JavaScript and CSS do you know? Quote Link to comment https://forums.phpfreaks.com/topic/140396-image-swap/#findComment-734898 Share on other sites More sharing options...
ChaosKnight Posted January 12, 2009 Author Share Posted January 12, 2009 Yes the drop down one doesn't display in IE and Google Chrome, that's what I want to fix, and while I'm at it, I want to minimize the loading time and do all this without such a long script... I know quite a lot about CSS, but not about JavaScript, I learned about the relative positioning for a drop down image, isn't that necessary? Will it be possible to create that roll over drop down image link and to make it easier to have the drop down be a list of images? As you can see here below, this is how I added the drop down image list with JavaScript: s_add( {N:'sub',LV:2,MinW:170,T:'s_getStart("y")+30',L:'s_getStart("x")+5',P:false,S:s_CSS1}, [ {Image:['subnav/botswana.jpg',170,19],OnImage:'subnav/botswana_ro.jpg', U:'index.php?page=country&country=botswana',T:'',Target:'_self'}, {Image:['subnav/namibia.jpg',170,19],OnImage:'subnav/namibia_ro.jpg', U:'index.php?page=country&country=namibia',T:'',Target:'_self'}, {Image:['subnav/southafrica.jpg',170,19],OnImage:'subnav/southafrica_ro.jpg', U:'index.php?page=country&country=southafrica',T:'',Target:'_self'}, {Image:['subnav/zimbabwe.jpg',170,19],OnImage:'subnav/zimbabwe_ro.jpg', U:'index.php?page=country&country=zimbabwe',T:'',Target:'_self'} ] ); Quote Link to comment https://forums.phpfreaks.com/topic/140396-image-swap/#findComment-735161 Share on other sites More sharing options...
KevinM1 Posted January 12, 2009 Share Posted January 12, 2009 Yes the drop down one doesn't display in IE and Google Chrome, that's what I want to fix, and while I'm at it, I want to minimize the loading time and do all this without such a long script... I know quite a lot about CSS, but not about JavaScript, I learned about the relative positioning for a drop down image, isn't that necessary? Will it be possible to create that roll over drop down image link and to make it easier to have the drop down be a list of images? As you can see here below, this is how I added the drop down image list with JavaScript: s_add( {N:'sub',LV:2,MinW:170,T:'s_getStart("y")+30',L:'s_getStart("x")+5',P:false,S:s_CSS1}, [ {Image:['subnav/botswana.jpg',170,19],OnImage:'subnav/botswana_ro.jpg', U:'index.php?page=country&country=botswana',T:'',Target:'_self'}, {Image:['subnav/namibia.jpg',170,19],OnImage:'subnav/namibia_ro.jpg', U:'index.php?page=country&country=namibia',T:'',Target:'_self'}, {Image:['subnav/southafrica.jpg',170,19],OnImage:'subnav/southafrica_ro.jpg', U:'index.php?page=country&country=southafrica',T:'',Target:'_self'}, {Image:['subnav/zimbabwe.jpg',170,19],OnImage:'subnav/zimbabwe_ro.jpg', U:'index.php?page=country&country=zimbabwe',T:'',Target:'_self'} ] ); Hate to tell you, but the dropdowns aren't working with FireFox 3, either. At least, if they're supposed to be on the site you linked to in your first message. You're attempting to use a 3rd party, pre-written solution, correct? From what I can tell, from both this thread and the other one, it's a junk script. You'd be better off starting from scratch. I used a simple dropdown solution in one of my sights called Son of Suckerfish. It's a simple CSS and JavaScript method of creating dropdowns. The JavaScript is simply: // This code is to be used in conjunction with the Son of Suckerfish // navigation menu system. This code was provided by HTMLDog // (http://www.htmldog.com/articles/suckerfish/dropdowns/). sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i0? " ": "") "sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), ""); } } } mcAccessible = function() { var mcEls = document.getElementById("nav").getElementsByTagName("A"); for (var i=0; i0? " ": "") "sffocus"; //a:focus this.parentNode.className =(this.parentNode.className.length>0? " ": "") "sfhover"; //li < a:focus if(this.parentNode.parentNode.parentNode.nodeName == "LI") { this.parentNode.parentNode.parentNode.className =(this.parentNode.parentNode.parentNode.className.length>0? " ": "") "sfhover"; //li < ul < li < a:focus if(this.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName == "LI") { this.parentNode.parentNode.parentNode.parentNode.parentNode.className =(this.parentNode.parentNode.parentNode.parentNode.parentNode.className.length>0? " ": "") "sfhover"; //li < ul < li < ul < li < a:focus } } } mcEls[i].onblur=function() { this.className=this.className.replace(new RegExp("( ?|^)sffocus\\b"), ""); this.parentNode.className=this.parentNode.className.replace(new RegExp("( ?|^)sfhover\\b"), ""); if(this.parentNode.parentNode.parentNode.nodeName == "LI") { this.parentNode.parentNode.parentNode.className=this.parentNode.parentNode.parentNode.className.replace(new RegExp("( ?|^)sfhover\\b"), ""); if(this.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName == "LI") { this.parentNode.parentNode.parentNode.parentNode.parentNode.className=this.parentNode.parentNode.parentNode.parentNode.parentNode.className.replace(new RegExp("( ?|^)sfhover\\b"), ""); } } } } } // only ie needs the sfHover script. all need the accessibility script... // thanks http://www.brothercake.com/site/resources/scripts/onload/ if(window.addEventListener) window.addEventListener('load', mcAccessible, false); // gecko, safari, konqueror and standard else if(document.addEventListener) document.addEventListener('load', mcAccessible, false); // opera 7 else if(window.attachEvent) { // win/ie window.attachEvent('onload', sfHover); window.attachEvent('onload', mcAccessible); } else { // mac/ie5 if(typeof window.onload == 'function') { var existing = onload; window.onload = function() { existing(); sfHover(); mcAccessible(); } } else { window.onload = function() { sfHover(); mcAccessible(); } } } Put that in an external file and link to it like so: <html> <head> <title>Blah</title> <script type="text/javascript" src="my_dropdown_file.js"></script> </head> The CSS can get a bit more complicated, but is explained here: http://www.htmldog.com/articles/suckerfish/dropdowns/ Ignore the JavaScript there. If memory serves, the script I provided above was the one that everyone figured out to be the best. The original version didn't work for various Mac browsers. Quote Link to comment https://forums.phpfreaks.com/topic/140396-image-swap/#findComment-735323 Share on other sites More sharing options...
ChaosKnight Posted January 13, 2009 Author Share Posted January 13, 2009 Thanks for the script will take a look at it... Does anybody know about a good JavaScript book that teaches everything including advanced browser differences, anvanced scripts, even some things about ajax? But seeing that I know so little about JavaScript thanks to JavaScript for dummies, that book must also please include the basics, so that I can see what I missed... I heard some good remarks about JavaScript Bible 6, would you reccomend it, or is there a better book? Thanks a lot guys Quote Link to comment https://forums.phpfreaks.com/topic/140396-image-swap/#findComment-736032 Share on other sites More sharing options...
KevinM1 Posted January 13, 2009 Share Posted January 13, 2009 Thanks for the script will take a look at it... Does anybody know about a good JavaScript book that teaches everything including advanced browser differences, anvanced scripts, even some things about ajax? But seeing that I know so little about JavaScript thanks to JavaScript for dummies, that book must also please include the basics, so that I can see what I missed... I heard some good remarks about JavaScript Bible 6, would you reccomend it, or is there a better book? Thanks a lot guys I learned JavaScript from two books: The JavaScript and DHTML Cookbook by Danny Goodman (http://www.amazon.com/JavaScript-DHTML-Cookbook-Danny-Goodman/dp/0596514085/ref=sr_1_1?ie=UTF8&s=books&qid=1231850230&sr=1-1). It's a decent primer on the basics, but some of his event handling leaves a lot to be desired. Still, if you need to grasp the basics, this is a good place to start. The other book was Pro JavaScript Techniques by John Resig (http://www.amazon.com/Pro-JavaScript-Techniques-John-Resig/dp/1590597273/ref=sr_1_1?ie=UTF8&s=books&qid=1231850340&sr=1-1). Resig is the man who developed the jQuery framework, so he definitely knows what he's doing. This book was nothing short of a revelation to me. Once you get the basics down, this should be the book you use. It's my JavaScript bible. Quote Link to comment https://forums.phpfreaks.com/topic/140396-image-swap/#findComment-736142 Share on other sites More sharing options...
ChaosKnight Posted February 7, 2009 Author Share Posted February 7, 2009 I'm still busy with the book you suggested... Great book though! I'll recommend it to all JavaScript newbies... How can I call the dropdown correctly? Please go look at www.hotels-tours-safaris.com/new_site/index.php all errors are fixed now, I removed all behavioural scripts and that fixed my javascript errors, before I continue I want to fix the navbar issues I used the javascript you gave me as well as the CSS on the page you reffered to.. Please see if I am doing it correctly: <ul id="nav" <li><a href="index.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('countries','','images/countries_ro.gif',1)"><img src="images/countries.gif" alt="Countries" name="countries" width="93" height="35" border="0" id="countries" /></a></li> <ul> <li><a href="index.php?page=country&country=botswana" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('botswana','','subnav/botswana_ro.jpg',1)"><img src="subnav/botswana.jpg" alt="Botswana" name="botswana" width="170" height="19" border="0" id="botswana" /></a></li> <li><a href="index.php?page=country&country=namibia" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('namibia','','subnav/namibia_ro.jpg',1)"><img src="subnav/namibia.jpg" alt="Namibia" name="namibia" width="170" height="19" border="0" id="namibia" /></a></li> <li><a href="index.php?page=country&country=southafrica" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('southafrica','','subnav/southafrica_ro.jpg',1)"><img src="subnav/southafrica.jpg" alt="South Africa" name="southafrica" width="170" height="19" border="0" id="southafrica" /></a></li> <li><a href="index.php?page=country&country=zimbabwe" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('zimbabwe','','subnav/zimbabwe_ro.jpg',1)"><img src="subnav/zimbabwe.jpg" alt="Zimbabwe" name="zimbabwe" width="170" height="19" border="0" id="zimbabwe" /></a></li> </ul> </li> </ul> Thanks, I appreciate your help! Quote Link to comment https://forums.phpfreaks.com/topic/140396-image-swap/#findComment-756770 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.