Develop Reference

Get an element by ID from html to js

I have created a clickable area in an image and I want to get the Id of this area in Javascript so I can fill it with color. I am new in both html and js.
var myElement = document.getElementById("map1");
<img src={marina} alt="marinamap" usemap="#workmap" />
<map name="workmap">
<area shape="rect" coords="320,220,340,210" alt=" parking" href="" id="map1" >
</map>
I am getting the error :
a constructor,method,accessor or property was expected.
Any advice?

Well, it doesn't look that <area> tag is styleble at all... if all your areas are rectangular o round(ish) you may consider using just div's or any other tags positioned absolutely over the image like so... if those areas have more complex shapes you may need to use SVG instead... svg example
[ORIGINAL WRONG ANSWER - before comment received]
Probably related to "Can I have an onclick event on a imagemap area element?"
You may do what you need in the onclick event of your area like so:
<area shape="rect"
coords="320,220,340,210"
alt="parking"
href="#map1_target"
id="map1"
onclick="event.preventDefault(); this.style.background='#a00';"
>

Mouse hover on image parts show hints

I have an html page with simple, static image like this : Image
I need a way that putting mouse (hover) on any object, for example - "BED" to get a tooltip that - "There is bed".
I know how hover works at pure html, with blocks or any teg, but I need a way of doing/tracking the user cursor, and when it enters in specific zone, to show the hint. Probably some JS required. How can I setup this unknown geometric forms with their coordinates to achieve my goal?

No JS script needed :)
You can use image maps .. they are old but should work as you expected.. you can run it and see title when you hover over kitchen and bad
I used this webpage to 'generate' rectangles and area over the image or hotsports..
<img src="https://www.edrawsoft.com/symbols/simple-home-floorplan.png" usemap="#image-map">
<map name="image-map">
<area target="" alt="This is bad" title="This is bad" href="" coords="520,132,451,48" shape="rect">
<area target="" alt="This is kitchen" title="This is kitchen" href="" coords="343,204,254,55" shape="rect">
</map>

In addition of the prev answer you can also add this jQuery to your page. It makes the tooltip show more prominent and also quicker:
$( function() {
$( document ).tooltip();
} );
This native jQuery function uses the 'title' attribute! Don't forget to add these like this:
<img title='This is a test!!' src='test.png'>

make hover effect on different parts of an image, not html but an img

Basically i have a "blueprint" for a building project,i need to make it so that when they hover on specific parts of the floor a short description pops out.
something like this:

You can use an Area Map. The syntax is as follows:
<map name="myMap">
<area shape="rect" coords="0,0,10,20" href="somelink.html">
<area shape="circle" coords="10,30,50,100" href="anotherlink.html">
</map>
You use the coords to define each area. You then can assign an ID to each area and make the hover items. Try it and let us know.
You can use an Image Map Generator online, there are plenty. I use this one: http://imagemap-generator.dariodomi.de/ It is much easier than doing it by your own.

try this one
<img src="map.jpg" width="100%" height="300px" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="50,50,10,10" alt="building" title="building">
<area shape="rect" coords="150,150,10,10" alt="building + rooms" title="building + rooms">
</map>
set your coordinates in image which will you generate popup message

This can also be done as assign this image as background to a div of the same size. Then position anchor links at the exact positions where you want the hover effect. Add an hover tool-tip as given here and that's it. Everything can be done with pure css.

responsive image mapping with coordinates

I am trying to understand how this plugin works :http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html
The goal is to have responsive image maping but what I dont understand is how to come up with the coords. See below how there are a bunch of numbers, how do I calculate my own coords for my image, can some one explain what is going on with this demo and how it is to be used?
<map name="powerpuffgirls">
<area shape="poly" coords="122,36,281,36,285,37,287,39,289,42,289,47,289,48,278,77,276,81,274,84,271,85,218,85,218,90,210,90,208,95,207,99,204,100,72,100,26,87,23,84,20,81,19,76,35,40,37,38,43,35,62,35,65,30,68,26,72,25,115,25,119,27,121,30,122,36,122,36" href="#ppg" title="The Powerpuff Girls" alt="The Powerpuff Girls" />
<area shape="poly" coords="864,668,912,650,922,668,971,667,973,718,981,722,985,729,988,731,1010,731,1010,742,833,742,833,730,865,730,865,721,874,721,874,718,864,668,864,668" href="#cn" title="Cartoon Network" alt="Cartoon Network" />
<area shape="poly" coords="1010,298,995,281,979,267,962,256,944,248,927,242,909,238,876,236,857,237,838,240,817,246,797,255,778,266,761,281,746,299,735,322,730,335,728,346,726,348,721,349,709,344,711,361,718,378,708,380,697,388,688,398,685,404,685,411,686,419,691,425,698,429,707,431,735,426,743,427,752,433,762,444,774,454,798,469,787,483,779,481,772,482,761,486,753,495,747,505,746,516,746,521,748,527,751,532,759,538,741,561,734,572,732,584,733,591,737,599,744,604,754,607,765,604,776,597,797,570,817,543,857,488,865,488,893,488,910,485,924,483,930,483,935,485,939,490,934,496,931,501,929,506,932,514,938,519,945,522,954,523,966,521,979,516,985,512,989,507,993,500,994,493,991,484,986,476,967,464,982,454,998,440,1013,425,1024,409,1024,329,1017,312,1010,298,1010,298" href="#buttercup" title="Buttercup" alt="Buttercup" />
<area shape="poly" coords="571,101,563,83,562,66,549,80,541,96,537,112,536,128,537,141,531,141,508,141,508,141,511,133,517,126,533,114,500,111,476,111,452,114,438,118,424,124,410,131,400,140,392,152,390,167,391,174,394,183,400,191,409,198,391,215,379,234,371,252,368,271,367,277,368,298,371,316,381,338,396,358,414,375,399,378,387,385,379,393,377,405,378,412,382,418,388,424,395,429,411,434,425,435,431,446,439,456,459,474,480,488,502,500,514,507,523,515,528,523,530,534,529,541,526,547,515,562,532,556,548,547,562,536,574,523,583,508,590,490,594,470,596,448,596,430,591,410,587,398,599,390,613,382,628,371,643,356,657,337,666,313,669,299,670,284,669,276,668,264,670,263,697,263,704,261,711,257,716,251,719,243,718,236,715,231,706,221,694,215,683,213,677,213,670,215,664,220,656,232,645,215,652,206,657,199,660,191,662,181,660,169,655,158,648,150,638,142,617,130,596,120,582,112,571,101,571,101" href="#blossom" title="Blossom" alt="Blossom" />
<area shape="poly" coords="254,286,232,271,207,260,179,254,150,252,119,254,103,257,88,263,71,270,61,275,58,274,57,273,45,269,36,268,17,271,7,276,1,283,0,283,0,285,0,290,0,352,2,354,1,355,1,390,3,401,5,410,9,420,22,441,39,460,58,476,47,480,38,487,32,494,30,504,33,515,41,524,53,531,69,534,77,533,85,530,90,525,93,518,91,512,88,508,85,505,85,502,86,499,89,497,97,496,120,500,138,503,154,503,167,503,185,531,215,576,235,609,241,617,248,622,255,626,265,628,273,626,280,621,285,614,287,605,283,592,276,580,261,558,269,553,273,547,276,541,277,536,274,524,267,513,257,504,250,501,244,501,240,502,237,503,225,488,242,478,259,468,276,451,282,447,292,446,318,450,327,448,334,445,339,439,341,431,337,419,329,409,318,401,307,398,301,398,301,393,301,391,303,391,321,393,336,391,352,387,370,380,387,370,373,368,364,364,358,360,353,354,350,347,347,330,345,313,343,302,340,293,336,286,331,280,318,272,305,267,293,266,282,267,272,270,262,276,254,286,254,286" href="#bubbles" title="Bubbles" alt="Bubbles" />
</map>
</div>

The plugin does the heavy lifting for you.
From what I can see, the coords are whatever you want... the plug in then calculates the new coords based on the size of the image. These obtuse coordinates are for a complete outline of the powerpfuff girls and the logos... try something simple like a circle or a rectangle.

If you are still looking for a way to create the coordinates, you can use various apps on your computer or you can also do this online such as image-maps.com. Just do a search online for "online image map editors" and several will show up.
Simply upload your image or add a URL of your image and then create the shapes (rectangle, polygon, circle) with corresponding links etc. and it will output the code for you.

alert message shows when the user clicks the image without clickable area

I am using a simple image map as per the w3 tutorial,
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="hj.png" alt="skitch" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,110,210,150" alt="Sun" href="sun.htm">
</map>
I need to alert the user, if he clicks the image's non click able area. I have searched a lot for this and found lot of tutorial, but couldn't find the exact. Is there any way to do it in java script, though I am newbie to jquery. If there is only jquery solution, please give me some tutorials with examples.
Any help appreciated!

Create new clickable areas in the image map that cover the areas the person shouldn't click then set it like this:
<area shape="rect" coords="0,110,210,150" alt="Not Here" href="#" onclick="alert('Don\'t click here')">