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;lt;script LANGUAGE=&amp;quot;JavaScript&amp;quot;&amp;gt;
&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;lt;img src=&amp;quot;/images/ss_img.gif&amp;quot; oversrc=&amp;quot;/images/ss_img_over.gif&amp;quot;&amp;gt;
//
// http://jehiah.com/archive/simple-swap
//
function SimpleSwap(el,which){
el.src=el.getAttribute(which || &amp;quot;origsrc&amp;quot;);
}
function SimpleSwapSetup(){
var x = document.getElementsByTagName(&amp;quot;img&amp;quot;);
for (var i=0;i&amp;amp;lt;x.length;i++){
var oversrc = x[i].getAttribute(&amp;quot;oversrc&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;quot;SimpleSwap(this,'oversrc');&amp;quot;);
x[i].onmouseout = new Function(&amp;quot;SimpleSwap(this);&amp;quot;);
// save original src
x[i].setAttribute(&amp;quot;origsrc&amp;quot;,x[i].src);
}
}
var PreSimpleSwapOnload =(window.onload)? window.onload : function(){};
window.onload = function(){PreSimpleSwapOnload(); SimpleSwapSetup();}
//--&amp;gt;
&amp;lt;/script&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;lt;a href=&amp;quot;länkadressen&amp;quot;&amp;gt;&amp;lt;img src=&amp;quot;adressen till bild 1&amp;quot; oversrc=&amp;quot;adressen till bild 2&amp;quot; border=&amp;quot;0&amp;quot;&amp;gt;&amp;lt;/a&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.







Grundare av Designa Din Blogg. Drev den här sidan som ett hobbyprojekt under åtta år, numera har jag lämnat över ansvaret för DDB. Är pappa till Ludvig och make till Elin.

Läs mina andra inlägg

59 kommentarer

      1. VICTORIAFOTO

        Det är antaglien ni som inte förstår. Det funkar helt för mig, föresten så är det bara en person som driver designadinblogg.

      2. Vilma

        Håller helt med victoria. det är ni som inte fattar, det är inget fel på designadinblogg.se

  1. SvaraAmanda

    Hej du, funkar jättebra med mousecover, jag fick in den i menyn längst upp, men jag undrar om man kan få in den längre ner i menyn och inte längst upp?

    Jättebra din blogg är förresten, från den här sidan har jag lärt mig göra min egna design. Tack för din hjälp! 🙂

    1. SvaraLina

      Om du lägger koden som ska vara i kodmallen längre ner i kodmallen så borde det funka. Men se till att du fortfarande är inom menyn.. Alltså om du vill ha den längst ner i menyn så lägger du den precis över . 🙂 Eller, tja, den hamnar inte längst längst ner, utan under all annan info i menyn. Hoppas du förstår, annars kan du höra av dig på bloggen. 😀
      Kram!

  2. SvaraLEINA

    Lari! Det måste vara något fel i texten som ska klistras in framför Head-taggen. När jag klistrar in den blir hela bloggen messed up. Content tar upp hela sidan, och menyn flyttas ner… Varför? Och vad kan jag göra åt detta?

  3. SvaraVeronica

    Går detta att göra som header, så att bilden byts? (Jag vet att du kanske inte har tid för att svara på denna kommentar eller så, men jag ber dig verkligen, du kan väl bara svara ja/nej, så blir jag glad, i min blogg eller här) tack på förhand!

  4. SvaraThea

    andra bilden kommer inte fram för mej heller, snälla kan du förklara varför för det ser verkligen ut som att allt stämmer! 🙁

  5. Svarajennie

    Det funkar inte alls bra.. Hela headern försvann, eller går inte denna att använda som header? TACKSAM för svar! : )

  6. SvaraMatilda

    Min header och meny hamnade under inläggen.. Länken fungerade, men inte mouseovern.. Vad gör jag för fel? Vore väldigt tacksam för svar!

  7. SvaraElkah

    Ville bara säga till dig att det är nåt fel med ALLA koder för det står i slutet på allt och det ska inte göra det så om koden ska fungera måste man plocka bort ALLA de där! Det är för att du bytte webbhotell elle vad du nu gjorde förut 🙁

  8. SvaraNathalie

    tyvär funkar ju inte detta. min blogg blir helt förstörd när jag lägger in det som ska vara framför head. vad är fel?

  9. SvaraJulia

    hej.
    förut har jag använt din kod men då såg den annorlunda ut tror jag för den funkar men inte den nya. den gamla jag har är:

    <!–// 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:// //// 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

    tänkte bara upplysa dig om det 🙂 hejdå 😀
    ps. SUPERBRA BLOGG!

  10. SvaraFrida

    Det här funkar inte för mig heller, jag har provat allt möjligt känns det som, börjar kännas lite omöjligt 🙁 Skulle vara tacksam för hjälp!

  11. SvaraSiri

    Jag förstår inte heller någonting! Jag har sökt jättemycket på google frågat på olika forum och testat detta noga och på olika sätt med .gif + .jpg inget funkar eller allt funkar förutom att den inte byter bild! Har testat med olika bilder och inget funkar *buhu* heelp mee jag har försökt alllllt /DESPERAT!

  12. SvaraSandy

    Jag vet inte om kommentarer till gamla inlägg läses, men jag önskar en hjälp till att vid mouseover på miniatyrbilder så ska den stora bilden komma fram, alltså utan att man ska behöva klicka fram den stora bilden. Vet inte om det går, men allting tycks vara möjligt. 🙂

  13. SvaraElle

    Vore jätte tacksam ifall du ville förklara hur jag får min mouseover-header att synas även om man klickar in på permalinken???

  14. SvaraJossan - kristens.blogg.se

    Tänkte säga till alla som säger att bloggen ser helt konstig ut när ni lägger in den första koden. Det är för att nu måste ta bort alla radbrytningar () och dessa: ( ). Har blivit helt konstigt i alla koder sen han flyttade över bloggen till wordpress.

  15. SvaraSara

    Kan du kolla över den här koden, för jag har gjort allting rätt, så det måste vara nåt fel med den första koden!

  16. Svaraninni

    jag förstår inte vad jag gör för fel? gör precis så som du har skrivit, men det funkar ändå så inte. eller det funkar, förutom att den inte byter bild vid mouseover.. hjälp tack 🙂

  17. Svaraninni

    jag förstår inte vad jag gör för fel? gör precis så som du har skrivit, men det funkar ändå så inte. eller det funkar, förutom att den inte byter bild vid mouseover.. hjälp tack (:

  18. SvaraVIVIENNE

    Den där jättelånga java-koden är fel kodad. Jag kan den riktiga men den är för lång för att få plats i en kommentar här. Har bilder med mouseover i min blogg just nu. Kan maila över den rätta java-koden till den som vill ha den, i utbyte mot en länk eller nått för besväret ;D
    vivienne.blogg@gmail.com

  19. SvaraJoanna

    Blir helt galen! efter du bytte från blogg.se så funkar inte koderna! Dom blir helt galna och konstiga i min data..

    Kan du kanske fixa det? Tack 🙂
    Annars är bloggen grym.

  20. SvaraAmanda

    Till er som inte får det att fungera – kommer ni ihåg att klistra in det i ALLA kodmallarna? Det missade jag först men efter att jag klistrat in den första koden i ALLA så funkade det perfekt 🙂

    1. SvaraSimon Borin

      Tusen tack! Var nära på att ge upp men nu fick jag det att fungera! Som sagt måste man klistra in alla koderna i ALLA kodmallar, annars fungerar det inte. 🙂

      Är supernöjd!

  21. Svarakimmie

    ingenting funkar allt blir bara dåligt o då måste man återställa allt och göra om de som man gjort innan.
    var ska man ladda upp bilderna, bara ladda upp dom eller i ett inlägg?.. kanske bara är jag som är seg, men jag förstår ingenting!

  22. SvaraHanna
    &lt;script LANGUAGE=&quot;JavaScript&quot;&gt;
    &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:
    // &lt;img src=&quot;/images/ss_img.gif&quot; oversrc=&quot;/images/ss_img_over.gif&quot;&gt;
    //
    // http://jehiah.com/archive/simple-swap
    //
    function SimpleSwap(el,which){
    el.src=el.getAttribute(which || &quot;origsrc&quot;);
    }
    function SimpleSwapSetup(){
    var x = document.getElementsByTagName(&quot;img&quot;);
    for (var i=0;i&lt;x.length;i++){
    var oversrc = x[i].getAttribute(&quot;oversrc&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(&quot;SimpleSwap(this,'oversrc');&quot;);
    x[i].onmouseout = new Function(&quot;SimpleSwap(this);&quot;);
    // save original src
    x[i].setAttribute(&quot;origsrc&quot;,x[i].src);
    }
    }
    var PreSimpleSwapOnload =(window.onload)? window.onload : function(){};
    window.onload = function(){PreSimpleSwapOnload(); SimpleSwapSetup();}
    //--&gt;
    &lt;/script&gt;
    

    Den här koden använder jag, den funkar bra!

    1. SvaraHanna

      Jag vet förresten inte om det är samma, så det kanske inte funkar att kopiera härifrån heller då… men som sagt, det är något skumt sen han bytte från blogg.se…

  23. SvaraJonna - foto,stil & vardag }

    Jag vill ha en mouseover bild i ett linlägg vad lägger jag koden då? 🙂

  24. SvaraIda

    Nu när jag lägger in bilden kommer den till menyn, hur gör jag om jag vill få den till headern ? Hjälp snälla ? 😀

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *

OBS! Om du skall skriva kod måste du göra på följande sätt: [code]Din kod här[/code]

Genom att använda DDB, godkänner du användning av cookies. mer info

Denna sajten använder cookies för bästa användarupplevelsen. Genom att använda sajten accepterar du att cookies används.

OK