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

Немного новичка в вопросе, и с Google не так уж и много.

У меня есть изображение, которое представляет собой просто горизонтальную панель инструментов. В конечном итоге я хочу нарисовать прямоугольник rgba поверх области, на которую наведет курсор мыши.

Но я не могу заставить это сделать многое здесь. Кажется, элементы области работают немного по-другому. Как мне сделать это в чистом JavaScript, пожалуйста. Нет JQuery.

<html>
<body>
<script>
  function tellname(txt){
    document.getElementById("info").innerHTML=txt;
  }
</script>
<style>
  .highlight:hover {
      outline: 1px solid orange;
  }
</style>
    <img src="toolbar.png" usemap="#toolbar" />
    <map name="#toolbar">
        <area class="highlight" shape="rect" coords="0,0,25,25" onclick="tellname('Centre')"/>
        <area class="highlight" shape="rect" coords="25,0,50,25" onclick="tellname('Reset Camera')" />
        <area class="highlight" shape="rect" coords="50,0,75,25" onclick="tellname('Camera Preset')" />
        <area class="highlight" shape="rect" coords="95,0,120,25" onclick="tellname('Stop Render')" />
        <area class="highlight" shape="rect" coords="120,0,145,25" onclick="tellname('Restart Render')" />
        <area class="highlight" shape="rect" coords="160,0,185,25" onclick="tellname('Pause Render')" />
        <area class="highlight" shape="rect" coords="190,0,205,25" onclick="tellname('Start Render')" />
    </map>
    <div id='info'</div>
</body>
</html>
Источник

1 ответ

<map name=#toolbar"> должно быть <map name="toolbar">,

Тем не менее, я играл с картой и областью некоторое время, но не смог заставить ее работать так, как вам нужно. Существует некоторая проблема с настройкой наведения на <map> а также <area>, Может быть, эксперт может объяснить, почему.

(1) Вот альтернатива, используя отдельные изображения для ваших ссылок:

<html>
<head>
<style type="text/css">
    img:hover {
    border:2px solid red; 
}
</style>

</head>
<body>
<a href="page1.html"><img src="img_1.jpg" /></a>
<a href="page2.html"><img src="img_2.jpg" /></a>
<a href="page3.html"><img src="img_3.jpg" /></a>
</body>
</html>

(2) Или см. Этот пост: создайте рамку для областей на картах изображений, которая включает ссылку на ImageMapster, очень гибкую библиотеку для создания карт изображений многих типов.

Я использую ImageMapster для динамического создания карт изображений разнесенных диаграмм частей. Для каждого изображения его связанная карта создается из координат карты в базе данных. Когда я прокручиваю разделы изображения, детали отображаемой области появляются в текстовом поле, как вы хотите сделать с функцией tellname(txt),

Источник
Другие вопросы по тегам