使用usemap

Question

麻烦很大，但是任务很简单。

我的背景图片上有小花。用户按下时，我需要执行一些操作。但是，根据屏幕的分辨率，花朵会放置在屏幕的完全不同的区域。

如何将“小花”与h：的悬停区域相连？

  <style>
   body {
    background-image: url(images/bg.jpg); 
   }
  </style>

    <body>
      <div>
        <h1><a href=#>press it where small flower is situated on an page</a></h1>
      </div>
    </body>

让我给你一个例子。因此，当按下橙色花朵时，我需要不同的Web链接；对于白色花朵，则需要一个蓝色的第一个和第三个不同的Web链接。如果是一个屏幕，我只是将其划分为一些虚拟方块，但是对于许多不同的分辨率，这样做绝对是垃圾：

Answer 1

使用usemap

步骤01

制作地图

使用Free Online Image Map Generator

步骤02

设置网址

步骤03

生成代码

<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="l35x9.jpg" usemap="#image-map">

<map name="image-map">
    <area target="_blank" alt="Yelow flower" title="Yelow flower" href="https://www.google.com/q=yelow+flower" coords="39,686,204,502" shape="rect">
    <area target="_blank" alt="Yelow flower" title="Yelow flower" href="https://www.google.com/q=yelow+flower" coords="981,533,789,390" shape="rect">
    <area target="_blank" alt="Pink+flower" title="Pink+flower" href="https://www.google.com/q=Pink+flower" coords="517,318,781,556" shape="rect">
    <area target="_blank" alt="light pink flower" title="light pink flower" href="https://www.google.com/q=light+pink+flower" coords="449,438,21,278" shape="rect">
</map>

步骤04：图片映射演示-无响应

Live demo 1 - View

Live demo 1 - Code - click preview after you open

<!DOCTYPE html>
<html>
   <head>
      <title>HTML area Tag</title>
   </head>

      <!-- Image Map Generated by http://www.image-map.net/ -->
        <img src="https://i.stack.imgur.com/l35x9.jpg" usemap="#image-map">
        <map name="image-map">
            <area target="_blank" alt="Yelow flower" title="Yelow flower" href="https://www.google.com?q=yelow+flower" coords="39,686,204,502" shape="rect">
            <area target="_blank" alt="Yelow flower" title="Yelow flower" href="https://www.google.com?q=yelow+flower" coords="981,533,789,390" shape="rect">
            <area target="_blank" alt="Pink+flower" title="Pink+flower" href="https://www.google.com?q=Pink+flower" coords="517,318,781,556" shape="rect">
            <area target="_blank" alt="light pink flower" title="light pink flower" href="https://www.google.com?q=light+pink+flower" coords="449,438,21,278" shape="rect">
        </map>
   </body>
</html>

步骤05图像地图演示-响应式

Live demo 2 - View

Live demo 2 - Code - click preview after you open

二手imageMapResizer + jquery + bootstrap

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      <!-- Image Map Generated by http://www.image-map.net/ -->
      <img src="https://i.stack.imgur.com/l35x9.jpg" usemap="#image-map1" class="img-fluid" >

    </div>
  </div>
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
     <div class="col-sm">
      <!-- Image Map Generated by http://www.image-map.net/ -->
      <img src="https://i.stack.imgur.com/l35x9.jpg" usemap="#image-map2" class="img-fluid" >

    </div>
  </div>

    <div class="row">
     <div class="col-sm">
      <!-- Image Map Generated by http://www.image-map.net/ -->
      <img src="https://i.stack.imgur.com/l35x9.jpg" usemap="#image-map3" class="img-fluid" >
    </div>
  </div>
</div>

        <map name="image-map1">
            <area target="_blank" alt="Yelow flower" title="Yelow flower" href="https://www.google.com?q=yelow+flower" coords="39,686,204,502" shape="rect">
            <area target="_blank" alt="Yelow flower" title="Yelow flower" href="https://www.google.com?q=yelow+flower" coords="981,533,789,390" shape="rect">
            <area target="_blank" alt="Pink+flower" title="Pink+flower" href="https://www.google.com?q=Pink+flower" coords="517,318,781,556" shape="rect">
            <area target="_blank" alt="light pink flower" title="light pink flower" href="https://www.google.com?q=light+pink+flower" coords="449,438,21,278" shape="rect">
        </map>
                <map name="image-map2">
            <area target="_blank" alt="Yelow flower" title="Yelow flower" href="https://www.google.com?q=yelow+flower" coords="39,686,204,502" shape="rect">
            <area target="_blank" alt="Yelow flower" title="Yelow flower" href="https://www.google.com?q=yelow+flower" coords="981,533,789,390" shape="rect">
            <area target="_blank" alt="Pink+flower" title="Pink+flower" href="https://www.google.com?q=Pink+flower" coords="517,318,781,556" shape="rect">
            <area target="_blank" alt="light pink flower" title="light pink flower" href="https://www.google.com?q=light+pink+flower" coords="449,438,21,278" shape="rect">
        </map>
         <map name="image-map3">
            <area target="_blank" alt="Yelow flower" title="Yelow flower" href="https://www.google.com?q=yelow+flower" coords="39,686,204,502" shape="rect">
            <area target="_blank" alt="Yelow flower" title="Yelow flower" href="https://www.google.com?q=yelow+flower" coords="981,533,789,390" shape="rect">
            <area target="_blank" alt="Pink+flower" title="Pink+flower" href="https://www.google.com?q=Pink+flower" coords="517,318,781,556" shape="rect">
            <area target="_blank" alt="light pink flower" title="light pink flower" href="https://www.google.com?q=light+pink+flower" coords="449,438,21,278" shape="rect">
        </map>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
 <script  src="https://rawgit.com/davidjbradshaw/imagemap-resizer/master/js/imageMapResizer.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    $('map').imageMapResize();
});
    </script>
  </body>
</html>




   </body>
</html>

地图上的更多信息

HTML img usemap Attribute

html - Responsive image map - Stack Overflow

stowball/jQuery-rwdImageMaps: Responsive Image Maps jQuery Plugin

Responsive Image Maps jQuery Plugin

davidjbradshaw/image-map-resizer: Responsive HTML Image Maps

html - How using usemap in div background url - Stack Overflow

How to create clickable areas in an image in HTML

Answer 2

仅当图像已加载到标签中时，此答案才有效。如果背景图像上有一朵小花并且四处走动，则您将无法识别用户何时通过标签单击花。您将需要更复杂的解决方案。

<a href="javascript:void(0);" onClick="alert('you clicked the image')">Image</a>

Answer 3

您需要手动执行。

定义花朵在图像中的位置，即单击时将触发事件的区域。
为body元素上的click事件设置事件处理程序。
当用户点击图片时获取position of the mouse。
将该位置与花朵的定义区域进行比较。

如何在网页上找到合适的位置进行点击？

3 个答案:

使用usemap

步骤01

步骤02

步骤03

步骤04：图片映射演示-无响应

步骤05图像地图演示-响应式

地图上的更多信息