Databases
StackOverflow2013
Postsdbo
POjQuery plugin imagemapster isn't doing anything
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery plugin imagemapster isn't doing anything
    text
    copied!<p>I'm still relatively new to javascript and jQuery so keep in mind that it may be an obvious solution that I don't see.</p> <p>I referenced jQuery and it works fine for other things. Maybe there's something wrong with the imagemapster reference? I downloaded it <a href="http://www.outsharked.com/imagemapster/" rel="nofollow">here</a> and I referenced it like this. I put the "imagemapster.min.js" in as well, but it doesn't work when both are in nor does it work when either of these are used by themselves.</p> <pre><code>&lt;script type="text/javascript" src="../SiteAssets/css/jquery.imagemapster.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="../SiteAssets/css/jquery.imagemapster.min.js"&gt;&lt;/script&gt; </code></pre> <p>I read the documentation and followed it almost exactly (see below), but it does literally nothing to the highlighting. Instead, it messes up their positioning a little bit which ruins the page, which makes no sense because mapster should have nothing to do with positioning. The clickable areas have also been shifted up and out of position. It doesn't even give any errors; the code just passes through and nothing happens except for what I said. And yes, the image maps I'm trying to highlight are fully functional and #downstairs, #upstairs, and #offices are indeed IDs of image tags like they're supposed to be.</p> <pre><code>$(document).ready(function() { $('#downstairs').mapster({ fillOpacity: 0.5, mapKey: 'alt', isSelectable: false, render_highlight: { fillColor: '2aff00' } }); $('#upstairs').mapster({ fillOpacity: 0.5, mapKey: 'alt', isSelectable: false, render_highlight: { fillColor: '2aff00' } }); $('#offices').mapster({ fillOpacity: 0.5, mapKey: 'alt', isSelectable: false, render_highlight: { fillColor: '2aff00' } }); }); </code></pre> <p>This is the html for the images and the maps. All three of them use this format.</p> <pre><code>&lt;div style="position:static;left:0px;top:0px"&gt; &lt;img id="downstairs" alt="downstairs" class="map" usemap="#downmap" style="visibility:visible;z-index:3; left: 10px; top: 54px;" src="sourceHere" width="1000" /&gt; &lt;map name="downmap" id="downmap"&gt; &lt;!-- There is a large list of areas here that follow this format--&gt; &lt;area title="Portable 1" onclick="somefunction" coords="198,81,223,117" /&gt; &lt;/map&gt; &lt;/div&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload