"/>
"/>
"/>
Mouseover
Hej!
Tänkte visa hur man gör en mouseoverbild! En bild som ändras när man drar musen över den. Jag har sådana på t.ex mina länkar eller till min kamerautrustning i menyn.
.
1. Börja med att göra två bilder, t. ex:
.
Bild 1:
Bild 2:
2. Kopiera sedan bildadresserna såhär: ↓
.
Bild 1: https://cdn3.cdnme.se/cdn/7-2/2271653/images/2011/kamerautrustning_152086276.jpg
Bild 2: https://cdn2.cdnme.se/cdn/7-2/2271653/images/2011/kamerautrustning2_152086528.jpg
.
3. Spara detta i utkastet, du kommer behöva detta senare..
.
4. Klistra in denna kod ↓ i alla kodmallar över </head> (högt upp). ↓
.
<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>
<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>
.
5. Nu ska du klistra in denna ↓ kod där du vill ha din mouseoverbild.
.
<a onfocus="blur()" href="länken"><img src="bildadress 1" oversrc="bildadress 2" border="0"/></a>
.
6. Där det står "länken" ska du skriva länkadressen som du vill att bilden ska länkas till. Där det står
"bildadress 1", "bildadress 2" ska du klistra in adresserna till bilderna du gjorde i steg 2 ↑↑
.
7. Om du bara vill göra mouseoverbilder (utan länk) ska du klistra in detta istället ↓
.
<img src="bildadress 1" oversrc="bildadress 2" border="0">
..
NU VAR DET KLART! Easy? Igentligen ganska krångligt..
Fattar du inte?
Kommentera här under om du behöver hjälp så kan jag nog hjälpa dig!
....................................................................................................................................................
Har du en designfråga till mig?
Skriv en kommentar!
Jag ska försöka svara på alla frågor du kan behöva hjälp med!
Postat av: Klara
hur gör man så att bilderna i inläggen blir större ? :)
