Scholieren.com forum - [Java-script] images voor scrollover

Scholieren.com forum (https://forum.scholieren.com/index.php)

- Software & Hardware (https://forum.scholieren.com/forumdisplay.php?f=20)

- - [Java-script] images voor scrollover (https://forum.scholieren.com/showthread.php?t=103792)

je kent het wel, links die bij scrollover van plaatje veranderen

maar het probleem is dat ze meestal dus pas geladen worden (of in elk geval te laat zijn) als je over het plaatje heengaat.
heeft iemand toevallig een Javascript die dus wel snel plaatjes swapped (net zoals bij Flash) en zo'n mouseover kan doen?

ik had er trouwens nog wel een liggen:

PHP-code:


		
			
<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>



en dan:



<a href="mainframe.htm" target="main"onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage

        ('Start','','bla2.jpg',1)"><img name="Start" border="0" src="bla.jpg" width="50" height="20"></a>

Gewoon een pre-loader... ik zal er ff eentje voor je zoeken...

Code:

<script language="JavaScript" type="text/javascript">

image1 = new Image();

image1.src = img2.gif;

</script>

Code:

<a href="#" onmouseover="image1.src='img2.gif'" onmouseout="image1.src='img1.gif'"><img src="img1.gif" id="image1"></a>

Moet het volgens mij gewoon doen :)

Maar mocht dat niet het geval zijn, zoek dan ff op Google op "preload images javascript"... dan vind je ongetwijfeld iets ;)

Voor de liefhebbers, deze werkt dus wel snel :)

PHP-code:


		
			
<HTML>

<HEAD>

<script language="JavaScript">



<!--

              if (document.images) {

           

            img1on = new Image(); 

            img1on.src ="home.jpg";





           img1off = new Image(); 

            img1off.src ="home2.jpg";

 



         }



function imgOn(imgName) {

        if (document.images) {

            document[imgName].src = eval(imgName + "on.src");

        }

}



function imgOff(imgName) {

        if (document.images) {

            document[imgName].src = eval(imgName + "off.src");

        }

}



//-->



</script>

</HEAD>



<BODY>

<a href="webdesign/artwork.htm" onMouseover="imgOn('img1')" onMouseout="imgOff('img1')"><img src="home.jpg" name="img1" width="122" height="12" border="0"></a>

</BODY>

</HTML>