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

Mouseoverbild – byt bild när musen är över

I dagens film får Sanna igenom hur du kan göra en snygg mouseoverbild (byter bild när du för musen öven bilden).

Transkribering av film:

Mouseoverbild

Hej hörni.
Idag så ska jag bara snabbt visa hur man gör en mouseoverbild. Jag har ju tidigare visat hur man gör det i headern men jag tänker att det kanske kan blir, lite förvirrande med just den så därför ska jag bara visa snabbt hur man gör en vanlig mouseoverbild. Mouseover är alltså att när man drar med musen över bilden så förändras den till något annat som jag kan visa här på den här bilden som jag har gjort på Leighton Meester till exempel, som jag har retuscherat. Så när man dra med bilden, med musen över bilden så ser man retuscheringen och när man tar musen utanför så ser man originalbilden.

Då ser ni här nedanför att jag har lagt två stycken koder. Först så är det kodmallskod 1, kopiera den koden och gå in på design och ta kodmall. Den här koden, den här första kodmallskoden ska du lägga in i alla dina kodmallar. Det är bra att ha den där överhuvudtaget ifall man nu skulle få för sig att göra en mouseover för det är ganska lätt att göra det när man väl har kommit på det.

Kodmallskod 1:


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

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>

Lägg den här innan /head och om du inte hittar /head då kan du trycka på control-f och så söker du på /head och då kommer det upp vart det är. Då klistrar du in koden precis innan /head. Sen så tar du kodmallskod numer 2 och så lägger du, först så står det ju kod till bild ett och bild ett då, om vi säger, det är originalbilden om vi skulle jämföra med min Leighton bild och bild två det är den bilden som är retuscherad och tänk på att det är bra om de är samma, vad heter det, format eller så. Alltså att de är lika stora för annars så liksom blir det en mindre bild när man drar över den, med musen över.

Kodmallskod 2


<img src="bild1" oversrc="bild2">

Den här koden så som heter kodmallskod 2, den lägger du vart vill i bloggen. Du kan lägga den i headern eller du kan lägga den i din meny eller vart du vill och sen är det bara att trycka på spara kodmall och lägga in den på alla sidor du vill ha, men tänk på att du måste kodmallskod 1 på alla sidor också för det fungerar liksom inte när man drar musen över om man inte har den koden. Så enkelt är det att göra en mouseoverbild. Så får ni ha det så bra, hej hej.

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

2 comments

  1. SvaraTilde

    Jag har tre bilder i menyn som det varit mouseover på. Det har fungerat jättelänge! Men nu gör det inte det längre. Inte ens om jag följer instruktionerna ovan! Kan det vara någon annan kod som stör detta? Snälla hjälp mig!!
    Mina länkar i menyn fungerar så att det blir letter-spacing om man har musen på. Men bilderna har slutat fungera 🙁

  2. SvaraLina

    Jättebra guide, MEN jag har inte /head på mina tre andra kodmallar, bara på kodmallen till startsidan. Kan jag inte göra det då?

Lämna ett svar

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