Källkoden för /anders.enges/html/js2.asp

---

<!--#include file="../inc/navstuff.asp" -->
Om man har endast några få bilder och om man vill ha en bild som
används om musen är ovanpå bilden och en som används i annat fall kan man göra
följande:
<p>
Sätt in följande kod i HTML dokumentet:<p>
<div class=code>
<script language="JavaScript"><br>
<!--<br>
// vi kollar om browsern klarar av images. om den inte gör detta är <br>
// document.images = undefined = false<br>
// behöver inte kolla netscape och explorer versionsnummer...<br>
if (document.images)<br>
{<br>
    // följande kod laddar två bilder som är 24 pixels breda<br>
    // och 18 pixels höga<br><br>
    // variabeln bild är en Image som är 24*18<br>
    <b>bild</b> = new Image(<b>24</b>,<b>18</b>);<br>
    // variabeln bild skall innehålla bilden bild.gif<br>
    <b>bild</b>.src = "<b>bild.gif</b>";<br>
    // variabeln bild_aktiv är en Image som är 24*18<br>
    <b>bild_aktiv</b> = new Image(<b>24</b>,<b>18</b>);<br>
    // variabeln bild_aktiv skall innehålla bilden bild_upp.gif<br>
    <b>bild_aktiv</b>.src = "<b>bild_upp.gif</b>";<br>
}<br><br>
function doOver( ) <br>
{<br>
    if (document.images)<br>
        // sätt bilden till den bild som finns i variabeln bild_aktiv<br>
        bilden.src = bild_aktiv.src;<br>
}<br>
<br>
function doOut( ) <br>
{<br>
    if (document.images)<br>
        // sätt bilden till den bild som finns i variabeln bild<br>
        bilden.src = bild.src;<br>
}<br>
<br>
//--><br>
</script><br><br>
<a href="http://www.somewhere.com" <br>
    <b>onmouseover="doOver( )"</b> <br>
    <b>onmouseout="doOut( )"</b>><br>
<img name="<b>bilden</b>" src="bild.gif" width=24 height=18 border=0><br>
</a>
</div>
<p>Koden fungerar så att när man för musen ovanpå länken (obs! INTE bilden utan länken)
så kommer onmouseover att köra Javascriptkoden <b>doOver</b>. Idenna funktion kommer
den bild som har namnet <b>bilden</b> (name="bilden") att få som källa (src) den bild som
finns färdigt laddad i variabeln <b>bild_aktiv</b>. När musen förs bort körs <b>doOut</b> som
sätter src till den bild som finns i variabeln bild.<p>
Nedan kan du se detta i praktiken:<p>
<SCRIPT  language="JavaScript">
<!--
// vi kollar om browsern klarar av images. om den inte gör detta är
// document.images = undefined = false
// behöver inte kolla netscape och explorer versionsnummer...
if (document.images)
{
     // följande kod laddar två bilder som är 24 pixels breda
     // och 18 pixels höga

     // variabeln bild är en Image som är 24*18
     bild = new Image(24,18);
     // variabeln bild skall innehålla bilden bild.gif
     bild.src = "bild.gif";
     // variabeln bild_aktiv är en Image som är 24*18
     bild_aktiv = new Image(24,18);
     // variabeln bild_aktiv skall innehålla bilden bild_upp.gif
     bild_aktiv.src = "bild_upp.gif";
}

function doOver( )
{
     if (document.images)
         bilden.src = bild_aktiv.src;
}

function doOut( )
{
     if (document.images)
         bilden.src = bild.src;
}
function doOverX( )
{
     if (document.images)
         bilden2.src = bild_aktiv.src;
}

function doOutX( )
{
     if (document.images)
         bilden2.src = bild.src;
}
//-->
</SCRIPT>

<a href="javascript:alert('bara en demo')" onmouseover="doOver( )" onmouseout="doOut( )">
<img name="bilden" src="bild.gif" width=24 height=18 border=0 >
</a>
<p>
Observera att bilden inte måste vara en länk för att kunna bytas. Följande fungerar
också:<p>
<div class=code>
<a href="http://www.somewhere.com" <br>
    <b>onmouseover="doOver( )"</b> <br>
    <b>onmouseout="doOut( )"</b>><br>
En vanlig textlänk...<br>
</a>
...<p>
<img name="<b>bilden</b>" src="bild.gif" width=24 height=18 border=0><br>
</div>
<p>
<a href="javascript:alert('bara en demo')"
     onmouseover="doOverX( )"
     onmouseout="doOutX( )">
En vanlig textlänk...
</a>       
<img name="bilden2" src="bild.gif" width=24 height=18 border=0>


<!--#include file="../inc/footer.asp" -->