Gå til innhold

[Løst] Problem med "rullover" i Javascript

Kristen Vamsæter

Anbefalte innlegg

Kristen Vamsæter

Kristen Vamsæter

Skrevet
Skrevet

Hei

 

Jeg tar et nybegynnerkurs i Webutvikling, og i den forbindelse fikk vi en oppgave som gikk ut på å lage en "rullover" med Javascript (Når bilde forandrer seg når man tar musen over). Jeg har prøvd flere ganger, men får det ikke til. Hva har jeg gjort feil/ bør gjøre annerledes i følgende kode:

 

<html>
<head>
 <title>Bildeforandring med javascript</title>

 <script language="javascript" type="text/javascript">

  if (document.images) {
   knapp1 = new Image
   knapp2 = new Image

   knapp1.src = 'http://upload.wikimedia.org/wikipedia/commons/a/a8/Button-Blue.svg'
   knapp2.src = 'http://upload.wikimedia.org/wikipedia/commons/0/07/Button_Icon_Red.svg'
   }
 </script>
</head>

<body>
<a href="htttp://www.vg.no.no" onmouseover="document.rollover.src=button2.src" onmouseout="document.rollover.src=button1.src">
<img src="http://upload.wikimedia.org/wikipedia/commons/a/a8/Button-Blue.svg" name="rollover">
</a>
</body>
</html>

 

På forhånd takk til vedkommende som kan hjelpe meg med problemet.

 

Kristen

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Kristen Vamsæter

Kristen Vamsæter

Skrevet
  • Forfatter
Skrevet

Får den bare til å virke med et enkeltbilde. Noen som ser feilen her?

 

<html>
<head>
 <title>Bildeforandring med javascript</title>

 <script language="javascript" type="text/javascript">

  if (document.images) {
   knapp1 = new Image
   knapp2 = new Image
   knapp3 = new Image
   knapp4 = new Image
   knapp5 = new Image
   knapp6 = new Image

   knapp1.src = 'file:///C:/Users/Familie/Pictures/1.1.png'
   knapp2.src = 'file:///C:/Users/Familie/Pictures/1.2.png'
   knapp3.src = 'file:///C:/Users/Familie/Pictures/2.1.png'
   knapp4.src = 'file:///C:/Users/Familie/Pictures/2.2.png'
   knapp5.src = 'file:///C:/Users/Familie/Pictures/3.1.png'
   knapp6.src = 'file:///C:/Users/Familie/Pictures/3.2.png'
   }
 </script>
</head>

<body>
<a href="http://www.vg.no.no" onmouseover="document.rollover.src=knapp2.src" onmouseout="document.rollover.src=knapp1.src">
<img src="file:///C:/Users/Familie/Pictures/1.1.png" >
</a>
<a href="http://www.dn.no" onmouseover="document.rollover.src=knapp4.src" onmouseout="document.rollover.src=knapp3.src">
<img src="file:///C:/Users/Familie/Pictures/2.1.png" >
</a>
<a href="http://www.stemdlf.no" onmouseover="document.rollover.src=knapp6.src" onmouseout="document.rollover.src=knapp5.src">
<img src="file:///C:/Users/Familie/Pictures/3.1.png">
</a>
</body>
</html>

Lenke til kommentar
Kaptein Snus

Kaptein Snus

Skrevet
Skrevet

For det første har du ikke satt name til noe i img-taggene. For det andre tror jeg ikke JS støtter den pathen du har satt. Lag en ny mappe i samme mappe som html'n og legg bildene i denne mappen. Her ligger bildene i en mappe kalt Pictures som ligger i samme mappe som html'n. For det tredje ville jeg begynt å bruke semicolon når du er ferdig med å deklarere variabler og bruker funksjoner osv.

 

<html>
<head>
 <title>Bildeforandring med javascript</title>

 <script language="javascript" type="text/javascript">

if (document.images) {
 var knapp1 = new Image(),
  knapp2 = new Image(),
  knapp3 = new Image(),
  knapp4 = new Image(),
  knapp5 = new Image(),
  knapp6 = new Image();

 knapp1.src = 'Pictures/1.1.png';
 knapp2.src = 'Pictures/1.2.png';
 knapp3.src = 'Pictures/2.1.png';
 knapp4.src = 'Pictures/2.2.png';
 knapp5.src = 'Pictures/3.1.png';
 knapp6.src = 'Pictures/3.2.png';
}
 </script>
</head>
<body>
<a href="http://www.vg.no.no" onmouseover="document.rollover.src=knapp2.src" onmouseout="document.rollover.src=knapp1.src">
 <img src="file:///C:/Users/Familie/Pictures/1.1.png" name="rollover1">
</a>

<a href="http://www.dn.no" onmouseover="document.rollover.src=knapp4.src" onmouseout="document.rollover.src=knapp3.src">
 <img src="file:///C:/Users/Familie/Pictures/2.1.png" name="rollover2">
</a>
<a href="http://www.stemdlf.no" onmouseover="document.rollover.src=knapp6.src" onmouseout="document.rollover.src=knapp5.src">
 <img src="file:///C:/Users/Familie/Pictures/3.1.png" name="rollover3">
</a>
</body>
</html>

Lenke til kommentar
Feh

Feh

Skrevet
Skrevet (endret)

Litt OT, men takke seg til jQuery :)

 

Det eneste du gjør her er å legge til en klasse på hvert av de to bildene som skal byttes "rullover" (hover, mouseover, whatever). Så slipper du å styre med å holde orden på knapp ditt og datt og picture ditt og datt.

 

http://jsfiddle.net/kaTW5/

 

Edit: Funksjonen kan fint skrives om til vanlig javascript hvis det er et krav for oppgaven.

Endret av Feh
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...