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

30 point uddelt | 5 kommentarer

13thsky (8.592 point. Point ude: 530)

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 (15.543 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/images/images_famsupp_59.html

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 (15.543 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/TR/html4/loose.dtd">
<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 (8.592 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 (59.343 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 (59.343 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

omskriv regex så felt kan være tomt

Oprettet den 31. juli 2010 kl. 09.32

hypofysen giver 30 point for svar | Giv et svar »

Dropdown udfylder værdier i flere input felter

Oprettet den 30. juli 2010 kl. 21.47

apromis giver 200 point for svar | Giv et svar »

'style' is null or not an object

Oprettet den 29. juli 2010 kl. 22.00

walkie84 giver 30 point for svar | Giv et svar »

Seneste guides

100% højde med CSS i alle browsere

14. juli 2010 kl. 11.31 | Læs »

Blogserie om MVVM pattern i C#/WPF til brug i...

8. juli 2010 kl. 08.36 | Læs »

XML

7. juli 2010 kl. 13.02 | Læs »

C++ Historie og Programmering - Del 1

2. juli 2010 kl. 23.38 | Læs »

Autocad / 3D Max / Revit til Salg.

24. juni 2010 kl. 10.24 | Læs »

Se alle guides »

Seneste nyheder

Test din viden med Computerworlds store sommerquiz

30. juli 2010 kl. 15.59 | Læs »

Viruskamp hos Mærsk: "Vores folk har brug for ro"

30. juli 2010 kl. 15.40 | Læs »

Video: Ugen der gik

30. juli 2010 kl. 15.20 | Læs »

Windows-udviklere lukker under halvdelen af sikkerhedshuller

30. juli 2010 kl. 13.30 | Læs »

Har du husket at kramme din systemadministrator i dag?

30. juli 2010 kl. 09.00 | Læs »

Se alle nyheder »

Tips & Tricks fra PC World

Sådan får du mest ud af batteriet på din bærbare

Batterierne i den bærbare lever sjældent op til forventningerne, men det er ikke altid batteriernes skyld. Se her hvordan du får mest muligt ud af dine batterier.

Læs mere »

Anmeldelser fra PC World

GTX460: Grafikkort med fin ydelse til rimelige penge

De store grafikkort løber med opmærksomheden, men det er i mellemklassen at de gode køb findes. Et af dem er det helt nye Nvidia GTX460. Se kortets resultater her.

Læs mere »

Seneste blogindlæg

Nu kan du slettes

Det sker af og til at en bruger ønsker at slette sin profil her på Eksperten. Det har vi haft svært ved, men nu kan du gøre det nemt og enkelt. Alt du skal gøre er at logge ind, gå ind på...

Læs mere »

Nyheder fra PC World

Test: Stream nye spil til gamle computere

Det er slut med at investere tusindvis af kroner i dyr hardware for at kunne spille de nyeste spil - amerikansk firma lader stor serverfarm klare arbejdet og streamer spillene til dig via nettet....

Læs mere »

Nyheder fra Computerworld

Test din viden med Computerworlds store sommerquiz

4. del: Brug agurketiden til at få opdateret din viden om it-branchen, og test for sjov om kollegerne på ferie eller derhjemme er lige så skarpe. Computerworld quizzer hver uge hele sommeren.

Læs mere »