Question

我的区域/地图不起作用。请帮忙。我尝试了多次故障排除，但没有任何工作。

我不是很擅长图像地图所以所有的帮助将不胜感激。非常感谢提前!!

以下是代码：

<html>
<head>
<title>Plexmote</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-startup-image" href="load.jpg">
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="load548.jpg">
<link rel="apple-touch-icon-precomposed" href="icon.png">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var volume = 50;            
        $("area").click(function() {
            if (this.id.indexOf("volume") === 0) {
                if (this.id == "volumeUp") {
                    if (volume < 100) {volume += 10;}
                } else if (this.id == "volumeDown") {
                    if (volume > 0) {volume -= 10;}
                }
                jQuery(this).attr("cmd","application/setVolume?level=" + volume);
            }                                   
            var server = $("#server").val();
            var client = $("#client").val();            
            var baseUrl = "http://" + server + ":32400/system/players/" + client + "/";         
            var command = jQuery(this).attr('cmd');
            $.get(baseUrl + command).error(function() {
                alert('Plex is not responding, troubleshooting tips:\n1) Veify server and client addresses\n2) Check network connectivity\n3) Reboot Plex Home Theater\n4) Reboot Plex Media Server');
            });
        });
    });
</script>
</head>
<body>
<div id="serverinfo" style="display:none;position:absolute;top:0px;left:0px;width:100%;height:100%;background-color:RGB(0,0,0);">
<center>
<form>
  <input id="server" type="text" placeholder="Server IP"><br />
  <input id="client" type="text" placeholder="Client IP">
</form>
<button onClick="$( '#serverinfo' ).fadeToggle('fast');">Close</button>
</center>
</div>
<img src="interface.png" usemap="#buttonmap" style="position: absolute; top:0px; left:0px;z-index:-1;">
<map name='buttonmap' id="buttonmap">
<area title="server" onClick="$( '#serverinf0' ).fadeToggle('fast');" shape="rect" coords="138,7,182,48">
<area title="back" cmd="navigation/back" shape="rect" coords="94,55,138,96">
<area title="up" cmd="navigation/moveUp" shape="rect" coords="140,57,184,98">
<area title="menu" cmd="navigation/contextMenu" shape="rect" coords="187,57,231,98">
<area title="left" cmd="navigation/moveLeft" shape="rect" coords="94,102,138,143">
<area title="ok" cmd="navigation/select" shape="rect" coords="140,104,184,145">
<area title="right" cmd="navigation/moveRight" shape="rect" coords="188,103,232,144">
<area title="voldwn" cmd="navigation/setVolume?level=50" shape="rect" coords="95,147,139,188">
<area title="down" cmd="navigation/moveDown" shape="rect" coords="142,148,186,189">
<area title="volup" cmd="navigation/setVolume?level=50" shape="rect" coords="186,147,230,188">
<area title="rew" cmd="playback/stepBack" shape="rect" coords="48,320,120,370">
<area title="play" cmd="playback/play" shape="rect" coords="124,319,196,369">
<area title="fwd" cmd="playback/stepForward" shape="rect" coords="200,320,272,370">
<area title="rewlg" cmd="playback/bigStepBack" shape="rect" coords="49,374,121,424">
<area title="stop" cmd="playback/stop" shape="rect" coords="124,371.7272644042969,196,421.7272644042969">
<area title="fwdlg" cmd="playback/bigStepForward" shape="rect" coords="200,370.7272644042969,272,420.7272644042969">
</map>
</body>
</html>

Answer 1

我也不太喜欢地图，但有可能你说它shape="rect" coords="95,147,139,188"，而其他地方你设置了4个以上的坐标，这可能会导致问题，因为矩形或矩形只应该有4个坐标。这是我最好的猜测。尝试使用可能有用的shape="poly"之类的内容

Answer 2

删除图片样式中的x-layer:-1;。如果图片需要低于'#serverinfo'，请将样式设置为z-index:1;

我的地图不起作用

2 个答案: