Hur man gör mouseover.




Mouseover bilder är riktigt coola och därför vill jag dela av mig tipset
här hur man gör.

1. Du behöver två bilder. Spara båda länkarna till bilderna.

mina länkar-
https://cdn3.cdnme.se/cdn/9-1/1876546/images/2011/kamerautrustning_120123562_128107991_thumb.jpg

https://cdn3.cdnme.se/cdn/9-1/1876546/images/2011/kamerautrustning-2_120123453_128109844_thumb.jpg



2. Kopier koden under och sätt in den över </head> i alla kodmallar. (framsida, inläggsida
kategorisida, arkivsida) ↓


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

_________________________

3. Nu ska du använda adresserna till bilderna och länkarna. Koden nedan ska du sätta
in någonstans under <div id="side"> om du vill ha den i menyn.

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


Vill du inte att bilder ska länka till något, utan du vill bara ha bilder
då ska du använda denna kod

<img src="adressen till bild 1" oversrc="adressen till bild 2" border="0">

Sen är det klart :)


Kommentarer
Postat av: ebba bloppis och tävling på bloggen

oooh smart! :D måste se om jag kan göra en sån bild själv :))

2011-01-21 @ 21:13:37
URL: http://brejjk.blogg.se/

Kommentera inlägget här:

Namn:
Kom ihåg mig?

E-postadress: (publiceras ej)

URL/Bloggadress:

Kommentar:

Trackback