Rollover image


Ibland kan vanliga länkar som ändrar färg bli lite tråkiga och man istället vill ha bilder. Otroligt mycket snyggare och inte så mycket svårare egentligen, bara man vet hur man gör. Rollover image alltså.

För att få det att funka måste man använda sig av ett javascript. Javascript klistras enkelt in i kodmallen/HTML-dokumentet. Den kod du behöver är den här och den läggs direkt under <head>:

<script type=”text/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.01
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 && d.getElementById) x=d.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>

När det är klart måste du lägga upp en bit kod och bilderna du vill använda i kodmallen/HTML-dokumentet.
Du lägger det där du vill att den ska visas. Exempelvis om du vill ha det i menyn så lägg det under <side>.

<a href=”ADRESS VID KLICK” onmouseout=”MM_swapImgRestore()” onmouseover=”MM_swapImage(’Ewra’,”,’bild2.jpg’,1)”><img src=”bild1.jpg” alt=”Ewra” name=”Ewra” width=”200″ height=”100″ border=”0″ id=”Ewra” /></a>

BYT UT DETTA:
Vid ADRESS VID KLICK klistrar ni själva in den adress ni vill att man ska komma till när man klickar.
Bild2.jpg står för bild nummer två som visas (när man drar musen över)
Bild1.jpg är den bilden som visas när musen inte är över bilden.
Där det står Ewra byter ni själva ut till något kort som beskriver bilden (Det är för de som inte kan se bilder)

Sedan är det klart!
Tyvärr blir det inga bilder till denna tutorial men om det är något som inte funkar är det bara att lämna en kommentar här nedanför!

Kommentera

Din e-post kommer inte att visas. Obligatoriska fält är markerade *

Denna webbplats använder Akismet för att minska skräppost. Lär dig hur din kommentardata bearbetas.