Jump to content

Image Swap


ChaosKnight

Recommended Posts

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)

Link to comment
Share on other sites

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'}
]
);

 

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 4 weeks later...

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!

 

 

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.