We Keep Coding

Html image hotspot switch image

I have an image hotspot on a map which swops the image out on hover however I would like keep the image open for longer and only have it close (and change back to the original) if the users moves their cursor outside of the new swapped image outline instead of the original hotspot, is something like this possible?
Herewith my code so far
<div class="mapwrap" style="text-align:center;"><img src="/dev/test/templates/jwd25template/images/map-blank.png" alt="wc" name="map" width="700" height="400" usemap="#mapMap" id="map" border="0" ></div>
<map name="mapMap">
<area shape="poly" coords="231,299,236,309,239,314,242,324,242,333,241,340,237,342,232,342,232,346,236,348,239,352,242,359,244,360,246,363,249,371,245,374,243,378,244,379,252,373,253,375,255,378,255,380,260,382,260,381,266,384,269,387,272,389,275,390,276,390,279,390,287,386,288,383,293,381,298,380,303,379,306,379,307,380,310,380,314,378,317,378,320,378,322,376,325,374,330,372,337,370,342,370,347,372,349,372,355,372,358,370,359,369,355,366,352,363,354,358,356,358,354,355,349,354,348,354,342,355,339,352,339,348,341,344,344,339,349,337,352,332,352,327,357,325,362,324,370,323,373,316,372,312,367,309,366,310,360,308,355,311,350,315,346,317,342,315,337,313,331,310,327,307,326,314,325,318,323,322,321,324,314,324,309,327,306,330,304,334,303,335,300,337,297,339,294,341,291,341,288,341,283,339,280,334,280,329,283,325,283,324,277,328,271,331,269,334,269,335,266,327,269,321,266,319,264,317,257,315,257,310,256,302,255,296,255,292,254,286,246,281,239,280,240,285,233,287,231,293,229,296,229,296" href="takke/western-cape" target="_parent" alt="WC" onMouseOver="MM_swapImage('map','','/dev/test/templates/jwd25template/images/map-WC-2.png',1)" onMouseOut="MM_swapImgRestore('map','','/dev/test/templates/jwd25template/images/map-blank.png',1)"></map>
I tried to add a onMouseOut url but I realise that wont work.
Trying to wrap my head around it, any ideas would be much appreciated :)

You can do this with CSS
HTML CODE:
<map id="big_map_area">
<area shape="poly" id="map_hover" coords="231,299,2..." href="takke/western-cape" target="_parent" alt="WC">
</map>
CSS CODE:
#map_hover {
opacity:0.0;
}
JQUERY CODE:
$("#map_hover").mouseover(function () {
this.css('opacity', '1.0');
});
$("#big_map_area").mouseout(function () {
$("#map_hover").css('opacity', '0.0');
});
So you show your image when mouse enter in small poligon that is inside tha map, and image swap when you leave the big map container.
Now it should work.

Image map browser compatibility and imagemapster

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

Fancybox Imagemap Gallery

What I want is an image which after been clicked opens a gallery. I'm using FancyBox, and I want Thumbnail Helper(with image map)
It's like this: http://jsfiddle.net/ffZ7B/343/
When you click the left weel, It opens the gallery, but it dosn't show the thumbnails.
I tried this: http://jsfiddle.net/ffZ7B/344/
Does anyone knows how to do this?
Thank you!

The Thumbnail Helper is a totally NEW feature of fancybox v2.x and non-existing in previous versions. You are using fancybox v1.3.4 in your jsfiddle.
If you want to use the Thumbnail Helper, you have to upgrade to Fancybox v2.x, then use this code:
HTML :
<img src="images/imageMap.jpg" usemap="#map" />
<map name="map" id="map">
<area class="fancybox" href="images/01.jpg" data-fancybox-group="gallery" shape="rect" coords="46,38,201,154" title="01" />
<area class="fancybox" href="images/02.jpg" data-fancybox-group="gallery" shape="rect" coords="295,35,388,83" title="02" />
<area class="fancybox" href="images/03.jpg" data-fancybox-group="gallery" shape="rect" coords="27,166,134,293" title="03" />
</map>
JS :
$(document).ready(function() {
$("area.fancybox").fancybox({
helpers: {
thumbs : {
width : 50,
height : 50
}
}
}); // fancybox
}); // ready
NOTICE that we used the data-fancybox-group="gallery" attribute in order to set the gallery elements (rel won't work with the area tag as it used to work with v1.3.4.) You may need to set a HTML5 DOCTYPE though for validation purposes.
UPDATE : See working DEMO here - NOTE (Jan 15, 2013) this demo will fail because is using jQuery v1.9.0. Check THIS for further reference. You could reproduce a working demo with jQuery v1.8.3 though.

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>

Getting jQuery tooltip to have a tip start as active when page first loads

I'm using the jQuery tooltip plug in on an image map. When a part of the image is hovered over, the tip appears. This is activated with the following code:
$(function() {
$("map > area").tooltip({ positionLeft: true });
});
The html for the image map is set up like this:
<map name="Map">
<area shape="rect" coords="36,466,64,507" href="link.aspx" alt="Alt Title" title="ToolTip Title" />
<area shape="rect" coords="36,466,64,507" href="link.aspx" alt="Alt Title2" title="ToolTip Title2" />
</map>
I'd like to have one of the tool tips be in the active (or hovered) state when the page first loads. I'm having a hard time figuring out how to do this, or if it is even possible.
Has anybody used this plugin and have any ideas of how I could implement this feature?

When the page is finished loading you can trigger the mouseover.
$("[name='Map']").trigger("mouseover");

You could focus mouse on preferable part of the map or trigger event (probably hover) that activates tooltip.