Aanbevolen cursus:
HTML <img> alt-eigenschap
tooltip en opmerkingen Definitie en gebruik
Eigenschap is een vereiste eigenschap die de alternatieve tekst regelt die wordt weergegeven wanneer de afbeelding niet kan worden weergegeven.
- Aangezien de gebruiker mogelijk geen afbeeldingen kan bekijken vanwege de volgende redenen, kan de alt-eigenschap alternatieve informatie bieden voor de afbeelding:
- Netwerk te traag
- Fout in de src-eigenschap
- Browser schakelt afbeeldingen uit
Gebruikers gebruiken een schermlezer
<img> tag-eigenschap alt specificeert de alternatieve tekst die wordt weergegeven in de browser in plaats van de afbeelding, wanneer de afbeelding niet kan worden weergegeven of wanneer de gebruiker de weergave van afbeeldingen uitschakelt.
Tip:We raden u ten zeerste aan om deze eigenschap te gebruiken bij elke afbeelding in het document. Op die manier kunnen gebruikers zelfs als de afbeelding niet kan worden weergegeven, nog steeds informatie zien over wat er is verloren gegaan. En voor mensen met een beperking is de alt-eigenschap vaak het enige manier om de inhoud van de afbeelding te begrijpen. title-eigenschapAls u een tooltip wilt maken voor een afbeelding, gebruik dan
!
Opmerking:tooltip en opmerkingen De waarde van de eigenschap is een string die maximaal 1024 karakters kan bevatten, inclusief spaties en puncties. Deze string moet tussen aanhalingstekens staan. Deze alt-tekst kan referenties naar speciale symbolen bevatten, maar mag geen andere soorten markeringen bevatten, vooral geen stijltaggen.
Opmerking:Wanneer de gebruiker de muis over het img-element verplaatst, toont Internet Explorer de waarde van de alt-eigenschap. Dit gedrag is niet correct. Alle andere browsers komen in overeenstemming met de norm, alleen wanneer de afbeelding niet kan worden weergegeven, wordt de alternatieve tekst weergegeven.
Tip:Als u een tooltip wilt maken voor een afbeelding, gebruik dan title-eigenschap。
Voorbeeld
Voorbeeld 1
<img src="/i/eg_tulip.jpg" alt="Shanghai Flower Port - Tulpen" />
Als de afbeelding niet kan worden weergegeven, toont de browser een alternatieve tekst, zoals hierboven:
Daarnaast tonen de nieuwste browsers een beschrijvende tekst in een tekstvak wanneer de gebruiker de muis over de afbeelding verplaatst. Het volgende codevoorbeeld voegt beschrijvende tekst toe aan de alt-eigenschap van de afbeelding:
Je kunt de muis over het volgende foto verplaatsen om het bijbehorende effect te zien:
De tekst in de rode cirkel is het effect dat IE7-browser weergeeft wanneer de muis over de afbeelding wordt bewogen:
Voorbeeld 2
De afbeelding met aangegeven alternatieve tekst:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
syntaxis
<img alt="tekst">
eigenschapswaarde
| waarde | beschrijving |
|---|---|
| tekst |
Stel de alternatieve tekst van de afbeelding in. Principes van het gebruik van alt-tekst:
|
Browserondersteuning
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Ondersteuning | Ondersteuning | Ondersteuning | Ondersteuning | Ondersteuning |
