分隔图像以执行不同的操作
分隔图像以执行不同的操作
提问于 2018-01-15 12:55:57
我在页面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>谢谢。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-01-15 13:11:29
要确保要将图像更改为图像映射，请执行以下操作。显然，首先要做的是要么使用像这个站点https://www.image-map.net/这样的在线图像地图生成器，要么编写图像地图的代码。
例如
<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>`根据您想要在图像上单击的部分，您可以在地图标签内配置这些形状的位置，并定义hrefs。
之后，您可以将图像上的这些位置绑定到javascript中。
$(document).ready(function(){
$("a[href['sun.htm']").click(function(){
console.log("image right position has been clicked");
});
});Stack Overflow用户
发布于 2018-01-15 13:06:28
您可以使用容器中的背景图像进行添加，在容器中可以使用没有背景的元素，这将模拟一个部分.就像这个例子
var divs=elementList = document.querySelectorAll('.container div');
divs.forEach(function(element){
element.addEventListener("click", function( event ) {
console.log(event.target.getAttribute("item"))
});
});.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;
}<div class="container" style="">
<div item="1"></div>
<div item="2"></div>
<div item="3"></div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48263473
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号