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.

change clickable coordinate image to css

Im trying to make the background image of my website clickable in certain coordinates. I dont have the ability of editing the main template as the script im using is prebuilt to add custom code into it (phpfox).
The problem i have is the code i am using is html and i need it to be css
<img url="../image/layout/bg.png" width="1920" height="1080" border="0" usemap="#Map" />
<map name="Map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:ImithRian -->
<area shape="rect" coords="43,36,174,803" href="http://www.battlefieldsquad.com/" />
<area shape="rect" coords="1469,99,1866,225" href="http://www.battlefieldsquad.com/index.php?do=/battlefield4/" />
<area shape="rect" coords="1564,457,1793,619" href="http://www.battlefieldsquad.com/index.php?do=/pages/3/" />
<area shape="rect" coords="1597,657,1773,878" href="http://www.esl.eu/eu/team/7931638/" />
</map>
Any suggestions ?

I can't think of a pure css-Solution. But if you want to put the image into a div as background,
you can get the position of a click relativ to your site via jQuery
HTML:
<div class="background">
Some content and a background image
</div>
Javascript:
$('.background').click(function(event){
console.log(event.pageX + " " + event.pageY);
//at some coordinate do something (e.g. go to another site)
});

As far as I know, the coordinates for an image map is just an html feature, not available as a style rule in css. What you can do if you want to change the values of the coordinates without having access to the html is reaching the element via javascript and performing the modifications then. I can provide you that code if you are interested in doing it that way.
This is the way you can tackle that with javascript (THE FIDDLE HERE)
Let's say you have a world map and you have defined a clickable link for the continents: North America, South America, Europe and Asia, Africa.
<img src="http://3.bp.blogspot.com/--Qn8gNCWlUc/UVhKBl5o5aI/AAAAAAAACYI/wMLgckCYQIs/s1600/Screen+Shot+2013-03-31+at+12.59.10+AM.png" border="0" usemap="#Map" />
<map name="Map">
<area shape="rect" title="north america" coords="43,36,174,803" href="http://www.battlefieldsquad.com/" border="2" />
<area shape="rect" title="south america" coords="1469,99,1866,225" href="http://www.battlefieldsquad.com/index.php?do=/battlefield4/" />
<area shape="rect" title="eurasia" coords="1564,457,1793,619" href="http://www.battlefieldsquad.com/index.php?do=/pages/3/" />
<area shape="rect" title="africa" coords="1597,657,1773,878" href="http://www.esl.eu/eu/team/7931638/" />
</map>
<br /><br />
<button type="button" id="fixer">Fix this mess!</button>
When you hover the mouse on the map you notice that just the shape for North America is there and in a wrong position (a tip shows up after a second).
Bellow the map you have a button to fix that. That button execute this code:
document.getElementById("fixer").onclick=function(){
var coords = ["70,100,400,320", "320,350,425,580", "510,100,1050,300", "480,300,680,500"];
var mapper = document.getElementsByTagName("area");
for(var i = 0, j = mapper.length;i < j;i++){
mapper[i].coords = coords[i];
}
}
And once you press the button you can hover the mouse then on the continents and check they are showing up now and in the right position, because the js code changes the coordinates of each shape:
var coords = ["70,100,400,320", "320,350,425,580", "510,100,1050,300", "480,300,680,500"];
That's an array with the right coordinates for each area shape from top to bottom.
The rest of the code is to set up the coordinates. You just have to edit the above line to meet your own coordinates.
I hope it helps. And by the way, if you are finally going to use this approach, you might want to add the tag javascript to your question. Regards.

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.

Jump to a specific location on an image map

I have a big image with an HTML <map>, and I want to jump to a particular region on that image. I have used the <area /> tag for marking the locations
Take a look at the code :
<img src="demo_files/k3.png" id="target" alt="Map" usemap="#powerpuffgirls" />
<map name="powerpuffgirls">
<area shape="rect" coords="624,137,671,167" href="#" id="ppg" title="The Powerpuff Girls" alt="The Powerpuff Girls" />
<area shape="rect" coords="99,2685,161,2723" href="#" name="ppg1" title="The Powerpuff Gidrls" alt="The Powerpuff sGirls" />
</map>
however, I am unable to move to any region on the image.
Edit: Any other approach for moving to an image's particular region would be great !!

Try this link
$('a.links').click(function(e){
e.preventDefault();
var coor = $(this.hash).attr('coords').split(',');
$('html,body').scrollTo(coor[0], coor[1]);
});
i have used the plugin scrollTo
the script will prevent default function of a tag and will get the coordinates attribute from the area tag with the id from the href attribute and calculate the positions and scroll to that position

Check this demo i have created...
Try to navigate the areas by id...
<div>Go to one Go to two</div>
You have to play with the area coordinates in it...
http://jsfiddle.net/D9W6C/

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.