HTML альтернативный текст для карт изображений - PullRequest
Новая
       77

HTML альтернативный текст для карт изображений

0 голосов
/ 26 ноября 2018

Таким образом, самому изображению может быть предоставлен альтернативный текст в случаях, когда оно не загружается, но как насчет карт изображений?

Можно ли создать резервные текстовые ссылки для каждой отображаемой области изображения, если само изображение не загружается? 

<map id="knightmap" name="knightmap">
 <!--Hilt--><area shape="circle" coords="201,361 11" 
href="http://uncyclopedia.wikia.com/wiki/HowTo:End_Him_Rightly"/>
 <!--Banner--><area shape="rect" coords="278,309 351,636" 
href="http://www.medievalchronicles.com/medieval-knights/knights-coat-of- 
arms/"/>
 <!--Sword--><area shape="poly" coords="195,335 157,346 112,303 149,271 
95,10 125,5 172,150 200,261 220,324 " 
href="https://en.wikipedia.org/wiki/Knightly_sword"/>
 <!--Shield--><area shape="poly" coords="346,231 415,210 485,212 480,367 
441,482 418,487" href="https://en.wikipedia.org/wiki/Kite_shield"/>
 <!--Helm--><area shape="poly" coords="300,300 204,250 197,231 200,225 
190,180 204,136 245,83 323,135 334,182 353,192 353,209 " 
href="https://en.wikipedia.org/wiki/Close_helmet"/>
 <!--Boot left--><area shape="poly" coords="203,597 226,604 228,614 195,627 
145,630 143,620" href="https://en.wikipedia.org/wiki/Sabaton"/>
 <!--Boot right--><area shape="poly" coords="434,700 450,687 491,704 488,719 
433,719 " href="https://en.wikipedia.org/wiki/Sabaton"/>
</map>

<img src="images/lab9/knight.png" usemap="knightmap" class="center" 
alt="Knight"/>

1 Ответ

0 голосов
/ 06 декабря 2018

Если элемент area имеет атрибут href, он должен иметь атрибут alt:

Указывает текстгиперссылки.Его значение должно быть текстом, который информирует пользователя о месте назначения ссылки.

Таким образом, img - alt описывает изображение, area - alt описывает содержаниесвязанная страница.Вы можете найти пример в спецификации: 

<p>View houses for sale in North Katoomba or South Katoomba:</p>
<p><img src="imagemap.png" width="209" alt="Map of Katoomba" height="249" usemap="#Map">

<map name="Map">
  <area shape="poly" coords="78,124,124,10,189,29,173,93,168,132,136,151,110,130" href="north.html" alt="Houses in North Katoomba">
  <area shape="poly" coords="66,63,80,135,106,138,137,154,167,137,175,133,144,240,49,223,17,137,17,61" alt="Houses in South Katoomba" href="south.html">
</map>
...