PDA

View Full Version : Preload images + image swap



calum112
01-27-2005, 02:41 PM
Hi, I need a efficent image swap script (mouseover image) as well as a good preload image part.

I have two in mind (I hope somone can recommend which one to use):



<head>
<script language="JavaScript">
<!--
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_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_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_findObj(n, d) { //v4.0
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 && document.getElementById) x=document.getElementById(n); return x;
}
MM_preloadImages('image.gif');
//-->
</script>

<body>

<a href="*" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('1','','image.gif',1);" ><img name="1" src="image1.gif" width="105" height="26" border="0" alt="">

<end>






Second one:

<head>

<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];}
}
//-->
</script>



<body onLoad="MM_preloadImages('image.gif')">

<a href="*" onMouseOver="MM_swapImage('1','','image.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="image1.gif" name="1" width="48" height="22" border="0" id="1">

<end>



Can someone please recommend which to use?

Thanks

mwinter
01-27-2005, 06:20 PM
Hi, I need a efficent image swap script (mouseover image) as well as a good preload image part.

[...]

Can someone please recommend which to use?Neither. Macromedia scripts are badly written, bloated and lead to hard-to-maintain code.

See some code I wrote (http://www.mlwinter.pwp.blueyonder.co.uk/image-swap/) for an alternative. Please be aware that it's about time I reviewed it again, though it does work "as-is" in a number of browsers (I haven't tested it with Konqueror, Safari, nor IE/Mac so far as I don't have access to them).

A second alternative is to use CSS to display and alter background images. This might be better if you're only showing text with different background colours or patterns.

Mike

calum112
01-28-2005, 09:26 AM
Thanks for helping.

I didn't know you could make bgcolours change in mouseover.

Some of the images are currently just changing colour from plain white to plain blue how can I do this using bgcolours rather than images? Is this more efficent?


Thanks

mwinter
01-28-2005, 12:07 PM
Thanks for helping.You're welcome.


I didn't know you could make bgcolours change in mouseover.You can effect any style change, not just background properties.


Some of the images are currently just changing colour from plain white to plain blue how can I do this using bgcolours rather than images?By using the :hover pseudo-class. In decent browsers, this class can be applied to any CSS selector, allowing you to add or override declarations. Unfortunately, as IE is far from decent, this support is limited to a elements only. Why? I have no idea. However, if this is for link rollovers, the limitation is of no consequence:


#navigation {
/* Style the list: remove markers, padding, margins, etc */
}
#navigation li {
/* Perhaps add some padding to separate the items. */
display: inline;
}
#navigation a {
background-color: white;
color: black;
}
#navigation a:hover {
background-color: blue;
color: black;
}
<ul id="navigation">
<li><a href="/">Home</a></li>
<li><a href="/products/">Products</a></li>
<!-- blah, blah, blah -->
</ul>You get the idea. As I said, you can specify any change, between the two rules.

That said, if this is for a different purpose where links don't apply, you can (and should still) use CSS for modern browsers, but also include a fallback for IE.


Is this more efficent?Undoubtedly, as long as you don't produce a bloated style sheet.

Mike