Det var så länge sen jag gjorde ett bloggdesigntips och nu har jag precis bytt design så jag tänkte att det passade med ett nu. den här gången tänkte jag visa hur man gör så att bilden ändras när man drar musen över den, som jag har på knapparna/ikonerna i min meny. :)
så man börjar att göra två bilder i t.ex gimp eller photoshop som jag har gjort, en som man har hela tiden och en som den ska se ut när man tar musen över. mina ser ut såhär
jag ändrade bara lite med streck runtom :)
sen går man in på kodmallen och väljer själv vart man vill ha bilden/ikonen, kanske i menyn eller headern. där lägger man in den här koden och skriver in länken och bildadresserna:
<a href="Adressen dit ikonen ska länka"><img src="Bildkoden till första bilden" oversrc="bildkoden till andra bilden, när musen är över"></a>
om man vill att det ska synas överallt lägger man in koden i alla kodmallar.
Efter det lägger man in en till kod över </head> i alla kodmallar som ser ut såhär:
<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>
Sen är det klart! glöm inte att spara. om ni förresten vill ha något mer bloggdesigntips så är det bara att kommentera! :)