Søg
Avatar billede free_help Nybegynder
22. september 2005 - 16:38 Der er 7 kommentarer og
1 løsning

når man peger på et billede skifter den billede?!

Hej eksperter.
Kan jeg ikke bede om koden til at når man peger på et billede med musen skifter den til et andet billede?
Avatar billede xvid Seniormester
22. september 2005 - 16:50 #1
her er det

http://www.javascriptkit.com/javatutors/image2.shtml
Avatar billede saudoo Nybegynder
22. september 2005 - 18:05 #2
Placer mellem <head> og </head>:

<script type="text/javascript">
    function skiftbillede(img_name,img_src)    {
    document[img_name].src=img_src;
    }
</script>

..

Sådan laves et billed der skal skifte ved mouseover:

<a href="side1.htm" onmouseover="skiftbillede('side1','billeder/papirgaarden_04_2.png')" onmouseout="skiftbillede('side1','billeder/papirgaarden_04.png')"><img src="billeder/papirgaarden_04.png" name="side1" style="border: 0px;"/></a>

Altså:
Du siger at hvis musen er over, skal den skifte billedet ud, der har navnet "X". Og det samme omvendt.

Hvilket billede der er tale om, angives med name-atributten i dit img-tag.
Og i din mouseover, det første, hvor der står side1:
onmouseover="skiftbillede('side1','billeder/papirgaarden_04_2.png')"
Avatar billede saudoo Nybegynder
22. september 2005 - 18:06 #3
Noget jeg har lavet til et skoleprojekt. :)

Du kan se det her:
http://www.humanslair.dk/papirgaarden/
Avatar billede roenving Novice
25. september 2005 - 00:18 #4
Simplest muligt:

<img src="billede.gif" onmouseover="this.src='billede_over.gif';" onmouseout="this.src='billede.gif';">

-- og hvis du skal bruge det på en hel masse billeder, og derfor godt vil have det mere generisk:

<script type="text/javascript">
function mOver(pic){
  pic.src = pic.src.replace(/\.gif$/,"_over.gif");
}
function mOut(pic){
  pic.src = pic.src.replace(/_over\.gif$/,".gif");
}
</script>

<img src="billede.gif" onmouseover="mOver(this);" onmouseout="mOut(this);">
Avatar billede bjoarn Nybegynder
25. september 2005 - 03:09 #5
Hvis man vil optimere load-tiden kan man bruge css-hover-funktionen.
Et eksempel kan være et menupunkt:
Tag fx et billede på 100px*30px. I et billedredigeringsprogram sætter man de to versioner af billedet ind i ét samlet billede på 200px*30px (det billede der skal vises ved onmouseover placeres til højre).

/* HTML */
<li id="billede1"><a href="url">Menupunkt 1</a></li>

/* CSS */
li#billede1{
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100px;
  height: 30px;
  background: url("billede1.jpg") no-repeat top left;
}
li#billede1 a{
  text-indent: -1000px; /* så teksten ikke ses, men er tilgængelig for text-braillers, screen-readers o.l.*/
}
li#billede1 a:hover{
  background: url("billede1.jpg") no-repeat 0 -100px;
}
Avatar billede bjoarn Nybegynder
25. september 2005 - 03:12 #6
Ved "optimere load-tiden" mener jeg selvfølgelig den tid der går fra man tager musen over billedet til det nye billede er loadet.
Hvis det skal pre-loades vha script kræver det vist en del ekstra kode. Men i ovenstående tilfælde er billedet allerede loadet når det første billede er der.
Avatar billede roenving Novice
25. september 2005 - 03:17 #7
Tjah, men så er det vel bare ved første load, man skal vente ?-)

-- hvis ens baggrundsbilleder er så store, at load-tiden betyder noget alvorligt (specielt dem, der udskiftes dynamisk !-), skal man undlade at bruge dem, for så har man principielt et dårligt organiseret web-site !o]
Avatar billede bjoarn Nybegynder
25. september 2005 - 04:07 #8
ja i disse tider med bredbånd er der næppe mange der mærker det, men jeg husker tydeligt trenden med grafikbaserede menuer førhen, hvor menupunkter lige pludselig forsvandt eller blinkede ved mouseover (især i overgangen mellem to til hinanden liggende billedlinks), altsammen pga diverse script af variabel kvalitet.
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 HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
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
16/1016:25 En "Gammel" & "Retro" PC Service ? Husker ikke navnet .... Af Ikke-ekspert i Diverse
16/1016:17 Jeg har lige købt en Samsung mobil telefon Af Strawberry i Mobiltelefoner
16/1013:20 Lotus Approach Af Carsten i Andet software
15/1015:34 Epson scanner forbinder ikke til computer Af bbkdk i Printere
11/1013:35 Bruger på Win11 Af lurup i Browsere
White papers
Flere white papers »