时间戳

首页 > 解决方案 > 如何在网页上找到合适的位置进行点击？

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

问题描述

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

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

我如何将“小花”与 a:href 的悬停区域连接起来？

  <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>

让我给你举个例子。因此，当按下橙色花时，我需要不同的 WEBLINKS 或用于白色花朵的蓝色 1 和 3 种不同的 web 链接，依此类推。如果它是一个屏幕，我只是将它划分为一些虚拟正方形，但对于许多不同的分辨率这样做绝对是垃圾：https://gessoemsp.org/wp-content/uploads/2013/08/lovely-small-flower-garden-plans.jpg

标签： javascripthtmlcss

解决方案

使用使用地图

步骤 01

制作地图

使用免费的在线图像地图生成器

在此处输入图像描述

步骤 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：图像地图演示 - 无响应

现场演示 1 - 查看

现场演示1-代码-打开后点击预览

在此处输入图像描述

在此处输入图像描述

<!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 图像地图演示 - 响应式

现场演示 2 - 查看

现场演示2-代码-打开后点击预览

使用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 属性

html - 响应式图像映射 - VoidCC

stowball/jQuery-rwdImageMaps: 响应式图像映射 jQuery 插件

响应式图像映射 jQuery 插件

davidjbradshaw/image-map-resizer：响应式 HTML 图像映射

html - 如何在 div 背景网址中使用 usemap - 代码日志

如何在 HTML 中的图像中创建可点击区域

推荐阅读