Beskrivning - Gör en bildlänk!

Nu ska jag lära ut något många frågat efter.

" Hur gör man en bildlänk, tex som " Om Mig" som du har i headern? (Hade)

Jag ska visa hur man gör en bildlänk som byter färg när man klickar på den.
Först väljer du ut den bild/text du ska ha som länk.
Du väljer själv storlek på dina.

Här är mina två:




Om du vill att din bild byter färg ska du alltså göra 2 likadana, fast i olika fäger!
Du laddar upp dina bilder som vanligt. Kopiera sedan bildadressen.
Ladda upp bild > tryck på bilden > kopiera koden i adressfönstret.



Gör likadant med alla bildadresser och spara dem exempelvis i anteckningar så länge.
Nu till koden. Den ska klistras in i kodmallar på ALLA sidor, på samma plats!
Det jag markerat med svart är där du ska ändra till dina adresser.

Först den viktigaste koden. Det är den här som gör att bildlänkarna ska fungera.
Den ska du klistra in i dina kodmallar och precis innan </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>

Nu till bildlänkarna:

Förklaring:
Första adressen är vad som ska öppnas i content ( inläggsidan )
Andra adressen är den bild man ser först i din header
Tredje adressen är den bild som kommer upp när man klickar på den första.

<a href="http://egosidan.blogg.se/2009/march/min-presentation.html">
<img src="https://cdn1.cdnme.se/cdn/9-2/949179/images/2009/b4_37573414.jpg"
oversrc="https://cdn3.cdnme.se/cdn/9-2/949179/images/2009/a1_37573447.jpg" border="0"></a>

Du gör likadant för alla bildlänkar och om de inte ska ligga tätt inpå varandra använder
du &nbsp; (mellansteg ) och <br> ( byta rad )  tills du är nöjd med avståndet.
För att flytta bilderna åt ett visst håll kan du använda dig av punkter.
<font color="#ffffff">.....</font>  ( välj färg för den bakgrund du har )
Koden ska klistras in under  <div id="header"> i kodmallen!


Så här ser det tex ut för mig:


<div id="header">

<font color="#ffffff">.....</font><a href="http://egosidan.blogg.se/2009/march/min-presentation.html"><img src="
https://cdn3.cdnme.se/cdn/9-2/949179/images/2009/b4_37573414.jpg" oversrc="https://cdn2.cdnme.se/cdn/9-2/949179/images/2009/a1_37573447.jpg" border="0"></a>
#1 - Linna

Bra tips =)

#2 - Julia

Superbra tips, men hur får man en egensida till att göra sånnt? Asså så man inte skriver ett blogginlägg? Om du fattar? ^^

#3 - EBBA [fotoblogg]

ååh, tack så mycket :) vad bra! ska försöka med det nu :) <3

#4 - Kajsa

Jag förstår inte.. :/

#5 - Kajsa

SV: Tack :)



Jo, jag kan få upp bilderna till headern, men jag förstår inte hur man ska kunna flytta dem precis så som man vill ha dem.. :/

#6 - Kajsa

SV: Jag TRODDE jag kunde få upp bilden till headern, tydligen inte.. jag gör som du skriver, men bilden visas bara inte i headern! Har du någon aning om vad jag kan göra för fel? :S

#7 - Kajsa

SV: Ja.. :/

#8 - josefine

super tack till dig !

#9 - E

Hej Diva x'd

Har du lust att göra bildlänk till mej ?



Pusss :)

#10 - C H R I S T I N - Foto. Illustration. Webbdesign

Hej där! Jag försöker just nu skriva en sån här guide om mouseover bilder. Men hur gör du för att din bidlkod inte ska bli bilden? Förstår du hur jag menaR?



Alltså, detta:

<img src="http://egosidan.blogg.se/images/2009/b4_37573414.jpg"

oversrc="http://egosidan.blogg.se/images/2009/a1_37573447.jpg" border="0"></a>



Klistrar jag in det i ett blogginlägg så blir det ju till en bild, hur har du gjort så det inte är så? :)



Kram

#11 - Maria

Hur får jag bort ramen runt bilden?

Kolla min blogg: http://klaraamariia.blogg.se

#12 - Cecilia

Jättebra! :D

Men hur får jag så att bilden leder till en annan sida när man klickar på den? :)

#13 - m - kungen i pungen

kan man inte flytta den "neråt" istället för bara sidledes? skittacksam för svar : ) !

#14 - m - kungen i pungen

kan man inte flytta den "neråt" istället för bara sidledes? skittacksam för svar : ) !

#15 - Bella

funkar perfekt men bara en sak hur får man den typ imitten utan att det syns text punkter eller ngt annat över headern :P??

du kan väl mejla eller komentera :)

#16 - bella

kan man inte flytta den utan att det blir massa punkter på bilderna i headern ??