Solved

How do I preload images for my code?

Posted on 2002-05-01
6
172 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
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 75 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
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Grunt script for Build Process 1 43
html input 8 43
Add or delete table rows 10 54
ability to create nested list on the UI using PHP, HTML, Javascript 7 45
I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
This article discusses how to create an extensible mechanism for linked drop downs.
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…

828 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