Oprettet man. d. 23. november 2009 kl. 01:31:10

30 point uddelt | 5 kommentarer

13thsky (11.532 point. Point ude: 60)

Simpel roll over image effekt

Hej

Jeg vil gerne have et simpelt script til at skifte et billede ud med et andet, når man kører musen over. Altså som et link.

Men jeg vil gerne have det sådan at den javascript funktion jeg kalder får de to billeder med som parametre. Dvs. så jeg kan genbruge javascript funktionen hver gang jeg vil lave en ny knap med roll over effekt.

Anmeld misbrug

Skriv et svar | Skriv en kommentar

Skrevet man. d. 23. november 2009 kl. 06:14:46| #1

Christian_Belgien (40.182 point)

Den klassiske metode, den som man bliver ved med at komme tilbage til hvis man soeger google for rollover images, synes at vaere den du finder her: http://www.htmlcodetutorial.com/ (...)

Det er en stor historie. Jeg er ved at kikke paa om det kan goeres enklere. Det vender jeg tilbage med.

Anmeld misbrug

Skriv et svar | Skriv en kommentar

Skrevet man. d. 23. november 2009 kl. 09:12:25| #2

Accepteret svar!30 point tildelt

Christian_Belgien (40.182 point)

Ok, her er hvad jeg fandt ud af:

Du laver som saedvanlig en <img> tag med src til det billede du vil vise. Du giver img'en en id. Saa placerer du img'en i en <a> som du giver en onMouseOver metode. Den metode kalder en funktion rulover med to parametre, id'en af img'en og src til det billede der skal skiftes til.

Hvis du vil have det saaledes at billedet skal skifte tilbage til det oprindelige naar musen igen er vaek skal du ogsaa give <a>'en en metode onMouseOut som kalder funktionen rulud.

Hvis du vil have mere end en img med rullebillede saa skal hver img have sin egen id.

Her er en kode der vil goere dette (udskift mine src's med dine egne src's.)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ (...)
<html>
<head>
<script language="Javascript">

function rulover(imgid, imgsrc)
{
document.getElementById(imgid).src=imgsrc;
}
function rulud(imgid, imgsrc)
{
document.getElementById(imgid).src=imgsrc;
}

</script>
</head>
<body>

<a href=#
onMouseOver="rulover('id1', '/Images/revue3.jpg')"
onMouseOut="rulud('id1', '/Images/revue2.jpg')">
<img src="/Images/revue2.jpg" border=0 id="id1"></a>

<a href=#
onMouseOver="rulover('id2', '/Images/revue5.jpg')"
onMouseOut="rulud('id2', '/Images/revue4.jpg')">
<img src="/Images/revue4.jpg" border=0 id="id2"></a>

</body>
</html>

Anmeld misbrug

Skriv et svar | Skriv en kommentar

Skrevet man. d. 23. november 2009 kl. 10:06:23| #3

Afvist svar

13thsky (11.532 point)

Det er bare perfekt! Tak.

Anmeld misbrug

Skriv et svar | Skriv en kommentar

Skrevet man. d. 23. november 2009 kl. 12:43:30| #4

mclemens (63.218 point)

Lige et lille tip, hvis billedet skal bruges som vist her, kan mouseover/out også liggges på billede elementet som her

<a href="#">
<img src="/Images/revue2.jpg" onMouseOver="rul(this, '/Images/revue3.jpg')" onMouseOut="rul(this, '/Images/revue2.jpg')"></a>

og scriptet forkortet til:

<script type="text/javascript">
function rul(elm, imgsrc){
elm.src=imgsrc;
}
</script>

...

Såfremt der er behovet for id selecting kan #2's script forkortes til:

<script type="text/javascript">
function rul(imgid, imgsrc){
document.getElementById(imgid).src=imgsrc;
}
</script>

med kald til funktionen rul på både mouseover og mouseout (der er ikke behov for at skrive den samme funktion to gange til den samme effekt)

Anmeld misbrug

Skriv et svar | Skriv en kommentar

Skrevet man. d. 23. november 2009 kl. 12:48:02| #5

mclemens (63.218 point)

Første del af #4 virker egentlig lidt ulogisk ved nærmere efter tanke, hvis der ikke skal laves andet med billedet kan man jo ligeså godt sige

<a href="#">
<img src="/Images/revue2.jpg" onMouseOver="this.src='/Images/revue3.jpg';" onMouseOut="this.src='/Images/revue2.jpg';"></a>

- og så undvære scriptet.

(eller lave det via :hover på a elementet i css og så skifte bagrunden på a'elementet og dermed springe img elementet over)

Anmeld misbrug

Skriv et svar | Skriv en kommentar

Log ind

Opret bruger | Glemt adgangskode

Seneste spørgsmål

Tabindex!

Oprettet den 11. februar 2012 kl. 11.37

thomasfricke giver 30 point for svar | Giv et svar »

skal frem brugernavn ned og sige om den har eller ej

Oprettet den 11. februar 2012 kl. 02.44

tobrukDk giver 20 point for svar | Giv et svar »

Muligvis script-konfllikt i jquery. Min slider vises...

Oprettet den 9. februar 2012 kl. 23.00

Peterjakobsen giver 30 point for svar | Giv et svar »

Seneste guides

Installer win 7

9. februar 2012 kl. 14.11 | Læs »

Installation af Apache2, PHP5, MySQL5, Phpmyadmin og...

8. februar 2012 kl. 20.05 | Læs »

Den hurtige og effektive metoder til at knække...

4. februar 2012 kl. 23.16 | Læs »

Guide til usb internet også kaldet mobilt bredbånd

4. februar 2012 kl. 22.33 | Læs »

Den gode bruger

30. januar 2012 kl. 04.45 | Læs »

Se alle guides »

Seneste nyheder

Måske snart slut med Androids helt store problem

10. februar 2012 kl. 13.40 | Læs »

Her er fem sjove danske websider du skal kende

10. februar 2012 kl. 13.31 | Læs »

NemId sprængt: Hackere bryder ind i Danske Bank

10. februar 2012 kl. 13.06 | Læs »

Danmark kigger langt efter musikbranchens guldkalv

10. februar 2012 kl. 12.20 | Læs »

Nu kan du snart hente Windows 8

10. februar 2012 kl. 11.41 | Læs »

Se alle nyheder »

Tips & Tricks fra PC World

Her er fem sjove danske websider du skal kende

Trænger dine lattermuskler til en omgang fitness på dansk? Vi viser vej til fem websider fyldt med humor og vanvittig satire.

Læs mere »

Anmeldelser fra PC World

Test: Denne super-tablet er iPads hårdeste konkurrent

Eee Pad Transformer Prime er frygtindgydende med sin quadcore processor og evne til at trylle sig om til bærbar. Apple bør kigge i bagspejlet, for Asus' tablet-pc kommer buldrende - og gør det...

Læs mere »

Seneste blogindlæg

Tvangslukke spørgsmål: Hvad er den bedste løsning?

Hej Vi har mange åbne spørgsmål på Eksperten. Vi ville gerne tvangslukke dem - så et spørgsmål efter f.eks. 6 måneder lukkes. Men der er et par uklarheder som ville være gode at få lidt input til:...

Læs mere »