HTML Rollover Image code werkt niet. - Softwareontwikkeling

zondag 23 november 2014 12:32

Acties:

Verwijderd

Topicstarter

Hallo allemaal,

Ik wil graag een rollover image, dus dat als ik boven een plaatje hangt, het plaatje verandert.
Hiervoor gebruik ik de volgende code:

<a href="index.html"><img src="Images/buttons/home_btn.png" onmouseover="this.src=Images/buttons/info_btn.png"
onmouseout="this.src=Images/buttons/home_btn.png"/></a>

De afbeeldingen staan in de juiste map maar als ik boven het plaatje ga hangen gebeurt er niks. Wel werkt de link normaal.

Weet iemand hoe dit komt?
Alvast bedankt.

Luuk.

zondag 23 november 2014 12:49

Acties:

Verwijderd

Je moet geldige javascript binnen de quotes van de onmouseover handler hebben, dat is inclusief quotes en kan verwarrend zijn:

HTML:

<a href="index.html"><img
  src="Images/buttons/home_btn.png"
  onmouseover="this.src='Images/buttons/info_btn.png';"
  onmouseout="this.src='Images/buttons/home_btn.png';"
/></a>

De error console van je browser zou je hiervoor moeten waarschuwen.

zondag 23 november 2014 13:12

Acties:

Verwijderd

Topicstarter

Hij doet het! Ik ben nog aan het leren hoe HTML precies werkt, zou je het misschien nog een keer uit kunnen leggen, maar dan iets makkelijker? Wat zijn bijvoorbeeld 'handlers'? En ik neem aan dat quotes dit zijn; "".
Alvast bedankt.

zondag 23 november 2014 18:36

Acties:

Merethil

De handlers waar Cheatah het over had is het systeem dat je browser gebruikt om javascript te koppelen aan functies als "onmousover" en "onmouseout" (en "onchange", "onclick" etc.). Het systeem gaat op zoek naar de specifieke keywords (onmouseover en onmouseout in jouw geval) en binden aan die specifieke acties jouw specifieke javascript.

Om iets aan een handler zoals onmouseover mee te geven, moet je je javascript tussen dubbele aanhalingstekens plaatsen (" " dus), maar omdat je javascript, om goed te functioneren, ook aanhalingstekens nodig heeft, moet je wat je toewijst aan je "this.src" ook tussen enkele aanhalingstekens plaatsen. Normaalgesproken gebruik je daar dubbele voor, maar omdat je al dubbele gebruikt om iets aan "onmouseover" te assignen, moet je enkele gebruiken in de statement omdat je anders de dubbele afsluit en opnieuw opstart.

Voorbeeldje:

Foutief (Merk op: Het gebruik van tweemaal dubbele aanhalingstekens):

HTML:

<a href="index.html"><img
  src="Images/buttons/home_btn.png"
  onmouseover="this.src="Images/buttons/info_btn.png";"
  onmouseout="this.src="Images/buttons/home_btn.png";"
/></a>

Correct:

HTML:

<a href="index.html"><img
  src="Images/buttons/home_btn.png"
  onmouseover="this.src='Images/buttons/info_btn.png';" <-- Hier hangt je browser this.src=xxx aan je onmouseover handler
  onmouseout="this.src='Images/buttons/home_btn.png';" <-- Hier hangt je browser this.src=xxx aan je onmouseout handler
/></a>

Over het algemeen is dit soort spul handig, maar niet het netst. Beter is om er een functie van te maken in een .js-file die je invoegt in je <head> van je HTML en aanroept in je onmouseover/onmouseout en andere handlers in <a> / <button> etc. tags.

zondag 23 november 2014 19:57

Acties:

Verwijderd

Topicstarter

@Merethil: Aha, nu snap ik 'm. Bedankt voor je uitleg, hier heb ik zeker wat aan!