0

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

我不太擅长图像映射，因此将不胜感激。提前谢谢了！！

这是代码：

<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>
4

2 回答 2

0

我对地图也不是很好，但是有没有可能在你说shape="rect" coords="95,147,139,188"的地方，以及你设置超过 4 个坐标的其他地方，它可能会导致问题，因为矩形或矩形只是应该有4个坐标。这是我最好的猜测。尝试使用类似的东西shape="poly"可能会奏效

于 2014-11-19T01:30:30.203 回答
0

删除x-layer:-1;图像的样式。如果图像需要低于“#serverinfo”，则将其中的样式设置为z-index:1;

于 2014-11-19T18:34:33.093 回答