Hur du får en mouse-over bild i menyn eller inlägg.

I det här inlägget tänkte jag visa hur jag fick mouse-over bilden i menyn (den bilden där det står "klicka här för att komma till startsidan").
Det går att göra på olika sätt, men det jag visar nedan är så som jag gjorde det.

Gör som nedan. ↓

1. Kopiera scriptet nedan, och sätt in scriptet i varje kodmall. Dvs. i Arkivsida, Kategorisida, Inläggsida och Framsida.
Scriptet ska vara över första </head>.

Kopiera detta:

<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" 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();}
//-->
</script>

 


2. Ladda upp två lika stora bilder genom att gå till Arkiv --> Bilder --> Ny bild.

 

3. Tryck på bilden och kopiera adressen högst upp.
Spara i ett worddokument eller liknande, för du kommer att behöva kopiera mer koder.

4. Gå till Skapa --> Inlägg --> Ändra redigerare (ligger längst ner under rutan som man skriver i)

5. Kopiera denna kod --> <img src="länken till bild1" oversrc="länken till bild2"> och lägg in.

6. Där det står "länken till bild1" så klistrar du in url-koden till den bilden du vill ha först. Och där det står "länken till bild2" så klistrar du in url-koden till den bilden som du vill ska komma när man drar musen över bilden.

7. Klart!



_me


Kommentarer

Kommentera inlägget här:

Namn:
Kom ihåg mig?

E-postadress: (publiceras ej)

URL/Bloggadress:

Kommentar:

Trackback


RSS 2.0