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>

Clicking only non-transparent area of the image on html

I want my img be clickable for only its non-tansparent area because it blocks images that are behind.For example when I click north France it chooses Germany. How can this be possible?
I have something like this and all of the countries are an image on html page.
Here is the image of my website:

Your image is a JPEG. It has no transparent parts. However, the easiest way to assign different actions to different regions would be to use an image map. I used this online tool to create areas corresponding to France and Germany. You should be able to create areas for all the other countries in just a few minutes.
<map name="Map" id="Map">
<area alt="" title="" href="#" shape="poly" coords="248,165,275,136,
316,127,327,117,314,96,321,77,337,68,344,68,336,90,332,97,335,114,
352,120,373,111,387,125,394,163,361,175,367,193,378,198,368,205,369,
215,363,214,350,226,323,240,288,238,312,197,274,185"
onclick="alert('Germany'); return false" />
<area alt="" title="" href="#" shape="poly" coords="159,199,194,202,
196,186,202,184,218,192,235,179,236,169,249,167,277,186,314,197,289,
235,302,239,304,274,292,286,260,281,250,298,222,289,215,291,193,285,
202,256,196,232,175,216,159,213"
onclick="alert('France'); return false" />
<!-- et cetera -->
</map>
<img src="http://i.stack.imgur.com/pGuAF.jpg" alt="" usemap="#Map" />

Place image icon on image map and make it clickable using javascript

I am relative new to JavaScript. We have floor plan image and we need to place a seat image on office floor plan and make it clickable.
We need to display certain information like seat no, vacant or occupied, Name of the person if it is occupied etc. on mouse over event or on clicking. I tried with image map functionality but unable to place icon on the image map.
Please help me on this issue.
<img id="feature" src="trignometry-page-001.jpg" border="0" width="1754" height="1240" orgWidth="1754" orgHeight="1240" usemap="#image-maps-2014-10-19-105116" alt="" />
<map name="feature">
<area alt="" title="" shape="rect" class="group" coords="228,560,250,585" target="_self" onClick="alert('hi')" data-maphilight="{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"ff0000","fillOpacity":0.6}" />
<area shape="rect" coords="1752,1238,1754,1240" alt="Image Map" style="background-color: transparent;border: 1px solid yellow;" title="Image Map" />
</map>

Maybe some javascript events will help you to understand more how this works.
http://javascript.info/tutorial/mouse-events
And you can check this canvas sample for multiple areas, this is using Jquery.
https://github.com/neshte/jquery-canvas-area-draw
It would be better to have the code you are using for this.
Hope this helps.

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.

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