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';"
>

Onclick that displays the text when you click area on the image

I have problem on my site. I trying to do onclick on area, when I click area on image I want to show image and text. This is an example of what I mean:
This is what I have created so far:
<div class="interior" style="padding-left: 243px;">
<img src="Pres7.png" usemap="#intr">
<map name="intr">
<area class="speedo" shape="circle" onclick="" coords="342,126,19" href="">
<area class="screen" shape="circle" onclick="" coords="518,179,17" href="">
<area class="light" shape="circle" onclick="" coords="730,229,17" href="">
<area class="swheel" shape="circle" onclick="" coords="345,259,17" href="">
</map>
</div>
It should display a different image and text so from what I guess needs to create 4 functions.
I tried to do it because there are several examples on the Internet, but when I assigned the variables, it didn't work.
While I could manage with creating text and images by onclick, I don't know how to do it on the area.

There is the CSS property called 'display', each HTML element has it's own default value for that propety (most of them are 'block's, which means they cover the entire X axie), but one of the values you can give for that display property is 'none' which mean it's hidden, you can use javascript to toggle it between "none" (hidden) and the value you want for it.
See here for example: https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp

Fill image map on click and set variable

I have an image map of a human body that I have separated out into 3 zones (for simplicity): body, right leg, and left leg.
I want to be able to click the section of the body, and have that section change colors (ex. fill gray) and set the value of a variable to true (1) for that section. All body sections are by default a value 0.
Variables that need to be set are
{Hidden:TORSO}
{Hidden:RLEG}
{Hidden:LLEG}
Here is my image map:
<img src="http://imgur.com/wzHgrvS.jpg" usemap="#Map" border="0" />
<map name="Map"map id="bodyMap" name="myMap" >
<area shape="poly" alt="" title="Torso" href="#" id="TORSO" coords="94,84,95,134,107,177,104,189,102,200,103,209,102,221,188,220,184,197,182,183,183,168,187,153,191,142,192,129,188,89,155,90,130,90,114,89" />
<area shape="poly" alt="" title="Right Leg" href="#"id="RLEG" coords="99,221,97,242,94,259,90,270,90,291,91,315,94,333,96,343,95,347,94,358,93,366,93,372,89,387,89,405,93,421,96,439,99,456,100,470,100,477,116,477,113,462,116,441,119,423,122,408,119,392,117,376,122,363,126,337,133,314,139,289,140,273,133,265,130,252,122,240,114,231" />
<area shape="poly" alt="" title="Left Leg" href="#" id="LLEG" coords="147,269,153,303,158,319,162,338,164,348,164,357,166,365,170,373,170,380,168,391,166,403,166,414,168,427,172,443,174,460,175,469,174,474,190,473,187,453,192,437,194,423,199,399,197,381,195,349,191,335,196,315,196,289,196,265,191,242,189,222,187,218,176,230,167,239,160,249,155,262,154,266,148,270" />
</map>
I have done this with and selecting a hotspot on an image i.e. circles on a part of a body, but never the whole limb. I'm stumped.

Probably the fastest/easiest way to do this is with the ImageMapster jQuery plugin.
ImageMapster (GitHub: jamietre / ImageMapster, License: MIT) by James Treworgy makes it easier to manipulate HTML image maps. Interesting effects can be created using image maps and more modern HTML/CSS/JavaScript techniques, while still falling over to the basic functionality in older browsers.
http://www.outsharked.com/imagemapster/
These demos show that it will do exactly what you desire:
http://www.outsharked.com/imagemapster/default.aspx?demos.html
By calling $('img').mapster(options), ImageMapster will attempt to bind to each image that has an associated map. An area within the image map can be selected with $('area').mapster('select'). The project has lots of options and features.
Here is code for a somewhat basic example:
http://jsfiddle.net/nYkAG/

What you'll need to do is use is create image maps for those areas that you want to click and have something happen. If you don't have Photoshop or Firework and are looking for a free service, try Image-Maps.com.

one area tag showing two href files

I have a two php pages one is creating a table another one is creating a graph. My index.html file is supposed to call both of them and show both the table and graph on the main page when some one clicks on the image. I have used this code
<div id="upload_target" ></div>
<div id="upload_target2" ></div>
<img src="image.png" alt="hello" usemap="#use" >
<map name="use">
<area shape="poly" coords="..." href="table.html" target="upload_target">
<area shape="poly" coords="..." href="graph.html" target="upload_target2">
</map>
so when the user clicks on area_1 table is shown in "upload_target" and when he clicks on area_2, it is shown in section "upload_target2".
But I wanna just have one area tag for both of them so when he clicks on image both can be shown some thing like this:
<img src="image.png" alt="hello" usemap="#use" >
<map name="use">
<area shape="poly" coords="..." href="table.html" target="upload_target" href="graph.html" target="upload_target2">
</map>
is there any way to do that?

Unfortunately, attributes must be unique on HTML elements. You may be able to accomplish this with an onclick event on the area element.
For example, you might try the following HTML:
<div id="upload_target1"></div>
<div id="upload_target2"></div>
<img src="image.png" alt="hello" usemap="#use" />
<map name="use">
<area shape="poly" coords="..." target1="table.html" target2="graph.html" onclick="return loadContent(this);" />
</map>
With the javascript function:
function loadContent(ele) {
var target1 = ele.getAttribute('target1'),
target2 = ele.getAttribute('target2');
//Make 2 AJAX requests to load the information
//If you are using jQuery, it is as simple as
$('#upload_target1').load(target1);
$('#upload_target2').load(target2);
return false; //Prevent the default action from happening
}
Hope this helps.

using jquery i want place an image over another based on the coordinates

I'm trying to place an image over another based on the coordinates.
My html is:
<button id="add">add image</button>
<div id="container">
<img src="http://www.rangde.org/newsletter/nov11/images/real_tree.png" width="400" usemap="#treemap" />
</div>
<map name="treemap">
<area shape="circle" coords="345,483,13" alt="Venus" href="#" />
<area shape="circle" coords="333,361,13" alt="Venus" href="#" />
<area shape="circle" coords="302,284,13" alt="Venus" href="#" />
<area shape="circle" coords="79,350,13" alt="Venus" href="#" />
<area shape="circle" coords="55,489,13" alt="Venus" href="#" />
</map>
My script is:
$('document').ready(function(){
$('#add').click(function() {
$('area[alt=Venus]').css('background','http://www.rangde.org/newsletter/nov11/images/green-ball.png');
});
});
Here is my jsfiddle

This isn't an appropriate use of an image map, unfortunately, because they're not actually an element that can be styled.
However, if you switched this over to use some absolutely positioned divs in the same location as your mapped circles, combined with the CSS border-radius property, you can create the effect you're looking for: http://jsfiddle.net/N6Sbt/1/
That should be a pretty straightforward solution to your problem.

I'm afraid, it is not possible to set background on <area> as it is not a graphical element. If it was possible some would use it earlier to create simple <canvas> :)
Here is a forum, where people speak about similar

I'll use <a> instead of map, which should help you achieve the same thing. Just set them as 'position:absolute' with 'top' and 'left' having the value of coordinates, and 'width', 'height' with the value of size (as it's only 13 pixels, I don't thing rectangle and circle will be that different). Assign them with a class name so you can select them with jQuery. And don't forget to set the 'container' as 'position:relative'.

Try out this plugin it might help.still in development but you can have a look at it.
http://archive.plugins.jquery.com/project/maphilight
Here is the demo link
http://davidlynch.org/projects/maphilight/docs/demo_world.html