Блог

Главная - Вопросы по программированию - html-карта не работает

html-карта не работает

#html #css #web #map

#HTML #css #веб #словарь

Вопрос:

Для веб-сайта, который я делаю для своей работы, я хотел использовать в основном кодирование CSS, но когда я увидел все проблемы, связанные с CSS-картами, я последовал совету других и придерживался традиционного стиля карт HTML. Однако код сопоставления не будет работать, ссылки остаются недоступными. Я не уверен, связано ли это с комбинацией CSS / HTML или нет, но мой код выглядит следующим образом для части HTML:

 <body>
<div id="header">
    <div id="menu">
        <img src="http://i74.photobucket.com/albums/i266/nanashiwolf/header.png" width="770" height="100" alt="logo" border="0" usemap="#headermap" />

<map name="#headermap">
  <area shape="rect" coords="156,67,156,83,225,83,225,67" href="links.html" alt="Links" />
  <area shape="rect" coords="239,67,239,83,309,83,309,67" href="links.html" alt="Links" />
  <area shape="rect" coords="324,67,324,83,392,83,392,67" href="links.html" alt="Links" />
  <area shape="rect" coords="403,67,403,83,511,83,511,67" href="links.html" alt="Links" />
  <area shape="rect" coords="526,67,526,83,588,83,588,67" href="links.html" alt="Links" />
  <area shape="rect" coords="602,67,602,83,662,83,662,67" href="links.html" alt="Links" />
  <area shape="rect" coords="675,67,675,83,736,83,736,67" href="links.html" alt="Links" />
</map>
    </div></div>

После этого сразу же появляется еще один открытый div для тела веб-сайта, и, насколько я знаю, с этим проблем нет. Я думал, может быть, это была проблема с тегом menu, но это все, что у меня есть для menu:

 #menu {

    float: left;
    width: 767px;
    height: 200px;
}

Я не совсем уверен, в чем проблема, потому что я использовал карты раньше, и они всегда работали, поэтому единственное, о чем я думаю, это то, что CSS каким-то образом противоречит этому. Если я смотрю на неправильный CSS, и другой тег может вызвать проблему, я также могу опубликовать это.
Прямо сейчас я просматриваю это в IE (я еще не загрузил FF, но я буду), поэтому я не знаю, может ли это быть проблемой.

Ответ №1:

В name параметре map не должно быть a # :

 <map name="headermap">

Это необходимо только в директиве usemap:

 <img usemap="#headermap">

Вводя # имя карты, вам на самом деле придется использовать usemap="##headermap" вместо этого.

Комментарии:

1. Просто исправил это и обновил страницу, но карта по-прежнему не работает.

2. Карта также должна быть определена перед ее использованием. Когда браузер анализирует тег изображения, <map> он еще не найден, поэтому он не может связать их вместе.

3. Итак, должно ли имя карты следовать после кода меню div? Я также должен был упомянуть, что я использую XHTML

4.Нет. <map><area><area>etc..</map> и ТОГДА <img> вся карта с областями должна быть завершена, ПРЕЖДЕ чем вы обратитесь к карте с помощью usemap.

5. Только что заметил, что ваши координаты тоже неверны. Для прямоугольников вы указываете только верхний левый и нижний правый углы. У вас указано 4 координаты