Månadsarkiv: mars 2009

Innan vi börjar: OBS!! 1, Hjälpbilder till detta inlägg är till för blogg.se/webblogg.se. 2, Tänk på att du bör ha en header som liknar denna: [ länk ] d v s att header-bilden har ett marginal där uppe. För att göra en enklare förklaring:

1. Börja med att göra flikarna i det bildredigeringsprogram (t ex photoshop). Ett tips är att göra dessa transparenta d v s spara i t ex .png.  Jag brukar göra marginalen, som ska vara mellan bilderna, i bilden så att jag slipper positionera de sedan. D.v.s. själva fliken är ca 115 px och sedan är det genomskinligt ca 18 px. Då slipper man alltså göra mellanrum mellan flikarna. På bilderna nedan är det marginal till höger. Om du vill ha något att utgå ifrån kan du låna dessa (http://tescho.se/flik1.png & http://tescho.se/flik2.png):

Dessa ser bäst ut med en annan färg på bakgrunden, dvs ej vit. Om du vill se dem ”live” kan du kika här: [ länk ] Den designen går även att vinna just nu.
Slutresultat (utan text på flikarna) på en flik kan se ut såhär (håll musen över fliken):

2. Ladda sedan upp bilderna på de flikar du vill använda, på t ex din blogg/webbhotellskonto. Bildadressen till bilderna kan du låta ligga i ett simpelt textdokument så länge för vi återkommer till dem snart.

Om du inte vet vad bildadress är eller vet ej hur man laddar upp bilder har jag skrivit en guide om det här.

3. Nu ska det börja kodas. Klistra in koden nedan innan </head> i varje kodmall (bild under koden visar vart).

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

Detta ska du göra i alla kodmallar, d v s:

Så här kommer en liten del av koden se ut när den ligger ovan </head>:

4. Nu ska vi lägga till en annan kod i stilmallen. Jag brukar kalla den för ”#meny”. Klistra in koderna nedan lägst ner i stilmallen.

#meny {
width: 950px;
border: 0px solid;
padding-left: 220px;
margin-top: 0px;
padding-top: 39px;
}

#meny {
width: 950px; <– Här skriver du i hur bred ”#header” är.
border: 0px solid; <– Den behöver du inte redigera. Man vill inte ha en ram runt fliken va?
padding-left: 220px; <– Hur långt avstånd det ska vara från vänster.
margin-top: 0px; <– Lämna detta fält såhär.
padding-top: 39px; <– Hur långt avstånd det ska vara från toppen.
}

5. Kopiera sedan denna kod nedan och byt ut ”länkadressen” mot den länk du vill att man ska komma till när man klickar på fliken samt ”adressen till bild 1″ & ”adressen till bild 2″.

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

6. Nu ska vi klistra in koder mellan <header> </header> (i kodmallarna). Om jag skulle använda mig utav de flikarna som jag visat ovan i detta inlägg skulle det kunna se ut såhär (kopiera inte detta utan det i boxen ovan):

<header>
<div id=”meny”>
<a onfocus=”blur()” href=”http://tescho.se/designtips-flikar-i-headerndesigntips-flikar-i-headern/”><img src=”http://tescho.se/flik1.png” oversrc=”http://tescho.se/flik2.png” border=”0″></a>
</div>
</header>

Glöm ej att göra detta i alla kodmallar! D.v.s. klistra in koderna mellan <header> </header> i framsida, inläggssida, kategorisida & arkivsida.