Pre-Loading Images for an Image Button Rollover

JabbaTheNut · Mar 4, 2003

Can someone provide some code examples for pre-loading images for an Image Button rollover (i.e., "onmouseover", "onmouseout", etc.). I have tried following code unsuccessfully:

This is the javascript I am currently using...

<script language="javascript>

// Pre-load the rollover images

function pgInit ()
{
---image1 = New Image();
---image2 = New Image();

---image1.src = "images/myimage_over.gif"
---image2.src = "images/myimage_out.gif"
}

// Provide image to use, given the state

function rollImage (state)
{
---switch(state)
---{
------case "over":
---------image1.src;
------case "out":
---------image2.src;
---}
}

</script>

I have also included the following in my VB code-behind file under the Page_Load procedure to add the "onmouseover" and "onmouseout" events to the Image Button control on the rendered page...

myImgBtn.Attributes.Add("onmouseover", "this.src=rollImage('over');&quot

myImgBtn.Attributes.Add("onmouseout", "this.src=rollImage('out');&quot

The above code does not work. Can someone either correct my above code, tell me that the code appears correct and the problem must be something else, or suggest a different method? I want to pre-load images and use them for an image rollover for an Image Button.

Thanks in advance

Game Over, Man!

Isadore · Mar 4, 2003

I have a mouseover working on the following page (a frog):

http://frontpage.auburn.edu/icaae/datamenu.aspx

The code is as follows:

In the upper part of the HTML code:

<HEAD>
<title>Main Data Menu</title>
<Script type="text/JavaScript">
<!-- Hide Script from non-Javascript browsers
var pre=new Image(); pre.src="images/frogdance.gif";
function rollover

{
document.getElementById("a&quot

.src=(n!=0)?"images/frogdance.gif": "images/frogdotb.gif";
}
//-->
</Script>
<style type="text/css">
img {border-width:0}
//-->
</style>
</HEAD>

...and where the image is located:

<a href="javascript://" onmouseover="rollover(1)" onmouseout="rollover(0)">
<img name="a" id="a" src="images/frogdotb.gif" border="0">

..and it works.

BG12424 · Mar 4, 2003

This is what I use.

Code:

<script language=&quot;JavaScript&quot;>
<!--
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(&quot;#&quot;)!=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(&quot;?&quot;))>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 onLoad=&quot;MM_preloadImages('images/bold.gif','images/bold_over.gif','images/bullets.gif','images/bullets_over.gif')&quot;>

	<a href=&quot;#&quot; onMouseOut=&quot;MM_swapImgRestore()&quot; onMouseOver=&quot;MM_swapImage('Image0','','images/bullets_over.gif',1)&quot;>
		<img name=&quot;Image0&quot; border=&quot;0&quot; src=&quot;images/bullets.gif&quot;>
	</a>


	<a href=&quot;#&quot; onMouseOut=&quot;MM_swapImgRestore()&quot; onMouseOver=&quot;MM_swapImage('Image1','','images/bold_over.gif',1)&quot;>
		<img name=&quot;Image1&quot; border=&quot;0&quot; src=&quot;images/bold.gif&quot; height=&quot;28&quot; alt=&quot;contact&quot;>
	</a>

</body>

________________________________________________________________________
Are you trying to debug your ASP applications? See faq333-3255 for more details

regards,
Brian

JabbaTheNut · Mar 5, 2003

Thanks for your help. It works now

I solved the problem with my original example. My code was poorly written. Here is the proper layout.

In the <script></script> tag of the .aspx page enter the following...

<script language="javascript">
// Pre-Load Rollover Images
// Insert call to function in <body> tag
function pgInit ()
{
image1 = New Image();
image2 = New Image();
image1.src = "images/myimage_over.gif";
image2.src = "images/myimage_out.gif";
}

// Use this function to set image on rollover
function rollImage (state)
{
switch(state)
{
case "over":
document.getElementById("myImgBtn&quot

.src = image1.src;
break;
case "out":
document.getElementById("myImgBtn&quot

.src = image2.src;
break;
}
}

</script>

In the VB code-behind file under the Page_Load procedure, enter the following...

myImgBtn.Attributes.Add("onmouseover", "javaScript:rollImage('over');&quot

myImgBtn.Attributes.Add("onmouseout", "javaScript:rollImage('out');&quot

Game Over, Man!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Pre-Loading Images for an Image Button Rollover

JabbaTheNut

Programmer

Isadore

Technical User

BG12424

Programmer

JabbaTheNut

Programmer

Similar threads

Part and Inventory Search

Sponsor