Søg
Avatar billede Slettet bruger
16. juli 2010 - 21:31 Der er 9 kommentarer og
1 løsning

Mouseover?

Hej Eksperter,

Jeg har en side med nogle billeder som skal skifte når du fører musen henover. Jeg vil dog kun have det billeder man har musen på til at skifte og ikke alle billederne på siden.
Se nedenstående kode - Hvordan kan det løses:

<script type="text/javascript">
function mouseOver() {
document.getElementById("b1").src ="1.gif";
document.getElementById("b2").src ="2.gif";
document.getElementById("b3").src ="3.gif";}

function mouseOut() {
document.getElementById("b1").src ="4.gif";
document.getElementById("b2").src ="5.gif";
document.getElementById("b3").src ="6.gif"; }
</script>

Eksempel på anvendelse af script:
<img border="0" src="1.gif" id="b1" onmouseover="mouseOver()" onmouseout="mouseOut()" />

Tak.
Avatar billede Slettet bruger
16. juli 2010 - 21:44 #1
Det kan gøres så simpelt som dette:

<script type="text/javascript">
function changeSrc(element, source) {
    element.src = source;
}
</script>

<img border="0" src="1.gif" id="b1" onmouseover="changeSrc(this, '1.gif')" onmouseout="changeSrc(this, '4.gif')" />


Derudover ville det måske være smart at forudindlæse billederne? Jeg kommer gerne med en stump kode til det.
Avatar billede majbom Novice
16. juli 2010 - 21:47 #2 
<script type="text/javascript">
function mouseOver(elmImg, intImg) {
   elmImg.src=intImg+'.gif';
}
</script>


Eksempel på anvendelse af script:
<img border="0" src="1.gif" id="b1" onmouseover="mouseOver(this, 1)" onmouseout="mouseOut(this, 4)" />
Avatar billede majbom Novice
16. juli 2010 - 21:47 #3
damn, der var jeg sq for langsom, men vi er dog ret enige :)
Avatar billede Slettet bruger
16. juli 2010 - 21:58 #4
kimsey0: Tak for det - Lige det jeg skulle bruge. Smid et svar!
Avatar billede Slettet bruger
16. juli 2010 - 21:59 #5
Ville det være smart at forudindlæse billederne? Ville du sende noget kode?
Avatar billede Slettet bruger
16. juli 2010 - 22:14 #6
@splazz - Ja, vi tænkte vel nok ens :)

Selv tak.
Og ja, det ville være en ret smart ide, så du slipper for den (om end korte) ventetid første gang musen føres over billederne.
Denne kode skulle kunne gøre det:

<head>
<script type="text/javascript">
function preloadImage(source) {
    image = new Image();
    image.src = source;
}

function changeSrc(element, source) {
    element.src = source;
}
</script>
</head>


<body onload="preloadImage('4.gif'); preloadImage('5.gif'); preloadImage('6.gif');">
<img border="0" src="1.gif" id="b1" onmouseover="changeSrc(this, '4.gif')" onmouseout="changeSrc(this, '1.gif')" />
<img border="0" src="2.gif" id="b2" onmouseover="changeSrc(this, '5.gif')" onmouseout="changeSrc(this, '2.gif')" />
<img border="0" src="3.gif" id="b3" onmouseover="changeSrc(this, '6.gif')" onmouseout="changeSrc(this, '3.gif')" />
</body>
Avatar billede Slettet bruger
16. juli 2010 - 22:21 #7
Tak for det - Kan ikke rigtigt vurdere om det virker, idet billederne er så forholdsvis små og bliver hentet ekstremt hurtigt.
Avatar billede Slettet bruger
16. juli 2010 - 22:50 #8
Here you go:
http://jacobbundgaard.dk/misc/eksperten/preload.html

Vent 10 sekunder og prøv så at køre musen over de to billeder.
Avatar billede majbom Novice
16. juli 2010 - 22:58 #9
-> #8 - har du ikke byttet om på dem? :)
Avatar billede Slettet bruger
17. juli 2010 - 17:41 #10
#9 - Jo, godt set :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Sæt vindue størrelse Af poulmadsen i JavaScript 1 08/10/202417:18 13/10/202412:33
Opgavestyring Af ingeman i JavaScript 1 15/09/202416:06 15/09/202420:40
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 12:32 iPadOS 26.4.1 kan ikke opdatere Af claes57 i Apps til iOS
08/0410:38 Indholdsfortegnelse ændrer sig, når jeg gemmer som PDF Af Jan K i Word
06/0419:53 installer mange programmer på en gang Af Overgaard1654 i Andet software
06/0417:48 Min hp Officejet pro 7740 skærer det nederste af billedet i word Af rosmarin i Printere
06/0413:13 Batch OCR Af KurtG i Billedbehandling
White papers
Flere white papers »