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';"
>
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.
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')">
I wonder if anyone can post a code example on how I can display some information when I hover a certain pixel cordinate on an image (just like when I hover a picture on a facebook image and it displays a text of who that person is that I currently have my mouse pointer over).
The diffrence between facebook and my solution is that my picture is not a picture which contains people, but multiple graphs on same picture, so alot of image pixelcordinates is going to display some data when I hover over them.
I also want my sollution to be webbased, and if possible only contain javascript, jquery css html.
Thanks so much in advance =)
ike #jimy says, use an image map. – Alex Thomas 6 mins ago
But to answer your question "...wonder if anyone can post a code example..." i've done this:
HTML
<img name="n00000001" src="http://ajthomas.co.uk/shapes.png" width="300" height="300" border="0" id="n00000001" usemap="#m_00000001" alt="" /><map name="m_00000001" id="m_00000001">
<area shape="rect" coords="28,179,116,256" href="#" title="square" alt="square" />
<area shape="circle" coords="228,66, 45" href="#" title="round" alt="round" />
<area shape="poly" coords="60,32,22,72,51,120,104,109,111,54,60,32" href="#" title="Poly" alt="Poly" />
I've put it on jsfiddle for you too - http://jsfiddle.net/ajthomascouk/xsrzz/
I used fireworks, but i'm sure there is free tools out there too.
Hope this helps.
Update
i'm sure there is free tools out there
too.
Yup, Gimp can do it using this plugin
Good luck...
Here are a few links for the same.They make use of a css technique known as "image maps"
http://www.frankmanno.com/ideas/css-imagemap/
http://frankmanno.com/ideas/css-imagemap-redux/
http://www.noobcube.com/tutorials/html-css/css-image-maps-a-beginners-guide-/