Solved

How do I preload images for my code?

Posted on 2002-05-01
6
167 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
  • 3
  • 2
6 Comments
 

Expert Comment

by:c_ranjit
Comment Utility
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
Comment Utility
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 75 total points
Comment Utility
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
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
LVL 2

Expert Comment

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

Author Comment

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

Atsac
0
 
LVL 2

Expert Comment

by:thor918
Comment Utility
Thanks for the points :D
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
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…

728 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now