We Keep Coding

Clickable Marked points on an Image

first check out the image for a better understanding of what I want to do. The red points on the picture will be clickable. When you click on them a description will pop up.
I saw the use of HTML <area> tag and a JS function with image coordinates.
Is there any ready made library available for this ?

You're best off making use of an <img> and the <map> element. From here you can set <area> children with a circular shape, and specify the the co-ordinates. These are in the format x,y from the top-left pixel. With a circle, the third value is the diameter. You can link these off, or attach an event handler to display a popup:
img {
height: 100%;
}
area {
fill: blue;
}
<img src="https://i.stack.imgur.com/q9ZX6.png" usemap="#housemap">
<map name="housemap">
<area shape="circle" coords="0,0,82,126" href="1.htm" alt="1">
<area shape="circle" coords="190,58,30" href="2.htm" alt="2">
<area shape="circle" coords="90,58,30" href="3.htm" alt="3">
<area shape="circle" coords="90,58,30" href="4.htm" alt="4">
</map>

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.">

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.

JQuery using the click event handler. How do I keep all the elements from not show only have one element show one at time?

In jquery using the click event handler. How do I keep all the elements from not show but only have one element show one at time to what is related when I click on it?.
My example page: http://chrism.net46.net/final-ff-IX/summoners-paintings.html
Using a image map. I have ten "hot spots", each a monster painting and 10 divs with information about each painting. When I click a hot spot I just a lightbox with info about that page segment to open.
I have used jquery plugins like jquery tools with success, but I'd like to learn how without using a plugin.
Anyway here is a video example what I mean starting at 0:15 http://www.youtube.com/watch?v=7628mBPumM4 hope this is more clear.
Here http://jsfiddle.net/muThj/1/ without the image map, though. Using it to host the code review just in case the above link site goes down due to traffic.
<img src="wall-writings.jpg" alt="Eidolon mural paintings of Curbuncle, Madeen, Ramuh, Shiva, Ark, Ifrit, Leviathan, Phoenix, Fenrir, Atomos" usemap="#eidolonpaintings">
<map name="eidolonpaintings">
<area shape="poly" coords="287,230,301,244,319,251,329,252,340,252,347,252,338,246,336,237,344,233,344,229,345,225,356,227,362,229,376,230,385,235,393,242,396,250,403,254,408,248,414,239,419,231,424,224,429,222,433,233,432,248,428,263,422,272,422,279,410,286,396,288,388,291,385,293,390,296,393,305,396,316,400,318,407,320,414,325,416,332,420,343,415,352,414,360,408,369,401,374,405,387,409,399,407,409,408,412,402,414,368,365,357,374,358,390,359,403,354,409,343,415,337,416,323,370,294,362,268,327,264,274,287,230" >
<area shape="poly" coords="628,253,617,222,624,172,630,149,647,109,667,81,681,66,694,53,720,49,756,48,768,53,775,75,825,99,924,135,981,154,1019,169,912,266,795,312,747,372,670,335,628,253" >
<area shape="poly" coords="1018,196,1029,182,1040,174,1043,167,1043,153,1045,138,1059,132,1076,137,1079,159,1082,176,1090,189,1110,249,1127,269,1132,286,1127,303,1146,380,1150,400,1136,409,1095,417,1067,418,1046,415,1029,405,1009,409,988,405,974,399,967,391,977,348,994,275,988,264,1018,196" >
<area shape="poly" coords="1173,125,1176,116,1168,110,1163,101,1168,83,1167,75,1153,73,1148,61,1159,52,1165,46,1172,41,1192,33,1202,33,1213,33,1220,37,1233,38,1248,40,1259,54,1254,65,1227,71,1227,80,1218,93,1228,105,1231,116,1230,137,1228,152,1225,175,1217,184,1209,195,1195,219,1196,235,1197,245,1190,250,1180,248,1140,204,1130,191,1173,135,1173,125" >
<area shape="poly" coords="1269,1,1302,41,1320,59,1322,73,1316,86,1310,105,1310,114,1317,125,1324,133,1325,149,1322,179,1317,196,1311,207,1303,217,1292,207,1288,221,1284,238,1279,254,1281,270,1281,290,1290,294,1306,314,1316,334,1312,349,1311,363,1313,383,1295,407,1285,418,1284,429,1272,438,1274,458,1285,459,1336,463,1369,461,1457,465,1488,463,1513,467,1482,429,1493,406,1474,366,1475,330,1474,287,1469,276,1479,254,1478,235,1472,216,1469,183,1469,166,1475,149,1477,129,1473,123,1475,118,1482,85,1504,53,1536,3,1536,-1,1269,1" >
<area shape="poly" coords="1482,301,1516,347,1510,371,1526,396,1550,409,1568,418,1583,442,1614,470,1622,481,1633,479,1673,487,1709,480,1716,448,1724,369,1728,331,1739,296,1713,265,1699,250,1681,228,1652,233,1619,235,1584,237,1528,273,1482,301" >
<area shape="poly" coords="1719,222,1747,160,1751,143,1726,149,1724,132,1717,119,1712,97,1687,86,1636,33,1643,28,1687,47,1772,41,1823,2,1843,1,1858,35,1914,50,1976,37,2082,87,2080,100,1911,119,1879,141,1829,136,1836,158,1852,180,1859,200,1849,225,1825,238,1811,266,1819,284,1837,301,1843,304,1847,325,1823,309,1805,285,1797,263,1816,228,1829,220,1818,214,1790,201,1773,192,1762,180,1735,214,1719,222" >
<area shape="poly" coords="2051,147,2074,125,2080,118,2094,113,2107,106,2131,112,2169,84,2231,92,2254,107,2273,130,2274,147,2264,161,2265,179,2269,214,2235,215,2174,208,2189,172,2160,165,2140,161,2115,180,2102,198,2091,204,2071,208,2061,205,2053,197,2083,180,2094,172,2087,161,2065,168,2052,168,2051,147" >
<area shape="poly" coords="1847,298,1896,265,1988,240,2041,232,2044,253,2096,251,2082,273,2105,287,2091,329,2065,349,2079,377,2049,390,2032,397,2018,420,2070,456,2050,477,1986,437,1960,421,1957,460,1939,460,1908,408,1904,438,1871,448,1876,402,1857,410,1811,435,1803,430,1844,392,1864,359,1875,335,1865,324,1847,298" >
<area shape="poly" coords="2332,1,2523,1,2535,23,2548,38,2541,50,2534,69,2524,79,2528,101,2524,159,2511,208,2503,272,2482,295,2479,344,2452,393,2434,394,2419,427,2387,422,2368,407,2351,351,2341,300,2337,213,2330,201,2312,201,2308,170,2307,153,2326,143,2341,115,2348,90,2342,81,2338,64,2332,1" >
</map>
$('area').attr('href', '#');
$('.off-the-side').addClass('push-side');
$('.wall-writings').addClass('wall-writepos').prepend('<button class="close"><img src="x-icon.png" alt=""></button>').hide();
$('area').click(function(){$('#writing1').fadeIn('slow');return false;});
$('.close').click(function(){$(".wall-writings").fadeOut();});

Hope I understood the problem :)
I would place an href tag on each area like:
<map>
<area href="#div1" shape="poly" coords="287,230,301,244,319,251,329,252,340,252,347,252,338,246,336,237,344,233,344,229,345,225,356,227,362,229,376,230,385,235,393,242,396,250,403,254,408,248,414,239,419,231,424,224,429,222,433,233,432,248,428,263,422,272,422,279,410,286,396,288,388,291,385,293,390,296,393,305,396,316,400,318,407,320,414,325,416,332,420,343,415,352,414,360,408,369,401,374,405,387,409,399,407,409,408,412,402,414,368,365,357,374,358,390,359,403,354,409,343,415,337,416,323,370,294,362,268,327,264,274,287,230" >
</map>
<div id="some_div">Some text</div>
$('area').click(function(){var href = $(this).attr('href'); $(href).show(); return false;});
css
#some_div{display:none;}
I think this should work. If this is not what you intended please explain further

In jquery using the click event handler. How do I keep all the
elements from not show but only have one element show one at time to
what is related when I click on it?.
From what i can deduce from your html mapping, you are missing the id's attribute for the tag and your Jquery is actually targeting the whole image map.
the guilty code:
$('area').click(function(){$('#writing1').fadeIn('slow');return false;});
Because of that, all the elements would show when you clicked on any of the area 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