Waarom krijg ik in Opera geen tooltip te zien bij een afbeelding?

Trefwoorden: Opera, web browser, tooltip, alternatieve tekst, alt tekst, title, afbeelding, img

1. Inleiding


Als je op een webpagina de muiscursor over een afbeelding beweegt, krijg je soms een kadertje te zien met een beschrijving (ook wel tooltip genoemd). Bij Opera verschijnt dit kadertje echter niet bij alle afbeeldingen, terwijl er in bijvoorbeeld Microsoft Internet Explorer wel een tooltip verschijnt bij diezelfde afbeelding op diezelfde pagina.

2. Oorzaak


De reden waarom Opera geen tooltip toont, ligt aan de manier waarop de tekst in de broncode werd gespecifieerd. Het is namelijk zo dat Internet Explorer standaard de tekst in het alt-attribuut gebruikt als tooltip. De tekst in het alt-attribuut is echter bedoeld als alternatieve tekst voor de afbeelding, bijvoorbeeld wanneer deze nog niet is geladen, je deze niet wil weergeven of deze simpelweg niet kan worden gevonden.

3. Oplossing


De oplossing is even moeilijk als deze lang is; je dient namelijk niet het attribuut alt, maar het attribuut title te gebruiken. De werkwijze is hetzelfde; je geeft eenvoudigweg een tekst op die getoond dient te zorden als tooltip. Wanneer je dat doet, zal je merken dat Opera wel een tooltip toont en zelfs Internet Explorer de informatie in het title-attribuut verkiest boven die in het alt-attribuut.

Om het bovenstaande te concretiseren, kan je kort onderstaand voorbeeld doornemen. Het eerste stuk code bevat geen title-attribuut, waardoor Opera dus geen tooltip zal weergeven.

CODE
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html>
  4. <head>
  5. <title>Tooltips in Opera</title>
  6. </head>
  7. <body>
  8. <img src="welkom.jpg" alt="welkom" />
  9. </body>
  10. </html>


De browser zal proberen om de afbeelding met de naam welkom.jpg te tonen aan de bezoeker. Wanneer de afbeelding niet getoond wordt (of niet getoond kan worden), zal de tekst welkom in het alt-attribuut verschijnen. In Internet Explorer zal de tooltip eveneens de tekst welkom bevatten; Opera toont geen tooltip.

Volgend stukje code bevat een title-attribuut, waardoor Opera de tooltip zal renderen.

CODE
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html>
  4. <head>
  5. <title>Tooltips in Opera</title>
  6. </head>
  7. <body>
  8. <img src="welkom.jpg" alt="welkom" title="Welkom beste bezoeker" />
  9. </body>
  10. </html>


Ook hier zal de browser proberen de afbeelding met de naam welkom.jpg te tonen aan de bezoeker. Wanneer de afbeelding niet getoond wordt (of niet getoond kan worden), zal net zoals bij het eerste voorbeeld de tekst welkom in het alt-attribuut verschijnen. Opera zal een tooltip tonen met de waarde Welkom beste bezoeker. Ook Internet Explorer verkiest nu de waarde van het title-attribuut boven dat van het alt-attribuut.Dit artikel werd geschreven door Martijn op woensdag 8 oktober 2003 om 14:05 en werd sindsdien 2117 keer gelezen.

  • Pagina
  • 1 van 1

Geen reacties gevonden
Er werden nog geen reacties bij dit artikel geplaatst.
  • Indien je denkt iets te kunnen toevoegen aan het artikel, kan je zelf een reactie schrijven via de koppeling Plaats een reactie bij dit artikel hieronder.
  • Indien je andere commentaar (iets wat niet meteen functioneel bijdraagt aan het artikel zelf) hebt, kan je een bedankje formuleren via de koppeling Plaats een bedankje bij dit artikel hieronder.