Avatar billede mik789 Nybegynder
22. februar 2002 - 08:23 Der er 11 kommentarer og
1 løsning

MouseOver og billedskift

Hvis man har en celle A med et billede grå.gif og en celle B med et link, og det skal være sådan, at når man fører musen over linket i B, så udskiftes billedet grå.gif i A med billedet sort.gif, hvordan gøres det så mest enkelt? Ved MouseOut skal billedet i A igen skifte til grå.gif. Celle-parrene fortsætter i flere rækker dernedad med forskellige links, men med de samme to billeder der skal skifte. Sådan her:

  <tr>
    <td><img src="grå.gif"></td>
    <td><a href="link1.html">link1</a></td>
  </tr>
  <tr>
    <td><img src="grå.gif"></td>
    <td><a href="link2.html">link2</a></td>
  </tr>

  ....... link3 ..... osv. dernedad.

Det er vist ret grundlæggende, men jeg er kun lige startet med at forstå hvad der sker i Java Script, og det er stadig lidt uoverskueligt ;-)

/mik

Avatar billede overload.dk Nybegynder
22. februar 2002 - 08:42 #1
<tr>
    <td><img src="grå.gif" onMouseOver="this.src='sort.gif'" onMouseOut="this.src='grå.gif'"></td>
    <td><a href="link1.html">link1</a></td>
  </tr>
  <tr>
    <td><img src="grå.gif" onMouseOver="this.src='sort.gif'" onMouseOut="this.src='grå.gif'"></td>
    <td><a href="link2.html">link2</a></td>
  </tr>
Avatar billede mik789 Nybegynder
22. februar 2002 - 08:52 #2
overload.dk> har ikke prøvet dit forslag, men så vidt jeg kan se vil billedet i din kode kun skifte når musen føres over BILLEDET. Det var meningen at det skulle skifte, når musen føres over linket.....?
Avatar billede sukos Juniormester
22. februar 2002 - 08:58 #3
<SCRIPT LANGUAGE="javascript">
<!--
knap1=new Image(); knap1.src='billede1.gif';
knap2=new Image(); knap2.src='billede2.gif';
//-->
</script>

Lægger du mellem dine <head> - tags.

På linket skriver du så:

<a href="ditlink.html" onMouseover="document.images[0].src=knap2.src"
onMouseOut="document.images[0].src=knap1.src">Et link</a>
Avatar billede sukos Juniormester
22. februar 2002 - 09:03 #4
"document.images[0]" referer til hvornår billedet i dit dokument bliver vist.
Altså, har du f.eks 10 billeder på siden, og det er billede 3 du vil ha' udskiftet:

<a href="ditlink.html" onMouseover="document.images[2].src=knap2.src"
onMouseOut="document.images[2].src=knap1.src">Et link</a>

Og så hedder dit billede jo <img src="billede1.gif">

Har du mange billeder på siden, og det er lidt kringlet at finde det rigtige "nummer", kan du også gi' dit billede et "name" og refere til.
<img src="billede1.gif" name"on_over">

<a href="ditlink.html" onMouseover="document.images[on_over].src=knap2.src"
onMouseOut="document.images[on_over].src=knap1.src">Et link</a>
Avatar billede mik789 Nybegynder
22. februar 2002 - 09:18 #5
sukos> det ser fint ud! har testet på en simpel testside med kun to billeder. nu prøver jeg så på den rigtige side, hvor der er MANGE billeder...
Avatar billede mik789 Nybegynder
22. februar 2002 - 09:49 #6
sukos> der går kuk i det, når jeg forsøger med "name". Er det meningen at jeg BÅDE skal definere de to billeder i <script></script> tag'et øverst (hvor knap1.src='billede1.gif') og SAMTIDIG tildele billede1.gif endnu et navn "on_over" f.eks.? Der er i alle fald noget galt, når jeg gør det: programmet svarer med "'document.images[...]' er null eller ikke et objekt"
Avatar billede mik789 Nybegynder
22. februar 2002 - 09:51 #7
sukos> vil du evt. godt omskrive dit første svar så det passer med brug af "name" i stedet for numre?
Avatar billede sukos Juniormester
22. februar 2002 - 09:56 #8
Prøver lige.
Men måske det er fordi det skal hedde:
document.images['on_over']

Er (heller) ikke særlig kvik til javascript
Avatar billede sukos Juniormester
22. februar 2002 - 10:04 #9
Jow, det var de manglende ' ' omkring on_over.
Altså skal det være:
document.images['on_over']

Hvis man bruger "bogstaver" uden apostrof'en (hedder den det?) går det galt!
Avatar billede sukos Juniormester
22. februar 2002 - 10:06 #10
<SCRIPT LANGUAGE="javascript">
<!--
knap1=new Image(); knap1.src='billede1.gif';
knap2=new Image(); knap2.src='billede2.gif';
//-->
</script>

Lægger du mellem dine <head> - tags.

På linket skriver du så:

<a href="ditlink.html" onMouseover="document.images['on_over'].src=knap2.src"
onMouseOut="document.images['on_over'].src=knap1.src">Et link</a>

<img src="billede1.gif" name="on_over">
Avatar billede mik789 Nybegynder
22. februar 2002 - 12:27 #11
sukos> det virker nu. takker for hjælpen! jeg skal så bare have kopieret det billede der skal skiftes i en hel serie af ens billeder med forskelligt navn og tilsvarende tildele det name. men det er jo nemt nok.
Avatar billede sukos Juniormester
22. februar 2002 - 18:23 #12
Glad for du fandt en løsning!
I stedet for mere eller mindre avancerede "mouseover"-scripts, så virker ovenstående vistnok også i 3.0 browsere! Om ikke andet så i NS3.0 :o)
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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.

Du kan også logge ind via nedenstående tjenester