kajsaoelsa -

Klickbara bilder i bloggen

Sry för att jag inte har bloggat så mycket :/ men jag tittade på alice cooper i måndags ;) sedan sov jag över hos nattis ♥

Men jag fick en fråga om hur man gör klickbara bilder i headern, eller vart man nu vill ha dom.

Och jag tänkte vara snäll och berätta hur man gör :)

1. Gå in på Kodmallar, sök sedan upp: </head> inte första som kommer utan andra.

Lägg då upp denna koden Innan </head> ↓ (detta är det steget som många ofta glömmer bort)

<mce: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" mce_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();} // --></mce:script>

2. Ladda upp bilderna du vill ha, Följande: Bild1 och Bild2 som bläddras. (laddas upp i Skapa, bild)

3. Nu ska du tillbaks till Kodmallar och söka upp: <div id="wrapper"> och lägga in koden nedan↓ UNDER det.

<div style="position:absolute; width:100px; x-index:0; left: 100px; top:80px;"> <a href="Adress till inlägget eller bloggen" mce_href="/2324065/entries/article/new/Adress till inlägget eller bloggen"> <img src="Bild1" mce_src="/2324065/entries/article/new/Bild1" oversrc="Bild2" border="0"></a></div>

4. Nu ska du lägga in bilderna och adressen i koden (på steg 3). Och här är vad allt betyder.

<div style="position:absolute; width:100px; x-index:0;
left: 100px; (Om du tar högre px så blir det mer åt vänster osv.)
top:80px; (det blir högre upp desto högre px du tar osv.)

"><a href="Adress till inlägget eller bloggen här emellan">

<img src="Bild1" oversrc="Bild2" border="0"></a></div>

Hoppas någon fattade ;) Om ni har några mer frågor är det bara att fråga !

Kram Elsa

2011-07-06 @ 04:40:30 Elsas vardag Permalink

Kommentarer

Trackback