Pretty baby spin-doktorer http://1apotekonline.com/cialis/ sterling sølv pille kasse
Byt bild vid mouseover

Byt bild vid mouseover

Dags för ett väldigt efterlängtat inlägg. Nämligen hur man gör för att få en bild att bytas ut när man håller muspekaren över.
Jag har letat fram ett sätt som jag tyckte var otroligt lätt och smidigt, som jag tror kommer att funka bra för er med.

Testa här:

Gör så här:

1. Börja med att skapa de olika bilder du skall använda dig av. Du måste ha en bild som visas först, och sen en bild som skall visas när man håller musen över den första bilden.

2. Ladda upp bilderna på din blogg, och kopiera adressen till varje bild, och spara det i ett dokument nånstans. (hur man laddar upp bild finns under relaterade länkar i början av inlägget)

3. Kopiera koden i rutan nedanför och klistra in den i din kodmall precis innan </head>

&amp;amp;amp;amp;lt;script LANGUAGE=&amp;amp;amp;amp;quot;JavaScript&amp;amp;amp;amp;quot;&amp;amp;amp;amp;gt;
&amp;amp;amp;amp;lt;!--
// 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:
// &amp;amp;amp;amp;lt;img src=&amp;amp;amp;amp;quot;/images/ss_img.gif&amp;amp;amp;amp;quot; oversrc=&amp;amp;amp;amp;quot;/images/ss_img_over.gif&amp;amp;amp;amp;quot;&amp;amp;amp;amp;gt;
//
// 
//

function SimpleSwap(el,which){
el.src=el.getAttribute(which || &amp;amp;amp;amp;quot;origsrc&amp;amp;amp;amp;quot;);
}

function SimpleSwapSetup(){
var x = document.getElementsByTagName(&amp;amp;amp;amp;quot;img&amp;amp;amp;amp;quot;);
for (var i=0;i&amp;amp;amp;amp;amp;lt;x.length;i++){
var oversrc = x[i].getAttribute(&amp;amp;amp;amp;quot;oversrc&amp;amp;amp;amp;quot;);
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(&amp;amp;amp;amp;quot;SimpleSwap(this,'oversrc');&amp;amp;amp;amp;quot;);
x[i].onmouseout = new Function(&amp;amp;amp;amp;quot;SimpleSwap(this);&amp;amp;amp;amp;quot;);
// save original src
x[i].setAttribute(&amp;amp;amp;amp;quot;origsrc&amp;amp;amp;amp;quot;,x[i].src);
}
}

var PreSimpleSwapOnload =(window.onload)? window.onload : function(){};
window.onload = function(){PreSimpleSwapOnload(); SimpleSwapSetup();}
//--&amp;amp;amp;amp;gt;
&amp;amp;amp;amp;lt;/script&amp;amp;amp;amp;gt;

4. Nu ska du lägga in koden för bilderna i din kodmall, och jag visar hur du gör för att lägga in det i din meny.
Leta upp kodavsnittet i kodmallen som heter <div id=”side”> och klistra in följande kod nedanför den raden.

&amp;amp;amp;amp;lt;a href=&amp;amp;amp;amp;quot;länkadressen&amp;amp;amp;amp;quot;&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;img src=&amp;amp;amp;amp;quot;adressen till bild 1&amp;amp;amp;amp;quot; oversrc=&amp;amp;amp;amp;quot;adressen till bild 2&amp;amp;amp;amp;quot; border=&amp;amp;amp;amp;quot;0&amp;amp;amp;amp;quot;&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;gt;

Där jag har skrivit länkadressen anger du adressen till den sida som du vill att man kommer till om man klickar på din bild, och där jag har skrivit adressen till bild 1 och bild 2 anger du adressen till bilderna som du laddade upp innan på din blogg, dvs de bilderna som det skall ändras mellan när man håller muspekaren över.

Om du vill ha flera bilder som ändrar sig, så är det bara att upprepa punkt 4. Men givetvis så måste du ladda upp bilderna för det innan på din blogg med.

Jag hoppas att detta inlägget är någorlunda lätt att förstå, och att ni lyckas.

Skribent och ansvarig för DDB. Driver Designa din blogg sedan juni 2015. Har bland annat studerat webbdesign, marknadsföring och online strategier både i Sverige och USA. Jobbar inom IT.

Läs mina andra inlägg

Lämna ett svar

Din e-postadress kommer inte publiceras.