Question

我在页面html中使用图像全屏，我想将这个图像分成不同的部分并进行不同的操作，例如打开弹出窗口。例如：如果我点击右上角的图像，这部分必须打开一个弹出窗口。知道如何处理吗？

其实我有这个：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <title>Parallax Template - Materialize</title>

  <!-- CSS  -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
  <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body>

    <img src="background1.jpg" alt="Unsplashed background img 1">


  <!--  Scripts-->
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="js/materialize.js"></script>
  <script src="js/init.js"></script>

  </body>
</html>

谢谢。

Answer 1

你可以在容器中使用背景图像进行添加，在容器内部可以使用没有背景的元素，这将模拟一个部分......就像示例

＆＃13;

var divs=elementList = document.querySelectorAll('.container div');

divs.forEach(function(element){
  element.addEventListener("click", function( event ) {
    console.log(event.target.getAttribute("item"))
  });
});

＆＃13;

.container{
  background:url('http://via.placeholder.com/350x150');
  background-repeat:none;
  border:1px solid blue;
}
.container div{
  display:inline-block;
  width:100px;
  height:100px;
  border:1px solid red;  
}

＆＃13;

<div class="container" style="">
  <div item="1"></div>
  <div item="2"></div>
  <div item="3"></div>
</div>

＆＃13;

Answer 2

确保要将图像更改为图像映射。首先要做的就是使用像这个网站https://www.image-map.net/这样的在线图像映射生成器，这将非常简单，或者为imagemap编写代码

例如

    <img src="planets.gif" width="145" height="126" alt="Planets" 
         usemap="#planetmap">

    <map name="mymap">
      <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
      <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
      <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
    </map>`

根据您想要在图像上单击的部分，您可以在地图标记内以形状形式配置这些位置并定义href。

之后，那时你可以用javascript

绑定图像上的这些位置

$(document).ready(function(){

     $("a[href['sun.htm']").click(function(){

           console.log("image right position has been clicked");

     });

 });

分离图像以执行不同的操作

2 个答案: