Popover on mapped areas - javascript

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.

Related

How to link a picture in specific object with hover popup and hyperlink

I want to create something like this website: https://www.ukbathroomwarehouse.com/inspiration/scene2
So to link specific object of the picture with a plus, on mouse click to generate title and price of the product and hyperlink.
I did some research and till now didn't find what I need.
I found just this, but still now what I need exactly:
<!DOCTYPE html>
<html>
<body>
<h1>The area coords attribute</h1>
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map id="planetmap" 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>
</body>
</html>
Can someone help me in this?

Can I create a semicircle shape in html image area map?

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>

Image with links in certain areas in HTML 5 for mobile

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>

How to make each section of an image clickable

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

Replace this.href with this.title

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

Categories