Mouseover-bild
23:11:14 . 2011-01-12 . Design . 6 kommentarer
Fick en fråga om jag inte kunde visa hur man gör en mouseover-bild, och visst kan jag visa det!
En mouseover-bild är för er som inte vet en bild som förändras utseendemässigt när man håller musen över den.
Exempel ↓ {En profilbild jag hade i en tidigare design}
FÖRST!
Markera och kopiera (ctrl+C) denna kod ↓ och lägg in den mellan <head> och </head> i alla kodmallar.
<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>
För att göra / lägga in bilden...
1} Skapa två bilder. Den ena som du vill ska synas när man inte håller musen över den. Den andra bilden ska se ut så som du vill ha den när man håller musen över den. För att det {i de flesta fallen} ska bli snyggare så är det viktigt att de två bilderna är lika höga och lika breda.
2} Ladda upp bilderna på blogg.se och spara URL-adresserna till dem.
3} Vi säger att vi vill ha mouseoverbilden i sidomenyn, så gå in i kodmallen och bestäm vart du vill ha bilden. Klistra sen in koden som finns nedanför ↓ dit där du ska ha bilden.
<img src="URL-adressen till bilden som visas när du ej har musen över" oversrc="URL-adressen till bilden som visas när du har musen över" border="0">
4} Som det står i koden ↑ så klistrar du sedan un URL-adresserna där de står att de ska in.
5} Spara, och det är färdigt! OBS - Glöm ej att göra samma sak i alla kodmallar!
Finns det behov av att veta hur man gör bilden till en länk {så som jag har gjort det till höger i denna design}? Tell me, så uppdaterar jag inlägget med det!
En mouseover-bild är för er som inte vet en bild som förändras utseendemässigt när man håller musen över den.
Exempel ↓ {En profilbild jag hade i en tidigare design}
FÖRST!
Markera och kopiera (ctrl+C) denna kod ↓ och lägg in den mellan <head> och </head> i alla kodmallar.
<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>
För att göra / lägga in bilden...
1} Skapa två bilder. Den ena som du vill ska synas när man inte håller musen över den. Den andra bilden ska se ut så som du vill ha den när man håller musen över den. För att det {i de flesta fallen} ska bli snyggare så är det viktigt att de två bilderna är lika höga och lika breda.
2} Ladda upp bilderna på blogg.se och spara URL-adresserna till dem.
3} Vi säger att vi vill ha mouseoverbilden i sidomenyn, så gå in i kodmallen och bestäm vart du vill ha bilden. Klistra sen in koden som finns nedanför ↓ dit där du ska ha bilden.
<img src="URL-adressen till bilden som visas när du ej har musen över" oversrc="URL-adressen till bilden som visas när du har musen över" border="0">
4} Som det står i koden ↑ så klistrar du sedan un URL-adresserna där de står att de ska in.
5} Spara, och det är färdigt! OBS - Glöm ej att göra samma sak i alla kodmallar!
Finns det behov av att veta hur man gör bilden till en länk {så som jag har gjort det till höger i denna design}? Tell me, så uppdaterar jag inlägget med det!
Kommentarer
Hanna
Skit fin blogg! :D
Tack så mycket ! :)
jättebra förklarat! men jag vill gärna veta hur man gör bilden till en länk! :)
jag försökte göra såhär till min andra blogg, men det funkar inte ....
Jag får det inte att fungera, men jag tror att jag gör fel när jag ska ladda upp bilderna, hur ska jag få fram deras url?
ååhhhhh, TACK SÅ MYCKET FÖR DEN KODEN!! Det har inte funkat för mig med koden på designadinblogg.se så taaack för den här :D
Trackback
