I am trying to create an HTML image map like the following( Please find my code below):
h1 {
background-color: red;
}
<h1> This is Frame A </h1>
<img src="http://image.slidesharecdn.com/thesolarsystem-100324192727-phpapp01/95/the-solar-system-2-728.jpg?cb=1269517813" width="500" height="300" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="circle" coords="450,208" href="https://www.nasa.gov/sites/default/files/706436main_20121114-304-193blend_m6-orig_full.jpg" alt="Sun">
<area shape="circle" coords="305,124" href="http://vignette2.wikia.nocookie.net/heman/images/3/36/Earth.jpg/revision/latest?cb=20130912205625" alt="Earth">
<area shape="circle" coords="652,122" href="https://upload.wikimedia.org/wikipedia/commons/8/85/Venus_globe.jpg" alt="Venus">
</map>
The image is getting displayed on the webpage, however, the Sun, Earth and Venus are not getting turned into clickable things so that I can direct it to their respective images. Please let me know what I am doing wrong? Am I specifying the coordinates properly?
I used the following Image Generator to find out the coordinates :
This is because the coords takes three items and not 2: x,y,radius. So you need to add values for the radius (here is an example):
h1 {
background-color: red;
}
<h1> This is Frame A </h1>
<img src="http://image.slidesharecdn.com/thesolarsystem-100324192727-phpapp01/95/the-solar-system-2-728.jpg?cb=1269517813" width="500" height="300" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="circle" coords="330,118,60" href="https://www.nasa.gov/sites/default/files/706436main_20121114-304-193blend_m6-orig_full.jpg" alt="Sun">
<area shape="circle" coords="205,70,30" href="http://vignette2.wikia.nocookie.net/heman/images/3/36/Earth.jpg/revision/latest?cb=20130912205625" alt="Earth">
<area shape="circle" coords="452,82,35" href="https://upload.wikimedia.org/wikipedia/commons/8/85/Venus_globe.jpg" alt="Venus">
</map>
Note: Since you defined the width and height of the image as width="500" height="300", you will need to change the x,y coordinates to adjust for that. This is why I changed them in my answer.
Website in question (Purple tile at bottom right, green boxes are the targets.
I have the following html using area tags to select the first green box however I can't click it as a link. I am using bootstrap if it makes any difference.
<div class="col-md-4">
<img src="octa.png" usemap="#pmc">
<map name="pmc">
<area shape="rect" coords="978,482,1038,512" alt="pmc" href="www.google.com">
</map>
</div>
Any help is appreciated!
You can include multiple areas in your imagemap.
<img src="octa.png" usemap="#map" />
<map name="map">
<area shape="rect" coords="51,47,112,77" href="..." title="PMC Post" />
<area shape="rect" coords="188,47,249,77" href="..." title="Direct Download" />
</map>
you can use relative and absolute css properties
<div style="position:relative;">
<img src="src/of/img.png" />
</div>
css side
.links {
display:block;
position:absolute;
}
I am trying to make an image map in html, but for some reason it just will not work.
My code:
<img id="Image map" src="Koala.jpg" border="0" usemap="#koala" alt="" />
<map id="koala">
<area shape="rect" coords="438,370,552,583" href="http://www.google.com/" alt="Koala nose">
</map>
</ol>
Yes, it is inside an ordered list, not sure if that would contribute to anything.
The image I am referencing (Koala.jpg) is here: http://i.imgur.com/bZHlxCg.jpg
When I run the html file everything is there, except the koala is just not clickable at all.
Add name="koala" in addition to the id for Chrome and Safari to work too - http://jsfiddle.net/L4kUm/
<img id="Image map" src="http://i.imgur.com/bZHlxCg.jpg" border="0" usemap="#koala" alt="" />
<map id="koala" name="koala">
<area shape="rect" coords="438,370,552,583" href="http://www.google.com/" alt="Koala nose">
</map>
I have encountered a weird "bug" with html image maps. It looks like the browser is re-parsing the DOM in a way that I don't expect, when image maps are part of a <p> tag, whereas they work fine when part of a <div> tag.
Here's an example along with some comments. (I don't know how to quickly host an html page so here's the HTML source.
Can anyone explain what's going on?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM bug?</title>
<style type="text/css">code { font-family: monospace; } </style>
</head>
<body>
<h1>DOM bug?</h1>
<p>There seems to be a bug (or a poorly-documented behavior) in how browsers handle map areas with other HTML elements in the map.
The first image below works properly: there are four overlapping map areas covering all but the center square. The second image
below has a <code>map</code> element that seems to reject all child elements following the first non-<code>area</code> child element, so only the left and right
columns are covered by the image map areas.
The only difference is that the first map is enclosed by a <code>div</code> element and the second map is enclosed by a <code>p</code> element.</p>
<p>I've observed this on Firefox 8.0, Opera 11.61, Chrome 16.0.912.77; whereas Safari 5.0 and IE 7.0 renders both image maps "correctly".</p>
<span>
<div>
<!-- convert -size 45x45 pattern:checkerboard -filter box -resize 300x300 -auto-level +level-colors yellow,black ck1.png -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsAQMAAABDsxw2AAAABlBMVEX//wD/pQDmL6nOAAAACXBIWXMAAABPAAAATwFjiv3XAAAATUlEQVR42u3YMQEAMAgDwTiof5d10K4sYID7NacgSem8UtowDMMwDMMwDMMwbBWry+0HDMMwDMMwDMMwDFvLnAkYhmEYhmEYhmEYNrIPTJJ1lg/rCykAAAAASUVORK5CYII="
width="300" height="300" class="map" usemap="#simple1" />
<map name="simple1">
<area id="area-left" href="#" shape="rect" coords="0,0,100,300" alt="Link" title="left rectangle" />
<area id="area-right" href="#" shape="rect" coords="200,0,300,300" alt="Link" title="right rectangle" />
<div>
</div>
<area id="area-top" href="#" shape="rect" coords="0,0,300,100" alt="Link" title="top rectangle" />
<area id="area-bottom" href="#" shape="rect" coords="0,200,300,300" alt="Link" title="bottom rectangle" />
</map>
</div>
<p>
<!-- convert -size 45x45 pattern:checkerboard -filter box -resize 300x300 -auto-level +level-colors yellow,black ck1.png -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsAQMAAABDsxw2AAAABlBMVEX//wD/pQDmL6nOAAAACXBIWXMAAABPAAAATwFjiv3XAAAATUlEQVR42u3YMQEAMAgDwTiof5d10K4sYID7NacgSem8UtowDMMwDMMwDMMwbBWry+0HDMMwDMMwDMMwDFvLnAkYhmEYhmEYhmEYNrIPTJJ1lg/rCykAAAAASUVORK5CYII="
width="300" height="300" class="map" usemap="#simple2" />
<map name="simple2">
<area id="area2-left" href="#" shape="rect" coords="0,0,100,300" alt="Link" title="left rectangle" />
<area id="area2-right" href="#" shape="rect" coords="200,0,300,300" alt="Link" title="right rectangle" />
<div>
</div>
<area id="area2-top" href="#" shape="rect" coords="0,0,300,100" alt="Link" title="top rectangle" />
<area id="area2-bottom" href="#" shape="rect" coords="0,200,300,300" alt="Link" title="bottom rectangle" />
</map>
</p>
</span>
</body>
</html>
I've got a problem with image map HTML.
Working example with no style and no js on:
http://www.download.lagunawebdesign.pl/bug/
<img src="http://www.download.lagunawebdesign.pl/bug/Bez-nazwy-2.png" width="242" height="347" alt="Planets" usemap="#planetmap" />
<map id="planetmap" name="planetmap">
<area shape="poly" coords="31,37,31,68,47,68,47,54,51,54,51,38" title="1" alt="" href="#" />
<area shape="poly" coords="29,48,23,47,23,42,6,42,6,57,13,58,15,67,31,66,30,49" title="2" alt="" href="#" />
<area shape="poly" coords="32,99,31,131,46,131,47,117,51,116,51,99" title="3" alt="" href="#" />
<area shape="poly" coords="32,163,32,196,46,194,46,180,51,180,52,164,31,163,31,196,47,195,46,180,52,180,52,163" title="4" alt="doesnt work" href="#" />
<area shape="poly" coords="32,227,31,258,47,259,47,245,52,245,52,227" title="5" alt="" href="#" />
<area shape="poly" coords="121,297,121,316,153,317,153,302,139,301,139,296" title="6" alt="" href="#" />
<area shape="poly" coords="190,209,191,226,210,227,211,195,195,195,196,209" title="7" alt="" href="#" />
<area shape="poly" coords="5,17,5,0,51,0,51,18" title="8" alt="" href="#" />
</map>
Only fourth area doesnt work properly. On Firefox or Opera is not clickable, Firebug shows good area, but on hover cursor doesnt change (only really small peace close to area on the right side is clickable). On IE works fine.
I really do not know how to fix it.
All coords are putted by customer in CMS, some coords doesnt work (like 3/500).
Looks to me that there are just too many coords in the fourth area. I tried
coords="32,163,31,196,46,194,46,180,51,180,52,164" and it seemed to work for me in Firefox and Opera. Hope this helps!
Just change 164,31,163,31 to 164,31. It will looks almost same, but it's works.