Okej. Ska försöka mig på att förklara för er hur man gör dom! Ni måste nog förstå liiiite hur man bloggdesignar för att kunna , men inget är omöjligt!
- Det första du gör är att du fixar 2 olika bilder som ska swapas när man för musen över bilden (i mitt fall en ljus och en i originalfärg).
bild 1. bild 2.
-Sen laddar du upp dom i bildarkivet på bloggen. Om ni inte vet så gör ni >såhär< (förutom att ladda in den som header) Spara länkarna som blir nånstans för dom ska ni använda.
(såhär ska dom se ut: http://sanzil.se/dinlank.......)
Nu kommer vi till själva koderna.
Allting vi ska göra görs i KODMALLARNA.
Lägg in den här koden, typ längst ner under all annan kod:
<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>
Spara!
Nu går vi över till själva bilderna. Nu ska länk-addresserna från bilderna in. Ni ändrar såklart koden här under så att den blir rätt. Jag har skrivit förklaringarna till vad som ska in innanför " " tecknena.
Här är koden för en bild-länk:
<a href=" ADRESSEN TILL BLOGGEN/KATEGORIN "><img src=" ADRESS TILL BILDEN SOM SKA SYNAS NÄR MUSEN IIIIINTE ÄR ÖVER " oversrc=" ADRESSEN TILL BILDEN NÄR MUSEN ÄR ÖVER " border="0" padding="0"></a>
Koden för bild-länken lägger du sen där du vill ha den i din design, i KODMALLAR. Kan tyvärr inte hålla på och tala om hur ni lägger den så som jag har för då behövs flera lager och så.
Ni får helt enkelt testa er fram, men tex över <div id="header"> Eller innanför den taggen skulle kunna funka :)
För att få in det här på ALLA sidor sen måste ni ändra där uppe i höger hörnet på kodmallar, där man kan välja framsida, arkiv osv.. :)
Hoppas det var nååågon hjälp :)
Oh noes, inte använda JavaScript till såna simpla saker som bara kräver simpel HTML och CSS ;) Och sen bör man använda en stor sprite-bild (googla CSS sprite)
HTML:
<ul id="menu">
<li class="dagens-outfit"><a href="http://sanzil.se/category/dagensoutfit.html">Dagens Outfit</a></li>
<li class="make-up"><a href="http://sanzil.se/category/snowzens-make-up.html"></a>Make-Up</li>
</ul>
CSS:
#menu a {
display: block;
width: 100px;
height: 100px;
background: url('url/till/sprite.png');
}
#menu .dagens-outfit a { background-position: 0 0; }
#menu .dagens-outfit a:hover { background-position: 0 -100px; }
Osv för alla länkar. På så sätt slipper man JavaScript, det blir bättre och mer semantisk HTML-kod och sidan laddar snabbare och blir mer responsiv. :)
bra förklaring :)
Tack så mycket:D
Jag tog det bara lugnt, nöjd med din helg? :)
Kram!
Allt för den bästa ;) Allt är bara finfint, hur är det med dig? :D
ja men visst blir man! Den liksom hjälper till lite på vägen :)
Jodå med mig är det bara bra, hur är det själv? :D
6