Fatal编程技术网
  • javascript/
  • Javascript 如何在网页上找到合适的位置进行点击？

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

javascript html css

Javascript 如何在网页上找到合适的位置进行点击？,javascript,html,css,Javascript,Html,Css,麻烦很大，但任务很简单 我有一个背景图像，上面有一朵小花。当用户按下按钮时，我需要执行一些操作。然而，根据屏幕的分辨率，花被放置在屏幕上完全不同的区域 如何将a:href的“小花”与悬停区连接起来？ <style> body { background-image: url(images/bg.jpg); } </style> <body> <div> <h1><a

麻烦很大，但任务很简单

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

如何将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>


身体{
背景图片：url（images/bg.jpg）；
}
让我给你举个例子。所以我需要不同的网络链接，当橙色的花被按下或蓝色的一个和白色的花三分之一不同的网络链接等。如果它是一个屏幕，我只需要将它划分为一些虚拟方块，但对于许多不同的分辨率来说，这样做绝对是垃圾：

只有在图像加载到标签中时，这个答案才会起作用。 如果背景图像中有一朵小花，并且它四处移动，那么当用户通过标签单击该花时，您将无法识别。 您将需要更复杂的解决方案

您需要手动操作

  • 定义花在图像中的位置，即单击时将触发事件的区域
  • 为body元素上的click事件设置事件处理程序
  • 当用户单击图像时获取
  • 将该位置与花的定义区域进行比较
    • 使用usemap 步骤01 用板条箱装一张地图

    使用

    步骤02 设置URL

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

    

    

    

    

    

    
HTML区域标记

    

    
使用++
    

    

    
你好，世界！
三列之一
三列之一
三列之一

    

    

    

    

    

    

    resolution\location无关紧要只要图像在A标签上，点击A标签时仍会触发A标签，但当前你的href不会触发任何东西
    你有花图像的示例吗？您想要图像识别吗？@vppy您可以尝试获取单击的像素的颜色，我认为three.js有/有类似的功能。感谢您的支持。但不幸的是，它不起作用，因为我只需要一张图片上的几个不同的Web链接。@vppy在您更新您的问题后，我意识到我的解决方案对您不起作用。是的，这正是我要找的。然而，我如何使许多不同的屏幕在许多不同的图像上相乘呢？我的意思是，在一些屏幕上，花在一个位置上，而在另一个屏幕分辨率下，它在另一个位置上。这不重要。你必须得到鼠标相对于图像的位置，而不是相对于屏幕的位置。但是对于400x600和2048×1080，鼠标的位置是一样的吗？对你来说也是一样：）完美！此链接与我所问的任务类型相同：感谢您的支持。感谢您在此分享此解决方案！你的解决方案真的很棒。这有助于使网格非常快速。不过，我已经尝试为它添加一种响应风格，以及从花卉中迁移过来的区域。因此，看起来需要一些响应图像的额外技巧。@vppy responsive Image Map Demo-

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

    

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