Создание карты ссылок с помощью MAP

Valerievna · 09.10.2009

Подскажите, почему не работает карта ссылок. Вроде сделала все по образцу. Страница в компьютере. Координаты определяла в IR.

Код:

<body>
<center><img src="shappka.jpg" width="900" height="300" border="0" ></center>
<map neme="shappka.map">
<area shape="rect" cords="6,218,219,292" href="index.html">
<area shape="rect" cords="233,219,445,291" href="novosty.html">
<area shape="rect" cords="459,218,669,291" href="otzivi.html">
</map>
</body>

Для чего пораметр usemap, разъясните, пожалуйста, ато читаю описание, и не могу врубиться. Но с ним тоже не работает.

Creator · 09.10.2009

usemap используется для привязки координат вашей карты к изображению.

В вашем коде этой привязки нет, поэтому правим так:

Код:

<img src="shappka.jpg" width="900" height="300" border="0" usemap="#shappka.map">

P.S. "." лучше не использовать в идентификаторах.

Valerievna · 11.10.2009

Все равно не работает. Может, ссылки нужно писать через http:// , как в IR , если слои не сведены, можно указывать путь в папке, если сведены, то полный адрес.

"." лучше не использовать в идентификаторах.

а как тогда?

Creator · 11.10.2009

Была ошибка (neme="shappka.map").
Проверенный код:

Код:

<center><img src="100.jpg" width="900" height="300" border="0" usemap="#usermap"></center>
<map name="usermap">
<area shape="rect" cords="6,218,219,292" href="index.html" alt="главная">
<area shape="rect" cords="233,219,445,291" href="novosty.html" alt="новости">
<area shape="rect" cords="459,218,669,291" href="otzivi.html" alt="отзывы">
</map>

а как тогда?

Это только ИМХО, но я предпочитаю не использоваться точки в идентификаторах. На работоспособности это не отражается.

P.S. Самый простой способ проверить работает ли карта-изображения, это откл. картинки и если появятся ссылки, то значит все ок) Останется только с координатами разобраться

Valerievna · 11.10.2009

блин, всеравно не работает

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

может изображение какоето не такое

((((((((((((((((((((((((

Creator · 11.10.2009

Странно

Мануал

Valerievna · 11.10.2009

Урааааааааа! Знаешь, в чем была ошибка.......

Код:

cords

-

Код:

coOrds

вообще, блин, вот как одна буква бывает решает все...
Спасибо за помощь, если бы не Ваш "Мануал", я бы так и не нашла эту "О".

trueW3C · 11.10.2009

Я бы сделал контейнет с вашей фоновой картинкой и абсолютно спозицианировал ссылки ... получился бы такой код

Код:

 <div class="map">
       <a href="index.htm" class="index">Текст для поисковика</a>
        <a href="about.htm" class="about">Текст для поисковика</a>
        <a href="contact.htm" class="contact">Текст для поисковика</a>
 </div>

Текст для поисковика - скрывается через CCS.
Полезно и вкусно. :happy:

PS. Примерно такой CSS

Код:

.map { position:relative; width:400px; height:200px; background:#fff url(map.jpg) no-repeat 0 0; }
.map a { display:block; position:absolute; top:0; left:0; width:300px; height:100px; }
.map .about { top:100px; }
.map .contact { top:200px; width:400px }

Creator · 12.10.2009

Aurum, интересное решение и для поисковиков много вкуснее

Valerievna, рад, что все получилось

Осторожно, тема закрывается.

Создание карты ссылок с помощью MAP

Valerievna

Moderator

Creator

Administrator

Valerievna

Moderator

Creator

Administrator

Valerievna

Moderator

Creator

Administrator

Valerievna

Moderator

trueW3C

Поклонник Yii

Creator

Administrator

Онлайн статистика

Статистика форума

Новые пользователи

Поделиться этой страницей