Images

**brsb** · Sep 25th, 2000, 06:16 AM

Hi!

How can I make so when I point on one image it replaced by other, i.e. roleover effect?

**kovan** · Sep 25th, 2000, 09:57 AM

you can do it with asp......
but it will be VERY slow
(because i dont think in asp you can preload images) where in java the images are preloaded and the effect is much faster..

example...
http://24.112.141.149/ipms/top.htm
the source Code:

Code:

<html>
<head>
	<title>IPMS LONDON ONTARIO CANADA</title>
<style type="text/css">
.clButtons{position:absolute; width:47; height:10; top:20; visibility:hidden; z-index:10; font-family:arial,helvetica; font-size:12px}
#divCircle{position:absolute; width:10; height:10; z-index:1; top:-50}
</style>
<script type="text/javascript" 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) { //v3.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); 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="#5858e9" onLoad="MM_preloadImages('membership2.jpg','about2.JPG','photos2.jpg','links2.jpg','shows2.jpg','events2.jpg','Email2.jpg')" topmargin=2 leftmargin=2>
<div align="center"><font color ="BLACK"><B> <font color ="BLACK"> <font color ="BLACK"> 
  <font color ="BLACK"> <font color ="BLACK"> <font color ="BLACK"> <font color ="BLACK"> 
  <font color ="BLACK"> </font></font></font></font></font></font></font></b></font>
  <table width="82%" border="0">
    <tr> 
      <td colspan="2">
        <div align="center"><font color ="BLACK"><b><font color ="BLACK"><font color ="BLACK"><font color ="BLACK"><font color ="BLACK"><font color ="BLACK"><font color ="BLACK"></font></font></font></font></font></font></b></font><font color ="BLACK"><b><font color ="BLACK"><font color ="BLACK"><font color ="BLACK"><font color ="BLACK"><font color ="BLACK"><font color ="BLACK"><font color ="BLACK"><font color ="BLACK"><a href="membership.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('membership','','membership2.jpg',1)" target="mainFrame"><img name="membership" border="0" src="membership1.jpg" width="100" height="20"></a><a href="about.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('about','','about2.JPG',1)" target="mainFrame"><img name="about" border="0" src="about1.jpg" width="60" height="20"></a><a href="photos.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Photos','','photos2.jpg',1)" target="mainFrame"><img name="Photos" border="0" src="photos1.jpg" width="60" height="20"></a><a href="links.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('links','','links2.jpg',1)" target="mainFrame"><img name="links" border="0" src="links1.jpg" width="60" height="20"></a><a href="show.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Shows','','shows2.jpg',1)" target="mainFrame"><img name="Shows" border="0" src="shows1.jpg" width="59" height="20"></a><a href="events.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Events','','events2.jpg',1)" target="mainFrame"><img name="Events" border="0" src="events1.jpg" width="60" height="20"></a><a href="mailto:[email protected]" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Email','','Email2.jpg',1)"><img name="Email" border="0" src="email1.jpg" width="60" height="20"></a></font></font></font></font></font></font></font></font></b></font></div>
      </td>
    </tr>
  </table>
  <font color ="BLACK"><B><font color ="BLACK"><font color ="BLACK"><font color ="BLACK"><font color ="BLACK"><font color ="BLACK"><font color ="BLACK"><font color ="BLACK"><font color ="BLACK"> 
  </font></font></font></font></font></font></font></font></b></font> </div>
</BODY>
</HTML>

**pnj** · Sep 27th, 2000, 05:58 PM

I may have read the post wrong,but if all you want to do is swap images onMouseover you can use a simple line like this.

<A HREF="http://www.someplace.com" onMouseover = "document.web.src='images/central.jpg'" onMouseout = "document.web.src='images/colleges.jpg'"><img src="images/colleges.jpg" border="0" name="web"></a>

this is shorter and works on my page.
although like I said, I may have read the post wrong.

Thread: Images

Thread Tools

Display

use JScript

that's an awfull lot of code....

Posting Permissions