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

Карта изображений не отображает кликабельные ссылки

0 голосов
/ 19 февраля 2020

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

<img src="images/lazyweb/stores.png"  border="0" usemap="#storemap" />
<map name="storemap">
    <area shape="rect" coords="96,155,343,326"      href="https://www.etsy.com">
    <area shape="rect" coords="414,155,663,327"     href="https://www.amazon.co.uk">
    <area shape="rect" coords="743,153,986,326"     href="https://www.ebay.co.uk">
</map>

Я использовал Dreamweaver для генерации координат, и это дает видимый шаблон поверх изображения, поэтому я уверен, что координаты в порядке (известные последние слова), но отображаемое изображение просто не имеет кликабельных ссылок.

1 Ответ

0 голосов
/ 19 февраля 2020

Я не вижу ничего плохого в вашем коде. Некоторые скрипты или CSS правила могут быть вам мешают.

Если это не работает, вы всегда можете попробовать позиционировать ссылки, используя CSS. см. пример ниже 

#img {
  position: relative;
  width: 1124px;
  height: 426px;
  background:url('https://lazycarrot.co.uk/images/lazyweb/stores.png');
}

#img a {
  position: absolute;
  display: block;
  border: 1px solid red;
}

#img a.etsy { 
  top:140px;
  left:100px;
  width:220px;
  height:200px;
}
<img src="https://lazycarrot.co.uk/images/lazyweb/stores.png"  border="0" usemap="#storemap" />
<map name="storemap">
    <area shape="rect" coords="96,155,343,326"      href="https://www.etsy.com">
    <area shape="rect" coords="414,155,663,327"     href="https://www.amazon.co.uk">
    <area shape="rect" coords="743,153,986,326"     href="https://www.ebay.co.uk">
</map>

<div id="img">
  <a class="etsy"   href="https://www.etsy.com"></a>
  <a class="amazon" href="https://www.amazon.co.uk"></a>
  <a class="ebay"   href="https://www.ebay.co.uk"></a>
</div>
...