Image map browser compatibility and imagemapster - javascript
I'm using ImageMapster to simply modify an image map on hover. However, I'm encountering some issues both with my image map and with the imagemapster plug in. My problems are:
1) Even though I've defined a height and width for my image, its size seems to change across browsers. In Chrome, the defined polygons are the perfect size, but in Firefox they are way too small.
2) For some reason, the ImageMapster plugin is not working in Chrome.
Below is my code:
<script type="text/javascript">
$(document).ready(function() {
$('#waterfall').mapster({
singleSelect: true,
clickNavigate: true,
fill: true,
fillColor: '000000',
fillOpacity: 0.5,
});
});
</script>
<div class="chartmap">
<img id="waterfall" src="waterfall_diagram/waterfall.png" width="650" height="72" usemap="#water" alt="Waterfall Methodology Map">
<map name="water">
<area shape="poly" coords="6,3,72,3,96,37,72,69,4,69,30,37,6,3" href="waterfall_project_initiation.html" alt="Project Initiation">
<area shape="poly" coords="75,3,165,3,188.5,37,164,69,74,69,100,37,75,3" href="waterfall_demand_management.html" alt="Demand Management">
<area shape="poly" coords="167,3,236.5,3,261,37,236.5,69,167,69,192,37,167,3" href="waterfall_definition.html" alt="Definition">
<area shape="poly" coords="240,3,326,3,350,37,326,69,240,69,264,37,240,3" href="#" alt="Requirements Analysis">
<area shape="poly" coords="329,3,380,3,405,37,380,69,329,69,353,37,329,3" href="#" alt="Design">
<area shape="poly" coords="384,3,430,3,455,37,430,69,384,69,408,37,384,3" href="#" alt="Build">
<area shape="poly" coords="434,3,483,3,509,37,484,69,433,69,458,37,434,3" href="#" alt="Test">
<area shape="poly" coords="487,3,557,3,583,37,558,69,488,69,511,37,487,3" href="#" alt="Deployment">
<area shape="poly" coords="561,3,621,3,646,37,621,69,561,69,586,37,561,3" href="#" alt="Closure">
</map>
</div>
Here's a demo: http://jsfiddle.net/t6K8X/5/
If you run it in Chrome, a click will cause outlines to come up around the image and you will see that the polygons are the correct size. However, nothing will occur on hovering like it should. In Firefox, hovering will cause the darker polygons to appear, but they will be way too small.
Any suggestions are much appreciated. Thank you!!!
In chrome ImageMapster is not loading. See the script errors:
Refused to execute script from
'https://raw.githubusercontent.com/jamietre/ImageMapster/
e08cd7ec24ffa9e6cbe628a98e8f14cac226a258/dist/jquery.imagemapster.min.js'
because its MIME type ('text/plain') is not executable,
and strict MIME type checking is enabled.
In Firefox, which apparently cares less about this stuff, it is loading, but the image map does not match the size at which you are displaying the image.
The image itself is 1024x72 pixels. You are displaying it at 650x72 pixels. ImageMapster, by default, assumes that the imagemap matches the native size of the image, and as a result, is scaling the map you provided down by about 40%.
There are several ways to fix this.
You can provide an imagemap that matches the native image, and let ImageMapster do its thing.
You can resize the image to match your existing imagemap & the display size.
You can disable the map scaling functionality with the scaleMap option:
http://jsfiddle.net/LgFn7/
scaleMap: false
Related
Clickable images on parallax
what I am trying to do is to create menu, instead of links, a clickable image. However, these images are parallax layers. How should I approach this ? Should the clickable images be on separate layers ? This is the image I am going to use. I would like that tower in background to take you to gallery, but at the same time, that layer, as mentioned will be parallax. Any ideas ?
It's probably a good idea if you create a separate parallax layer that contain absolute positioned links as a form of navigation. If you strictly want to map certain areas on the image as links, you might want to use a tag as in this example taken from here: <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun"> <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury"> <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus"> </map> The shape defines the type of area of each clickable area, the coords define the perimeter of said areas; the href attributes define where the page navigates if said area is clicked. To achieve this with a non-basic shape, you can set the type to "poly" and then set the polygon's each anchor point's coordinates as such: <area shape="poly" coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60" href="yellow.html" alt="Yellow star.">
Set hyperlinks to certain sections of the same picture? (HTML)
I want to have certain parts of the same picture hyperlinked to different webpages Is there a way I can do this with javascript coordinates or any other way?
You can do it with the HTML MAP tag, for example: <img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" width="512" height="512" alt="Logo" usemap="#logomap"/> <map name="logomap"> <area shape="rect" coords="0,0,256,512" href="javascript:alert('left')" alt="Left"> <area shape="rect" coords="256,0,512,512" href="javascript:alert('right')" alt="Right"> </map> Here's fiddle to try it out. Clicking on the left side of the image will show a Javascript alert that says left, on the right side it will show right.
Trigger click function in area of map
I am using map, code is below <map name="shotBoxLeftRight" onMouseOut="clearImage('two');"> <area shape="circle" coords="24,24,12" href="#HIT" title="HIT" alt="HIT" onClick="clickShotBox($(this).attr('alt'),'two');" onMouseOver="mouseOverShotBox($(this).attr('alt'),'two');"/> <area shape="poly" coords="48,0,24,24,48,48" href="#RIGHT" title="RIGHT" onClick="clickShotBox($(this).attr('alt'),'two');" alt="RIGHT" onMouseOver="mouseOverShotBox($(this).attr('alt'),'two');"/> <area shape="poly" coords="0,48,24,24,0,0" href="#LEFT" title="LEFT" alt="LEFT" onClick="clickShotBox($(this).attr('alt'),'two');" onMouseOver="mouseOverShotBox($(this).attr('alt'),'two');"/> </map> How i can trigger function "clickShotBox($(this).attr('alt'),'two')" in the area with parameter using Click Event. This map is using three areas - LEFT, RIGHT, and HIT. How i can track a hit of specific area with JavaScript or jQuery?
Firstly change this to: clickShotBox($(this).attr('alt'),'two') To: clickShotBox($(this).attr('alt','two')) Note: Avoid using inline javascript as it causes difficult in maintainability and it becomes tedious job for a new programmer to understand the code.
web page with java script not working in firefox
I am using a map on an image. Inside that map I got onmouseover effects for different areas. Also, I have a script that opens an image thumbnail when that area is clicked. This is the script I'm using: http://britobmarketing.com/thumbnailviewer.js The problem is it's not working in firefox. Not the onmouseover effect, not the thumbnail script. It's simply not working. Any recommendations? I really want to stick with java script and not get into Jquery! Thanks a lot!
Assuming that the page you are using this on is: http://britobmarketing.com/ Your problem seems to be with how you are defining your imagemap; not how the javascript is working Your imagemap setup: <map name="mainMap"> <a rel="thumbnail" href="images/contactUsPic.jpg"> <area onmouseout="document.pic1.src='images/mapPics.gif'" onmouseover="document.pic1.src='images/contactUs.gif'" title="Contact Us" shape="rect" coords="798,481,877,572"> </a> <area target="_blank" href="http://www.facebook.com/britoBMarketing" title="Facebook" shape="rect" coords="884,298,956,357"> </map> Playing around with Firebug's "inspect element", it seems that stripping out the target and title attributes seems to remove the problem. Also your main <area/>s are wrapped with anchors (<a>) which is probably preventing them from working. Try something like this: <map name="mainMap"> <area coords="191,138,487,233" shape="rect" href="" onmouseover="alert('hello')"> </map>
How do you JavaScript style area elements on mouseover?
I've got an image map with 20 area elements, only four shown below. I want to style each area so that a blue border appears whenever a user hovers over it - all the area shapes are rectangles. <map id="mymap" name="mymap"> <area shape="rect" coords="0,0,223,221" href="http://..." /> <area shape="rect" coords="226,0,448,221" href="http://..." /> <area shape="rect" coords="451,0,673,223" href="http://..." /> <area shape="rect" coords="677,0,1122,223" href="http://..." /> ... </map> I've tried using CSS to style each area, but it's not working. And I've tried to put an onmouseover=color() on the map element and call the following function, but that doesn't seem to be working either: function color() { var blueboxes = document.getElementsByTagName('area'); for(var i=0; i<blueboxes.length; i++) { blueboxes[i].style.border = 'solid blue 5px'; } }
mapper.js can be used for this. Mapper.js 2.4 allows you to add automatic area highlighting to image maps on your webpages (inc. export to SVG). It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+. On older browsers, it can use "jsgraphics" from Walter Zorn (if installed), else it'll degrade and your visitors won't notice a thing. Sample code from that website: Please note that everything below this line is his code and wording, not mine. Full attribution belongs to the link above. Setting Up Download mapper.js and include it into your webpage. <script type="text/javascript" src="wz_jsgraphics.js"></script> <script type="text/javascript" src="mapper.js"></script> "wz_jsgraphics.js" is copyright by Walter Zorn and not part of the distribution! Using It To get the highlighting just add a class="mapper" to an div surrounded image. <div> <img src="..." class="mapper" usemap="..." alt="..."> </div> To get individual area highlightings add one or more classes to the area. <map> ... <area shape="poly" class="noborder icolor00ff00" href="#" coords="..."> ... </map> To get multiple area selections add one or more id's to the areas rel attribute. <map> ... <area shape="poly" id="blue" rel="green,red" href="#" coords="..."> <area shape="poly" id="green" rel="red,blue" href="#" coords="..."> <area shape="poly" id="red" rel="green,blue" href="#" coords="..."> ... </map> To force a group of areas using the attributes of the initial area. <map> ... <area shape="rect" id="black" class="icolor000000 forcegroup" rel="green,red,blue" href="#" coords="..."> ... </map>
The area tag can't be styled like a normal anchor. I would use a different approach. You could apply your image to a div as the background-image and then position clickable elements over the div by using position: absolute. Take a look at this technique: http://www.alistapart.com/articles/cssmaps/
Can Raphaeljs helps? Have a look at this sample :)
Usually the approach I see is to build the imagemap itself out of different images in CSS. Here's a good example of this: http://ago.tanfa.co.uk/css/examples/europe-map.html