我正在尝试在包含图像映射的图像上添加箭头。它使用mapify来使图像映射响应。
我已经尝试在我在本页面上想到的每个地方实现代码：https://sporedev.ro/pleiade/lobby.html。我们的想法是用箭头替换你在图片中看到的箭头
我测试过，箭头在图像上工作。这是你可以检查它应该如何工作的小提琴。
https://jsfiddle.net/spored3v/7557heze/4/
页面代码包含许多处理不同分辨率的JS，因此大多数HTML代码都包含在switch case中。代码的另一部分是为映射元素创建一些高亮效果（尚未突出显示任何元素）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Bare - Start Bootstrap Template</title>
<!-- Bootstrap Core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Normalize CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" integrity="sha256-HxaKz5E/eBbvhGMNwhWRPrAR9i/lG1JeT4mD6hCQ7s4=" crossorigin="anonymous" />
<!-- Mapify CSS -->
<link rel="stylesheet" type="text/css" href="css\jquery.mapify.css">
<!-- Project's Custom CSS -->
<link href="css/style.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Page Content -->
<!--<img src="images/schita-usi-1.jpg" id="fullheight" style="height:100vh; width: 100%">
<a href="#">
<div class="index-page-3">
</div>
</a>-->
<div id="black-cover"></div>
<a href="https://sporedev.ro" target="_blank"><div href="#" class="arrow arrow-right active animate-right-to-left"><span class="room-desc">Decanat</span></div></a>
<div id="resp-background-img-full-height">
</div>
<audio autoplay>
<source src="lobby.mp3" type="audio/mpeg">
</audio>
<!-- /.container -->
<!-- jQuery Version 1.10.2 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Detect the browser's aspect ratio and serve different HTML -->
<script type="text/javascript">
function gcd(a, b) {
if (b > a) {
temp = a;
a = b;
b = temp
}
while (b != 0) {
m = a % b;
a = b;
b = m;
}
return a;
}
/* ratio is to get the gcd and divide each component by the gcd, then return a string with the typical colon-separated value */
function ratio(x, y) {
c = gcd(x, y);
return "" + (x / c) + ":" + (y / c)
}
var ratio = ratio(screen.width, screen.height)
var imgContainer = document.querySelector('#resp-background-img-full-height')
switch (ratio) {
// case "16:9":
// imgContainer.innerHTML = '<img src="images/test-rata-de-aspect.jpg">'
// break
// case "4:3":
// imgContainer.innerHTML = '<img src="images/schita-usi-2.jpg">'
// break
default:
var htmlcode = '<img src="images/Lobby.jpg" usemap="#map" class="map full-img" width="1920px" height="1080px">';
htmlcode += '<map name="map" id="map"">';
htmlcode += '<area shape="poly" coords="1301,992,1346,996,1354,945,1308,941" href="#" alt="contact">';
htmlcode += '<area shape="poly" coords="1356,995,1404,999,1416,948,1368,946" href="#" alt="setari">';
htmlcode += '<area shape="poly" coords="1420,1001,1471,1006,1477,953,1424,951" href="#" alt="login">';
htmlcode += '<area shape="poly" coords="1354,935,1365,883,1320,881,1310,933" href="index.html" alt="home">';
htmlcode += '<area shape="poly" coords="1370,933,1417,937,1428,885,1381,883" href="lobby.html" alt="lobby">';
htmlcode += '<area shape="poly" coords="1440,883,1493,885,1488,941,1432,939" href="hol.html" alt="programe">';
htmlcode += '<area shape="poly" coords="1324,866,1373,866,1382,818,1335,818" href="#" alt="back" onclick="window.history.back();">';
htmlcode += '<area shape="poly" coords="1382,868,1433,869,1444,816,1392,817" href="#" alt="descriere">';
htmlcode += '<area shape="poly" coords="1446,868,1492,871,1501,818,1452,817" href="#" alt="harta">';
htmlcode += '</map>';
htmlcode += '<a href="https://sporedev.ro" target="_blank"><div href="#" class="arrow arrow-right active animate-right-to-left"><span class="room-desc">Decanat</span></div></a>';
imgContainer.innerHTML = htmlcode;
break
}
</script>
<!-- Load Mapify -->
<script type="text/javascript" src="js/jquery.mapify.js"></script>
<!-- Mapify script -->
<script type="text/javascript">
$("img[usemap]").mapify();
</script>
<!-- Load Zoom -->
<script type="text/javascript" src="js/zoom.js"></script>
<script>
// Safari hack for reloading page when back button is pressed
// https://stackoverflow.com/questions/8788802/prevent-safari-loading-from-cache-when-back-button-is-clicked
$(window).bind("pageshow", function(event) {
if (event.originalEvent.persisted) {
window.location.reload()
}
});
$( document ).ready(function() {
$("#black-cover").fadeOut(2000, "swing");
})
function zoomTo(polygonId) {
zoom.to({
element: $(".mapify-polygon")[polygonId],
padding: 100,
callback: function() {
$("#resp-background-img-full-height").fadeOut(1500, "linear", function() {
window.location.href = 'hol.html';
})
}
});
}
</script>
<script>
var timeout;
function blinkIn() {
timeout = setTimeout(function() {
$("#map area").filter(':eq(0), :eq(1), :eq(2), :eq(3), :eq(4), :eq(5), :eq(6), :eq(7), :eq(8), :eq(9), :eq(10), :eq(11), :eq(12), :eq(13), :eq(14)').trigger("mouseenter.mapify").trigger("focus.mapify").trigger("touchend.mapify");
$(".mapify-svg polygon").filter(':eq(0), :eq(1), :eq(2), :eq(3), :eq(4), :eq(5), :eq(6), :eq(7), :eq(8), :eq(9), :eq(10), :eq(11), :eq(12), :eq(13), :eq(14)').css("stroke", "#FFF").css('opacity', '0.3').css('stroke-dasharray', '50').css('stroke-dashoffset', '100').css('animation', 'dash 1.5s linear forwards');
blinkOut();
}, 3000);
}
function blinkOut() {
setTimeout(function() {
$("#map area").filter(':eq(0), :eq(1), :eq(2), :eq(3), :eq(4), :eq(5), :eq(6), :eq(7), :eq(8), :eq(9), :eq(10), :eq(11), :eq(12), :eq(13), :eq(14)').trigger('mouseout.mapify');
$(".mapify-svg polygon").filter(':eq(0), :eq(1), :eq(2), :eq(3), :eq(4), :eq(5), :eq(6), :eq(7), :eq(8), :eq(9), :eq(10), :eq(11), :eq(12), :eq(13), :eq(14)').css("stroke", "").css('opacity', '').css('stroke-dasharray', '').css('stroke-dashoffset', '').css('animation', '');;
blinkIn();
}, 1500);
}
blinkIn();
$(document).click(function(e) { clearTimeout(timeout); blinkIn(); });
</script>
</body>
</html>
我在SO和其他网站上做了一些研究，尝试了一些关于定位的指南，但我认为问题不在于我试图定位元素的方式，而是在页面上运行的JS中。
创建一个测试页面，这进一步证明了我的理论。
我的问题是：如何让元素出现在响应式图像映射的顶部？
答案 0 :(得分：0)
这不是JS相关的问题，我只是没有注意到图像使用了z-index。
我将一个z-index应用于div，一切正常。
有关z-index的更多信息，您可以查看：https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
抱歉因为基本错误而浪费时间。