?
Solved

How do I preload images for my code?

Posted on 2002-05-01
6
Medium Priority
?
181 Views
Last Modified: 2012-08-14
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">

function changeImages() {
    for (var i=0; i<changeImages.arguments.length; i+=2) {
         changeImages.arguments[i].src = changeImages.arguments[i+1];
    }
}
</SCRIPT>
</head>

<body>
Inside the body

<td >
<ilayer width=82 height=56 name="ilayer1"><layer width=82 Top=30 name="layer1">
<a href="newmenu2.html"
onMouseOver="changeImages(document.Productsbutton, 'images/Productsbutton.gif'); return true;"
onMouseOut="changeImages(document.Productsbutton, 'images/Productsbuttonunsel.gif'); return true;" target="_self"
onMouseDown = "changeImages(document.Productsbutton, 'images/Productsbuttondown.gif');">
<img valign=bottom src=images/Productsbuttonunsel.gif name="Productsbutton" width=82 height=30 border=0 ></a>
</layer></ilayer>
</td>
</body>
</html>

I've tried a few samples but couldn't get it to work right.  I got the basics of it down, but I can't seem to get it to pass into the changeImages function.  Can someone help me out with some code and a little explanation?  IE and NN4 and NN6 compatible too.

thanks
atsac

0
Comment
Question by:atsac
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
6 Comments
 

Expert Comment

by:c_ranjit
ID: 6985486
The following code should help

<html>
<head>
<title>Image Preload</title>
<script language="javascript">
var imagex1=new Image()
imagex1.src="y.gif" //path of your rollover image

function showimage(number){
if (number==1){
document.image1.src=imagex1.src
}
}

function hideimage(number){
if (number==1){
document.image1.src="x.gif" //the path of your original image
}
}

</script>
</head>
<body>
<a href="Javascript:void()" onmouseover="showimage(1)" onmouseout="hideimage(1)"><img src="x.gif" height="20" width="20" name="image1"></a>
</body>
</html>

NB: If you are using dreamweaver, the objective can be easily achieved since dreamweaver has an option to option to preload images when you use the rollover images option
0
 

Author Comment

by:atsac
ID: 6986818
I need this code to work with the code written above.  The changeImages function cannot be modified unless you are postitive it will work on NN4.  Plus I don't want to have to pass a number each time I want to change an image.  I can preload images like what you have above, but I can't get it to work with the code written above for NN4 and NN6.  Any other ideas?
0
 
LVL 2

Accepted Solution

by:
thor918 earned 225 total points
ID: 6988081
why can't you just use what dreamweaver makes?

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
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;
}

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>
</head>

<body bgcolor="#FFFFFF" text="#000000" onLoad="MM_preloadImages('file:///C|/Documents%20and%20Settings/Administrator.THOR/Desktop/dreamweaver_test/1/aus-on.gif')">
<a href="http://www.experts-exchange.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','file:///C|/Documents%20and%20Settings/Administrator.THOR/Desktop/dreamweaver_test/1/aus-on.gif',1)"><img name="Image1" border="0" src="file:///C|/Documents%20and%20Settings/Administrator.THOR/Desktop/dreamweaver_test/1/aus.gif" width="68" height="92"></a>
</body>
</html>
0
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 
LVL 2

Expert Comment

by:thor918
ID: 6988083
it is written in dreamweaver that it works in ns4.. and It probably works in the versions above to
0
 

Author Comment

by:atsac
ID: 6988978
Don't have dreamweaver but that code seems to work.
thanks

Atsac
0
 
LVL 2

Expert Comment

by:thor918
ID: 6991604
Thanks for the points :D
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question