I need to be able to make each section in this image a separate link. If I make each section an image and overlay them it means that there is some overlap with the transparent background.
Is there a way to do this using SVGs or area maps?
You can use the HTML4 and HTML5 compatible <map> tag.
The <map> tag is used to define a client-side image-map (an image with clickable areas).
You'll need to define the map like this:
<img src="menu.gif" alt="roundMenu" usemap="#roundMenu">
<map id="roundMenu" name="roundMenu">
<area shape="poly" alt="" title="" coords="200,584,360,412,692,204,980,128,1176,128,1148,512,972,524,680,644,540,820,360,692,268,628" href="" target="" />
<area shape="poly" alt="" title="" coords="1192,40,1152,440,1384,500,1580,632,1696,804,2036,652,1876,380,1540,140,1364,72" href="" target="" />
<area shape="poly" alt="" title="" coords="2112,620,1728,796,1772,792,1832,1060,1800,1280,1704,1456,1784,1484,2044,1644,2168,1368,2212,1100,2184,812" href="" target="" />
<area shape="poly" alt="" title="" coords="1160,1756,1120,2152,1344,2148,1704,2040,1976,1860,2108,1684,1752,1464,1760,1504,1536,1700,1296,1776,1172,1764" href="" target="" />
<area shape="poly" alt="" title="" coords="604,1460,716,1632,944,1796,1116,1832,1124,2224,1016,2224,664,2088,384,1856,256,1644,440,1548" href="" target="" />
<area shape="poly" alt="" title="" coords="196,1672,540,1492,460,1260,500,996,592,812,572,832,264,624,104,968,80,1260,132,1512,136,1516" href="" target="" />
</map>
As you can see, in addition to rectangle and circle, each shape can be defined as a polygon.
NOTE:
You can calculate the coordinates manually (the coordinates of the top-left corner of an area are 0,0), or use a tool such as the following, that calculates the coordinates using a graphical interface:
http://www.maschek.hu/imagemap
Yes,
You can map image. You can see samples here: Link
Related
I need to make a semicircle shape on an image using the Html image map tag.
This is the code but it makes a circle.
<img src="floorplan1.png" usemap="#image-map">
<map name="image-map">
<area target="" alt="" title="" href="" coords="494,686,91" shape="circle">
</map>
Is it possible to do this?
If yes, then please tell the way to do it.
You can use shape=poly and define each coord. Look at the example below. You can also use https://www.image-map.net/ to generate it online on your image.
In below example try clicking on the plant.
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR4C5coWnjUpQ619SpeV_MwkBj57xOa-0Jd-mLAHP2R2Ic9OY_G" usemap="#image-map">
<map name="image-map">
<area target="" alt="" title="" href="" coords="181,257,245,246,292,201,307,135,269,76,226,53,183,55,185,151" shape="poly">
</map>
I have been searching for hours now how to show bootstrap popovers (or any other popover) on mapped areas.
The only solution I found is a dead link...
I have tried to make my own popovers, but it only works on Firefox because I use offset() to position them and it gives me differents values cross browser.
If we have for example the following code (from W3Schools) :
<img src="https://www.w3schools.com/tags/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="#">
<area shape="circle" coords="90,58,3" alt="Mercury" href="#">
<area shape="circle" coords="124,58,8" alt="Venus" href="#">
</map>
I would like a popover to show besides the area when hovered.
I would be glad if someone has an answer out there.
I want my img be clickable for only its non-tansparent area because it blocks images that are behind.For example when I click north France it chooses Germany. How can this be possible?
I have something like this and all of the countries are an image on html page.
Here is the image of my website:
Your image is a JPEG. It has no transparent parts. However, the easiest way to assign different actions to different regions would be to use an image map. I used this online tool to create areas corresponding to France and Germany. You should be able to create areas for all the other countries in just a few minutes.
<map name="Map" id="Map">
<area alt="" title="" href="#" shape="poly" coords="248,165,275,136,
316,127,327,117,314,96,321,77,337,68,344,68,336,90,332,97,335,114,
352,120,373,111,387,125,394,163,361,175,367,193,378,198,368,205,369,
215,363,214,350,226,323,240,288,238,312,197,274,185"
onclick="alert('Germany'); return false" />
<area alt="" title="" href="#" shape="poly" coords="159,199,194,202,
196,186,202,184,218,192,235,179,236,169,249,167,277,186,314,197,289,
235,302,239,304,274,292,286,260,281,250,298,222,289,215,291,193,285,
202,256,196,232,175,216,159,213"
onclick="alert('France'); return false" />
<!-- et cetera -->
</map>
<img src="http://i.stack.imgur.com/pGuAF.jpg" alt="" usemap="#Map" />
I'm developing a mobile app with ionic, and in the index page I want to make the regions of an image clickable, like links. How can I do that? Is there a way to do that in Javascript? Or a tool to define the clickable regions?
see: http://www.w3schools.com/tags/att_area_coords.asp
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
HTML tag map is designed exactly for this. Use href="javascript:onClick()" for JS calls instead of navigation.
<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>
MDN has a good specification of the area tag - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area
You can use <map> and <area>.
But It can be not working on some devices and browsers.
Then you can solve that problem through jQuery image map alternative
You are looking for an image map, which is what <map> is for. In your case you would add <area shape="circle" coords="x,y,r"... /> for your circles, where x,y are the x and y coordinates and r is the radius. There are even tools to define your own image map for example.
Note that to connect the <map> with your <img> by using usemap="#myImageMap" where myImageMap is the name on your map:
<img src="myImage.png" .. usemap="#myImageMap">
<map name="myImageMap">
<area shape="circle" ... />
...
</map>
The below code works perfectly to reveal an image when a user mouses over an hotspot of an image map. The only problem? When clicked 'this.href' of course takes the user to the hotspot image itself. I'd like to reserve 'href' to send the users to the page of my choosing.
Is it possible to use "title" rather than 'href' to define the hotspot image? If so, please show details, I'm very new to javascript, thank you!
<script type="text/javascript">
function ShowPicC(sImage){document.housec.src = sImage}
</script>
<img border="0" src="main-image.png" width="640" height='640' usemap="#FPMap0">
<map name="FPMap0">
<area onmouseover='ShowPicC(this.href)' href='hotspot1.png' alt="thisalt" title="can-png-go-here.png" shape="circle" coords="400,400,20">
<area onmouseover="ShowPicC(this.href)" href="hotspot2.jpg" alt="youralt" title="can-png-go-here2.png" shape="circle" coords="420,420,20">
<area onmouseover="ShowPicC(this.href)" href="hotspot3.jpg" alt="differentalt" title="can-png-go-here3.png" shape="circle" coords="440,440,20">
<area onmouseover="ShowPicC(this.href)" href="hotspot4.jpg" alt="whateveralt" title="can-png-go-here4.png" shape="circle" coords="460,460,20">
</map>
<img name="housec" src="starter-hotspot-image.png" width="192" height="170">
Sure, although title isn't a valid property of area. Did you try it?
<area onmouseover="ShowPicC(this.title)" title="someotherimage.jpg" ...
You may be better off using a data attribute:
<area data-image="someotherimage.jpg" ...
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes