程序员经验分享-hwhale

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

2024-01-19

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

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

如何将“小花”与 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>

Let me give you an example. So I need DIFFERENT WEBLINKS when orange flower was pressed or a blue one and third different weblink for white flowers and so on. If it is one screen I just divide it for some virtual squares but it absolutely rubbish to do so for many different resolutions: https://gessoemsp.org/wp-content/uploads/2013/08/lovely-small-flower-garden-plans.jpg


使用使用地图

Step 01

创建地图

use 免费在线图像地图生成器 https://www.image-map.net/

Step 02

set urls

Step 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 - 查看 https://www.tutorialspoint.com/cg/assets/ZGG0Oz.php

现场演示1-代码-打开后点击预览 http://tpcg.io/ZGG0Oz 

<!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 - 查看 https://www.tutorialspoint.com/cg/assets/yWh7N5.php

现场演示2-代码-打开后点击预览 http://tpcg.io/yWh7N5

used 图像映射调整器 https://github.com/davidjbradshaw/image-map-resizer + jquery https://jquery.com/ + 引导程序 http://getbootstrap.com 

<!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 属性 https://www.w3schools.com/tags/att_img_usemap.asp

html - 响应式图像地图 - VoidCC https://stackoverflow.com/questions/7844399/responsive-image-map

stowball/jQuery-rwdImageMaps：响应式图像映射 jQuery 插件 https://github.com/stowball/jQuery-rwdImageMaps

响应式图像映射 jQuery 插件 http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html

davidjbradshaw/image-map-resizer：响应式 HTML 图像地图 https://github.com/davidjbradshaw/image-map-resizer

html - 如何在div背景url中使用usemap - VoidCC https://stackoverflow.com/questions/7594479/how-using-usemap-in-div-background-url

如何在 HTML 图像中创建可点击区域 https://www.tutorialspoint.com/How-to-create-clickable-areas-in-an-image-in-HTML

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

html

css

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

随机推荐

热门标签