Solved

How do I preload images for my code?

Posted on 2002-05-01
6
170 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
Use Case: Protecting a Hybrid Cloud Infrastructure

Microsoft Azure is rapidly becoming the norm in dynamic IT environments. This document describes the challenges that organizations face when protecting data in a hybrid cloud IT environment and presents a use case to demonstrate how Acronis Backup protects all data.

 
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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
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…

810 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