Här kommer ett tips från julkalendern! Tänkte berätta hur man gör mouseoverbilder (bilden ändras när man håller musen över den). Hoppas ni kommer ha nytta av det :D

1. Börja med att göra två bilder - en som du använder som vanligt och en bild som kommer upp när man håller musen över den "vanliga bilden". Ladda sedan upp dom på din blogg och spara bildadresserna.

2. Kopiera sedan denna koden och lägg över </head> i alla kodmallarna.

<mce:script LANGUAGE="JavaScript"><!-- // This is the implementation of SimpleSwap // by Jehiah Czebotar // Version 1.1 - June 10, 2005 // Distributed under Creative Commons // // Include this script on your page // then make image rollovers simple like: // <img src="/images/ss_img.gif" mce_src="/images/ss_img.gif" oversrc="/images/ss_img_over.gif"> // // http://jehiah.com/archive/simple-swap // function SimpleSwap(el,which){ el.src=el.getAttribute(which || "origsrc"); } function SimpleSwapSetup(){ var x = document.getElementsByTagName("img"); for (var i=0;i<x.length;i++){ var oversrc = x[i].getAttribute("oversrc"); if (!oversrc) continue; // preload image // comment the next two lines to disable image pre-loading x[i].oversrc_img = new Image(); x[i].oversrc_img.src=oversrc; // set event handlers x[i].onmouseover = new Function("SimpleSwap(this,'oversrc');"); x[i].onmouseout = new Function("SimpleSwap(this);"); // save original src x[i].setAttribute("origsrc",x[i].src); } } var PreSimpleSwapOnload =(window.onload)? window.onload : function(){}; window.onload = function(){PreSimpleSwapOnload(); SimpleSwapSetup();} // --></mce:script>

3. Nu ska du lägga in bilden/bilderna och det gör du med hjälp av denna kod:

<a onfocus="blur()" href="länkadressen" mce_href="/1901887/entries/article/105719780/länkadressen"><img src="adressen till bild 1" mce_src="/1901887/entries/article/105719780/adressen till bild 1" oversrc="adressen till bild 2" border="0"/></a>

Du lägger in koden i kodmallarna där du vill ha mouseoverbilden. T.ex. om du vill ha den i menyn lägger du den någonstans under <div id="side">

4. Om du bara vill ha mouseoverbilder, alltså utan länk så att man inte kan klicka på dom lägger du in denna kod istället:

<img src="adressen till bild 1" mce_src="/1901887/entries/article/105719780/adressen till bild 1" oversrc="adressen till bild 2" border="0">;


KLART

Om du undrar över något är det bara att fråga!
Puss&Kram♥