Hur gör man mouseovers?

Vill du lära dig att bygga webbplatser och bloggar via webben? Jag utbildar dig!

Designfunktioner
Pris: 379kr
Gå till kursen »

WordpressSkolan
Pris: 479kr
Gå till kursen »

Testa WordPress
Pris: 149kr
Gå till kursen »

Jun 08

Då har vi en fundering som ska redas ut, nämlingen hur man får en bild att ändras när man håller musen över den.

1. Gör två olika bilder och ladda upp dem. Spara länk-adresserna.
Mina länkar är:
Bild nr 1 – http://tescho.se/wp-content/uploads/2009/06/mouseover01.jpg
Bild nr 2 – http://tescho.se/wp-content/uploads/2009/06/mouseover02.jpg

2. Kopiera denna kod och sätt ovan </head> i alla kodmallar.

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

3. Nu ska du använda adressen till bilderna:

<a onfocus="blur()" href="länkadressen"><img src="adressen till bild 1" oversrc="adressen till bild 2" border="0"/></a>

Slutresultat:

OBS! Om du inte vill att bilden ska länka till något tar du bort ”<a onfocus=”blur()” href=”länkadressen som man kommer till när man klickar på bilden”></a>” dvs har bara kvar ”<img src=”adressen till bild 1″ oversrc=”adressen till bild 2″ border=”0″>”. Se nedan:

OM DU BARA VILL HA SKIFTANDE BILDER (inte klickbara):

<img src="adressen till bild 1" oversrc="adressen till bild 2" border="0">

Vill du ha hjälp med att positionera bilden (bildern) lämna då en kommentar eller kontakta mig. Lycka till!

1 person gillar artikeln

Studenter överallt Pressen stiger

47 svar till Hur gör man mouseovers?

kalm 09/06/09

jag har gjort det du skrev men det blev bara så här http://hejjagheterkalm.blogg.se/test

gjorde jag fel?

[Svara]
Elin svarar:
08 / 06 - 09 » 11:32:31
hejsan jag undrar en sak. jag vet intehur jag ska göra för att få bort det dära mouseovers. jag vill inte ha dom där. Sen undrar jag hur jag redigerar mina egne bilders storlek så att de får plats i headern?

tacksam för snabbt svar! maila gärna. ps mycket bra blogg :)

[Svara]
Amanda 07/07/09

Vart ska man klistra in 3. ?

:)

Svar från Tescho: Där du vill att mouseover-bilden ska vara!

[Svara]
Stina 08/08/09

Hej! Jag ska använda din chihuahua-design, och jag förstår inte hur jag ska göra? Alltså, det är ju tre bilder där, jag förstår verkligen inte. Och vill så gärna ha den, den är så fin. Jag arbetar på den på min testblogg: vargflickah.blogg.se/testblogg. Tacksam för svar!

[Svara]
Mikaela Nordgaard 19/08/09

Hello! Mycket söt design, men jag lyckas inte ändra exempelbilderna. Vore snällt om du ville hjälpa mig :)

kramis
/Micks

[Svara]
Mikaela Nordgaard 20/08/09

Jo, det är ju design nr 4 jag försöker fixa med. Och har gjort egna bilder, kopierat in texten du lagt upp på denna sidan och lagt in länkarna till mina bilder. Men hundarna envisas med att vara kvar.

Jag har designen på denna adressen: http://micksnordgaard.blogg.se/test

[Svara]
Tami 24/08/09

hejsan! jag har tagit en av dina fina designer, men ville bara fråga hur man ändrar header-bilderna. jag har läst instrukitonerna och allt du har skrivit här ovan men jag förstår fortfarande inte. jag är ny på blogg.se och kan inget om koder oså! hoppas du kan hjälpa mig.
kram, tami.

[Svara]
RPATTZ - ONE OF A KIND 30/08/09

hej! Jag behöver hjälp, jag vet inte hur mangör? Jag har testat så många gånger med det funkar aldrig? Snälla hjälp!

[Svara]
RPATTZ - ONE OF A KIND 30/08/09

neej det behövs inte =)

[Svara]
jenna 16/09/09

min blev så här, nu ska jag fixa lit emer :P

[Svara]
frida 05/10/09

Hej!
Jättesnällt av dig att ge ut gratis designmallar och att du förklarar hur man gör.
Tyvärr lyckas jag inte få det som det ska.. Startsidan ser helt bajs ut! Förstår inte hur jag får in bilder på headern..
Om man klickar på ett inlägg eller arkiv så har jag iaf lyckats få upp en bild, (samma 3 ggr, men det vet jag hur man ändrar sen).. men vet inte hur jag gör de större?
och min profilbild på startsidan är jättestor, vet inte heller hur jag ändrar den :(
Kan du hjälpa mig?

Svar från Tescho: Bilden till headern redigerar du i stilmallen under #header > background. Det du ska vara noga med när du laddar upp bilder är att du väljer ”bredd” som finns lite längre ner på sidan (ovanför ”Ladda upp bild”) så att t ex headern inte blir endast 400 px bred när den egentligen ska vara t ex 800px. Bilden ska helst beskäras i rätt storlek innan man lägger upp den.

I ditt fall ska man redigera header-bilderna i kodmallarna då du har chansen till att ha mouseovers.

Men man kan även lägga till bredd i efterhand och den koden är: ”width=”" eller width:;”. Om man ska ändra bredden på profilbilden i kodmallarna ska man lägga in ” width=”antalpx” ” & i stilmallen använder du andra koden. En bildkod med breddstorlek ser ut så här i kodmallen :)

[Svara]
Elina 28/10/09

Hejsan!
Jag satte in allt och gjorde så, men det funkar inte och så kommer det upp en ruta som det står stuck overflow at line: 390

Vad betyder det och vad gör jag för fel?

Svar från Tescho: Om du gör allting rätt så ska det inte finnas några såna problem i kodmallarna. Är det scriptet du har problem med att sätta in? Se isf till att det ligger på rätt ställe.

[Svara]
Angelica 29/10/09

Jag skulle vilja ha hjälp med att positionera bilderna, skulle du kunna förklara? :)

[Svara]
Trackback: Tescho » I ord & bilder » Fråga: Redigera mouseover-bilderna i headern (design 4)
[...] en kategori x 3. För att läsa ett inlägg som bara innehåller info ang mouseover-bilder > klicka h... tescho.se/fraga-redigera-mouseover-bilderna-i-headern-design-4
Caisa 22/11/09

Hejsan!
Snälla hjälp mig :(
försöker få in en egen bild på min..tror de var header 4 med hunden!
fattar inte hur jag ska göra :/
Har bilden på min blogg om du kunde logga in och hjälpa?
MVH
http://caisaandersson.blogg.se/
http://caisaandersson.blogg.se/

[Svara]
vera. 13/12/09

hejhej!
tack för tipsen.
men jag vet inte vad jag gör för fel.
vill ha de så i headern så att man kan klicka på en av bilderna för att komma till t.e.x foton & så.
har försökt jätte länge. :/
kram

[Svara]
Helena 07/05/10

Jag undra hur man gör för att mouseover bilder, vart lägger man först upp dom?
MVH!

Svar från Tescho: Man publicerar dem på sin blogg. Läs mer om hur man laddar upp bilder här: http://tescho.se/webdesign/fragor/

[Svara]
denise 16/07/10

jag får bara vanliga kantiga bilder när jag klistrar in mina bilder i design 4. hur ska jag göra?

[Svara]
Tescho svarar:
08 / 06 - 09 » 11:32:31
Man får redigera dem i t ex photoshop om man vill ha diverse effekter. Det finns guider om hur man kan göra :)

[Svara]
Elin 22/07/10

hejsan jag undrar en sak. jag vet intehur jag ska göra för att få bort det dära mouseovers. jag vill inte ha dom där. Sen undrar jag hur jag redigerar mina egne bilders storlek så att de får plats i headern?

tacksam för snabbt svar! maila gärna. ps mycket bra blogg

[Svara]
Lina 31/07/10

Hej! jAg är nu mitt uppe i mitt blogg-bggande. Jag har lyckats fixa in mouseover som funkar och så. Men undrar nu hur jag gör för att flytta hela bilden till ett annat ställe? :)
Tack för en jättebrasida!!

[Svara]
Lina 01/08/10

Jag har en till fråga! På min header vill jag ha en text där det står ” tillbaka till startsidan” eller liknande. Jag är riktigt dålig på att förklara, men jag vill att den här texten ” tillbaka till startsidan” endast ska synas när man rör musen över den. Hur får jag till det? Om det är till någon hjälp kanske du kan gå in på nevnarien.se och se på hennes header så kanske du förstår bättre va jag menar :)
Tack på förhand!

[Svara]
louise 25/08/10

Hej,

Har använt din fina stilmall nu, men vilken länk menar du att jag ska ha på min blogg? Och ska jag lägga upp den som en länk menar du?

[Svara]
Tescho svarar:
08 / 06 - 09 » 11:32:31
Länken följer med om du har lagt in designen rätt. Spana in mina guider om du är osäker på hur man lägger in en design. Glöm inte att uppdatera din webbläsare när du har gjort ändringar.

[Svara]
moa freakin' carlberg ♥ 27/09/10

ÅH, jag vet inte hur jag ska tacka dig nog! Har varit inne på över 50 olika sidor för att få detta rätt, och en kommer jag in hit – och det fungerar direkt! ÅH!

[Svara]
Tescho svarar:
08 / 06 - 09 » 11:32:31
Vad roligt att höra :)

[Svara]
Felizia 29/09/10

Hej Tescho!
Jo jag undrar om det är möjligt att ha en mouseover i ett blogginlägg? Till exempel om man hoverar över en bild som man kan klicka på för att se i större format, och den då även är en mouseover.

tacksam för svar!
Felizia

[Svara]
Tescho svarar:
08 / 06 - 09 » 11:32:31
Yes, det går :) Tänk bara på att du måste sätta in ett script (det ovanför </head> ) i varje kodmall (framsida, inläggssida, kategorisida & arkivsida). När du ska posta inlägget är det viktigt att du skriver i html-läge (du ska även posta inlägget i html-läge dvs skifta inte). När man skriver i html-läge måste man lägga in sina egna radbrytningar och då kan du använda <br>

[Svara]
Cecilia 02/11/10

Hej!

Jag har försökt att få in bilderna men det går verkligen inte :/ blir så besviken, har suttit i timmar då jag tycker sånt här är så otroligt svårt och då din fina design verkligen passar mig och min blogg.

Hittade dig via en kompis blogg, hon hade lånat en design av dig också.

Skulle verkligen vara tacksam om du kunde hjälpa mig.

Kram

[Svara]
Tescho svarar:
08 / 06 - 09 » 11:32:31
Bara man har tålamod o är noggrann så fungerar det. Jag har tyvärr inte tid att hjälpa andra privat. Därav finns alla guider :)

[Svara]
Lisa 07/11/10

Hej!
När jag skulle byta ut bilderna gick det inte, jag fick den till slut i rätt storlek men då blev allt annat fel så nu har jag de bilderna som kom med designen och jag vågar inte ändra något(vet att det går att få tillbaka men..).

Hälsningar, Lisa

[Svara]
Tescho svarar:
08 / 06 - 09 » 11:32:31
Bara man gör rätt så fungerar det korrekt!

[Svara]
Trackback: Tescho » Svar från frågestunden – del 2 av 2 { bloggar & design }
[...] —-Svar: Jag tycker inte om att besvara frågor ang hur andra har det då de säkerligen vill ha de... tescho.se/svar-fran-fragestunden-del-2-av-2-bloggar-design
maria 08/01/11

Kan man lägga mouseovers i inlägg? Skulle du kunna förklara
på enkelt sätt?

[Svara]
Tescho svarar:
08 / 06 - 09 » 11:32:31
Gör som jag beskrivit o klistra in bildkoden i HTML-läge när du skriver inlägget.

[Svara]
emelie 10/01/11

tack

[Svara]
Felicia 11/02/11

ÅH, tack så jättejätte mycket för hjälpen! Haha, jag är sååååå nöjd. TACK, verkligen! :D

[Svara]
Tescho svarar:
08 / 06 - 09 » 11:32:31
Tack själv för att det uppskattas :)

[Svara]
Denise 27/02/11

Hejsan! Du sa att om man behövde hjälp med positionera så skulle man kommentera. Kan du hjälpa mig?

Tack på förhand!

[Svara]
Tescho svarar:
08 / 06 - 09 » 11:32:31
Jag har tyvärr inte längre tid att hjälpa. Tack för att du påminde mig. Ska ändra det!

[Svara]
Ida 06/03/11

Jag har gjort bilderna och gjort allt annat jag fattar bara inte hur jag ska sätta in dom om man bara vill ha skiftande ?
Snällllllaaa svara :D
Andvänder mig av min test blogg htt://keskisalo.blogg.se/test

[Svara]
Sara 22/03/11

HejHej Älskar verkligen din blogg! :) Faast nu har jag som ett litet problem, Fattar inte vars man ska lägga in 3an, I kodmallen? eller i Stilmallen?, Och vars Isåfall?, För att jag kan verkligen ingeting med bloggar och sånt!, Såå Skulle vara jätte tacksam om du svara! :)

Mvh//Sara.

[Svara]
Patrizia 30/07/11

Hejsan ! tack så hemsk mycket för moouseovers !
grymt häftigt !

Men gör man likadant om man vill ha den som header då ? :)

MVH PATRIZIA

[Svara]
Dannielle 21/10/11

Funkar skit bra! Tack!

[Svara]
Jojjjjohs.se 10/11/11

Hur gör man om man vill ha mouseover-bilden i ett inlägg? Har testat med det som du skrivit men funkar inte..

[Svara]
Tescho svarar:
08 / 06 - 09 » 11:32:31
Samma sak fast att man växlar till html-läge när man ska klistra in koden.

[Svara]
Rebecca 29/12/11

Toppen-tips! Funkade kanon, tack så mycket! :)

[Svara]

Tescho

blogg om foto, webb(design), hus & hem, skapa, kreativitet, hundliv