Нужен лучший ответ для карты изображений с несколькими горячими точками опрокидывания - PullRequest
Новая
       41

Нужен лучший ответ для карты изображений с несколькими горячими точками опрокидывания

0 голосов
/ 25 октября 2018

Похоже, что использование jquery.js и jquery.maphilight.js было бы лучшим решением для моего проекта карты перехода, однако я не могу заставить его работать.Я пытаюсь следовать очень простому примеру, опубликованному здесь: https://davidlynch.org/projects/maphilight/docs/ "Простая демонстрация" в разделе "Демоверсии" показывает именно то, что я хочу сделать, и я думаю, что я точно следую коду, чтобы попытаться продублировать.Вот что я использую: 

<!DOCTYPE html>
<html>
<head>
<style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.maphilight.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('.map').maphilight();
    });   
</script>    
</style>
</head>
<body padding="0" margin="0">

<img class="map" src="township-range-test.jpg" width="1400" height="1050" usemap="#countymap">

<map name="countymap">
<area shape="rect" coords="329,530,504,714" title="29-13" href="javascript:alert('Navigate to ITORIAN');" data-maphilight='{"fillColor":"0000ff","fillOpacity":0.3}'>
<area shape="rect" coords="504,530,692,714" title="29-12" href="javascript:alert('Navigate to GOOGLE');">

</map>

</body>
</html>

У меня есть копия скриптов jquery.js и jquery.maphilight.js в том же каталоге, что и моя тестовая веб-страница:

https://www.sanjuantitle.com/sj-county-map-java.html

Если навести курсор мыши на квадрат «29N-13W», ссылка работает нормально, а также ссылка работает на квадрат справа от этого «29N-12W».Таким образом, единственное, что не работает, это «подсветка», которая прекрасно работает на демонстрационной странице, о которой я упоминал выше.

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

1 Ответ

0 голосов
/ 25 октября 2018

как то так: 

<img src="https://www.sanjuantitle.com/township-range-test.jpg" usemap="#image-map">

<map name="image-map">
    <area target="_parent" alt="here's google" title="here's google" href="google.com" coords="126,135,325,333" shape="rect">
    <area target="_parent" alt="here's more google" title="here's more google" href="google.com" coords="324,338,503,522" shape="rect">
    <area target="_parent" alt="here's stackoverflow" title="here's stackoverflow" href="stackoverflow.com" coords="89,867,506,529,680,856,884,524,1050,868,1109,518,1070,954,1127,1004" shape="poly">
    <area target="_parent" alt="yahoo?" title="yahoo?" href="yahoo.com" coords="809,236,344" shape="circle">
</map>
...