Bloggdesign guide - Mouseover bild

Bloggdesign



Fick en förfrågan hur man lägger in en mouseoverbild i menyn. Gjorde en guide om mouseoverbilder i inlägg i min julkalender men för att det ska vara lättare att hitta skriver jag ett nytt inlägg! :)

Instruktioner:
1. För att kunna lägga in en mouseover bild i ett inlägg/menyn så måste ni först ha en JavaScript kod i kodmallen. Kopiera koden under och lägg in den i alla kodmallarna ovanför </head>


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

2. Ladda upp båda bilderna ni vill ha på Skapa -> Bild och öppna bilderna i nya flikar.


3. Nästa steg är att lägga in mouseover-koden i inlägget. Börja först med att skriva klart inlägget ni vill ha bilden i. Där ni vill ha eran bild är det en smart idè att skriva BILD eller liknande så att ni snabbt hittar stället senare. Tryck sen på "Ändra redigerare" i högra hörnet och klistra in koden här under där ni har skrivit BILD. Det som du sen behöver göra är att ta bort BILDLÄNK TILL BILD 1 och såklart sätta in bildlänken.

Mouseover bild:
<img src="BILDLÄNKEN TILL BILD 1" oversrc="BILDLÄNKEN TILL BILD 2">

Mouseover bild med länk:
<a href="LÄNK TILL SIDAN"><img src="BILDLÄNKEN TILL BILD 1" oversrc="BILDLÄNKEN TILL BILD 2" border="0"></a>



För att lägga in bilden i menyn:
1. Följ steg 1-2 där uppe, de vill säga lägg in JavaScript koden i alla kodmallarna ovanför </head> och ladda upp bilderna.

2. Sen ska ni lägga in mouseoverkoden där ni vill ha bilden under <div id="side">. Byt BILDLÄNKEN TILL BILD 1, BILDLÄNKEN TILL BILD 2 och LÄNK TILL SIDAN till det som ska vara där. Tryck på spara stilmall! Klart!


Funkar det det inte eller är det något ni inte förstår, säg till så ska jag försöka hjälpa er! :)




jennie

sv: javisst eller hur :D allt bra?



julia

härligt :D jo det är bra :)



Ida

Åh vad bra! Behövde verkligen den här tutorialen. Försökte en gång för massa år sedan men gav upp och har inte orkat söka upp det och testa igen efter det xD



Emma

okej :) var lite tips jag kanske ska kolla upp då



Johanna ♡

tack så mycket! Jag ska testa senare :)



Emilia Bokelund

MIN FUNKADE INTE !!! :'(
lust att hjälpa mig? :D
för att komma in å bin blogg, som är lösenordsskyyddad pga designpix.
användarnamn : emiliab
lösen : yolo



Isabell

det funkar inte för mig :/
" oversrc="
" border="0">

dessa koder kommer emellan mina två bilder (som båda dyker upp samtidigt på bloggen).
Om du vet hur jag kan göra för att få det funka så skulle det va jättesnällt om du svarade! :)


Anonym

Hur får du länkarna till instagram, twitter, tumblr och bloglovin under din profil? tacksma för svar :)

Svar: Jag har lagt till en vanlig "text som länk"-kod precis under min profilbild bara. Är lite svårt att förklara utan någon bild!
Fanny Edfast



Jenny

Finns inte ens någon i min kodmall...

Svar: Vad finns inte i din kodmall? :)
Fanny Edfast



Hejsan!

Det gick inte att göra en mouseover på min (jag vill ha med länk också)... Det bästa jag lyckades åstadkomma med koderna vad bara att det blev en länk till hemsidan, men det blev ingen mouseover. Tips på hur jag kan göra?



Jennifer

Hej detta fungerar för mig men mitt problem är att jag i normala fall har mina bilder så att dem går precis ut till kanten men när jag gör detta i inlägget så flyttas den åt sidan och går inte ända ut till kanten. Vet du vart jag skulle kunna fixa detta eller hur? :)



KORT INFORMATION:
Design och foto:
» Jag har gjort min design själv
» Jag redigerar mina bilder i Camera raw och Photoshop CS6
» Läs om min kamerautrustning HÄR


Övrigt:
» Du kan alltid mejla mig om det är något, svarar så fort jag kan! -> fannyfredrica.blogg@hotmail.com
» Snälla, läs inlägget innan du frågar vad jag har gjort idag osv.
» Kommentera snällt! Både mot mig och andra som har kommenterat!


Kommentera inlägget här:

Namn:


E-postadress: (syns ej)


URL/Bloggadress:


Kommentar:


RSS 2.0