2017-01-13 10 views
0

Мое изображение хорошо отображается на веб-странице. Тем не менее, только заголовок первого участка отображается в подсказке при зависании над любой частью изображения. Другие области не будут отображаться. Вот html, который у меня есть.HTML-карта изображений, не отображающая подсказки

<html> 
 

 
<map name="eyfsplayarea"> 
 
    <area shape="circle" coords="930,300,70" alt="The Mud Kitchen and Digging Zone" title="The Mud Kitchen and Digging Zone"> 
 
    <area shape="circle" coords="790,200,50" alt="The Niagara Channelling System, Water Table and Water Wall" title="The Niagara Channelling System, Water Table and Water Wall"> 
 
    <area shape="circle" coords="890,180,20" alt="The Sand Tray" title="The Sand Tray"> 
 
    <area shape="rect" coords="323,150,850,100" alt="A Sheltered Covered Area Linked to the Building" title="A Sheltered Covered Area Linked to the Building"> 
 
    <area shape="circle" coords="600,200,40" alt="A Roadway, Numeracy and Literacy Zone" title="A Roadway, Numeracy and Literacy Zone"> 
 
    <area shape="circle" coords="400,300,70" alt="Physical Development and Role Play Zone" title="Physical Development and Role Play Zone"> 
 
    <area shape="circle" coords="690,300,90" alt="Physical Development and Role Play Zone" title="Physical Development and Role Play Zone"> 
 
    <area shape="circle" coords="246,612,104" alt="The Storytellers Chair, Phonics and Mark Making Zone" title="The Storytellers Chair, Phonics and Mark Making Zone"> 
 
    <area shape="circle" coords="244,190,54" alt="Role Play House with Chalkboard" title="Role Play House with Chalkboard"> 
 
    <area shape="circle" coords="593,615,105" alt="Den Posts" title="Den Posts"> 
 
    <area shape="circle" coords="1360,619,93" alt="The Language Lounge" title="The Language Lounge"> 
 
</map> 
 

 
<img src="/EYFS-Outdoor-Play-and-Learning2.jpg" width="1621" height="725" alt="EYFS Play and Learning" usemap="#eyfsplayarea"> 
 

 
</html>

+0

Ваши координаты буквально невозможны с учетом исходного изображения. –

+0

@ Dr.Avalanche Хорошее место, большое спасибо. Я исправил это с правильным размером изображения, но это была не единственная проблема, я испытываю то же самое. Есть идеи? –

+0

Пожалуйста, обновите свое сообщение с исправленным размером, так как он стоит на вашем html, по-прежнему использует коорды, которые не могут существовать –

ответ

0

Ответ на этот вопрос в том, что circle области на картах изображений имеет три значения х позиций, позиция у и radius круга. До редактирования у них было такое же количество параметров, что и прямоугольники, а позже их значение радиуса было больше исходного.