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.
Related
I have an image with class="img-responsive" which has links on it.
The problem is, when size of image changes, the coords won't be in their correct places.
How can I have dynamic coords for links depend on the size of the dynamic image?
<img class="img-responsive" usemap="#image-map" src="/Content/Images/news/(8).png" alt="">
<map name="image-map">
<area coords="419,64,15,179" shape="rect" href="" target="" alt="" title="">
<area coords="13,184,420,277" shape="rect" href="" target="" alt="" title="">
<area coords="14,283,420,374" shape="rect" href="" target="" alt="" title="">
<area coords="13,380,418,473" shape="rect" href="" target="" alt="" title="">
<area coords="14,481,419,572" shape="rect" href="" target="" alt="" title="">
</map>
Based on last comment from #ShareWin here a solution with Jquery.
Years ago, I faced to the same challenge. Accedently I found an Jquery plugin that allows to change the coodinates, depends on the picture size. The plugin calls jQuery RWD Image Maps.
Here some steps to get it work:
Take the orignal picture and create the area cords (I used Gimp for it)
Publish the original picture to your web project.
Import jquery and this plugin into your site.
Thereby the plugin does working, there are some restrictions.
Here an example code:
<div id="yourDivId" ...>
<img src="yourImage" class="map" usemap="#nameofImagemap" id="elementid" ..>
<map name="nameofImagemap">
<area shape="rect" coords="x,x,x,x" alt="Tooltip" href="yourTarget" />
...
</map>
</div>
The javascript call is as follow:
$( document ).ready(function()
{
$('#yourDivId img').rwdImageMaps();
}
Important note: Whenever the size of used picture changes by hand, you have to recreate the area map.
I have a homescreen image that I need to have different sites linked to, but am still not able to make my area map work. I've tried reordering the and and double checking spelling. I have also double checked the coordinates. Thoughts?
<p><map name="epacbanner">
<area shape="rect" coords="0,336,156,489" href="https://www.google.com"
alt="contact" />
</map> <img src="/content/epac%20banner_final.png" alt="epac banner"
title="epac banner" width="960" height="322" img="" usemap="#epacbanner" />
</p>
The problem is not with your HTML but the coordinate values, as you have specified a rect the first two coordinates are the x,y position of the top left corner of the shape. You have specified 336 for the y value when your image is in fact only 322 pixels tall (height) Changing that value to 0 places a rectangle at the top left of the sample image as shown in the second example below.
<p>
<img src="http://lorempixel.com/960/322" alt="epac banner"
title="epac banner" width="960" height="322" usemap="#epacbanner" />
<map name="epacbanner">
<area shape="rect" coords="0,336,156,489" href="https://www.google.com"
alt="contact" />
</map>
</p>
<p>
<img src="http://lorempixel.com/960/322" alt="epac banner"
title="epac banner" width="960" height="322" usemap="#epacbanner" />
<map name="epacbanner">
<area shape="rect" coords="0,0,156,489" href="https://www.google.com"
alt="contact" />
</map>
</p>
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 want to display text and/or a graphic on another graphic.
By using the following sample, I display a graphic, and can then "sensitize" parts of it using AREA:
<img src ="planets.gif" width="145" height="126" alt="Planets" usemap ="#planetmap" />
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" />
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" />
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" />
</map>
How would I be able to display text and/or a graphic in the same way?
You can do this using HTML5 CANVAS. Area maps do not support this.
Here is a starter tutotial: http://blog.reybango.com/2010/07/01/canvas-baby-steps-an-introduction-to-the-html-5-canvas-element/