My area/map is not working. Please help. I've tried troubleshooting many times, but nothing is working.
I am not very good at image maps so all help will be appreciated. Many thanks in advance!!
Here is the code:
<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>
Remove
x-layer:-1;in the style of the image. If the image needs to be below the '#serverinfo' set the style in there asz-index:1;