I have an image of map like this:
I searched in google but I don't find any.
I want to know if there is a JS or Jquery Library to implement some popup or tooltip when mouse is over certain points and show description of each point in this image.
For example, if I put mouse over USA I want to display some popup and if I put mouse over Mexico I want another one. If there is any example I appreciate it. Regards
You can use mapael It's an open source jQuery plugin offers exactly what you're asking for.
Check this demo and here is more examples
And check here for Github source code.
You can use a <map> with multiple <area> elements to create the clickable regions and listen for click events on them.
Then, you need to prevent default calling Event.preventDefault() and handle that in whatever way you want, such as opening a popup or overlay on top of the map.
Here's a simple example where you can click the US:
document.getElementById('mapMap').onclick = (e) => {
e.preventDefault();
if (e.target.dataset.country === 'US') {
alert('Hi!');
}
};
body {
margin: 0;
}
#mapImage {
max-width: 420px;
}
<img id="mapImage" src="https://i.stack.imgur.com/C2Mha.png" usemap="#map">
<map id="mapMap" name="map">
<area data-country="US" shape="poly" coords="54,70,119,68,96,94,59,86,54,79" href="#">
</map>
The main issue with this approach is that the <area> coordinates are defined in CSS pixels, so you will need to use JavaScript to recalculate the coordinates based on the size of the image, unless it always has the same size.
David Thomas provided an implementation of that here: Is possible create map html area in percentage?
Then, another limitation is that you can't apply hover styles on the <area> elements, but again, you could use JavaScript to draw the shape of the <area>, using its shape and coords attributes on a <canvas> and overlay that over the map with pointer-events: none to prevent it from getting MouseEvents (click, hover...) that should go to the <area>.
enhzflep provided an implementation of the here too: How to apply Hovering on html area tag?
Another alternative could be to use an <svg> instead of an <img>, which can handle all that nicely and easily.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
body {
background-repeat: no-repeat;
background-attachment: fixed;
overflow: hidden;
}
</style>
</style>
</head>
<body>
<div class "container">
<div class "picture">
<img id="mapImage" src="put_text_heatmap.jpg" height="1036px" width="1237px" usemap="#map">
<map id="mapMap" name="map">
<area data-brand="Ajile" href="dashboard_images/9.PNG" id="snowballAppear" shape="rect" style="display: none" height="480px" width="640px" coords="127, 629, 283, 869">
<area data-brand="Honey" href="dashboard_images/8.PNG" id="snowballAppear" shape="rect" style="display: none" height="480px" width="640px" coords="514, 842, 803, 1024">
<area data-brand="Akkriti" href="dashboard_images/7.PNG" id="snowballAppear" shape="rect" style="display: none" height="480px" width="640px" coords="774, 265, 909, 409">
<area data-brand="Cosmatics" href="dashboard_images/6.PNG" id="snowballAppear" shape="rect" style="display: none" height="480px" width="640px" coords="985, 809, 1139, 992">
<area data-brand="Annabelle" href="dashboard_images/5.PNG" id="snowballAppear" shape="rect" style="display: none" height="480px" width="640px" coords="258, 442, 429, 584">
<area data-brand="Sunglases" href="dashboard_images/4.PNG" id="snowballAppear" shape="rect" style="display: none" height="480px" width="640px" coords="827, 851, 980, 1033">
<area data-brand="VanHeusen" href="dashboard_images/3.PNG" id="snowballAppear" shape="rect" style="display: none" height="480px" width="640px" coords="343, 611, 514, 753">
<area data-brand="jealous" href="dashboard_images/2.PNG" id="snowballAppear" shape="rect" style="display: none" height="480px" width="640px" coords="500, 358, 595, 409">
<area data-brand="Denim" href="dashboard_images/1.PNG" id="snowballAppear" shape="rect" style="display: none" height="480px" width="640px" coords="163, 879, 334, 999">
</map>
</div>
</div>
</body>
<script>
window.onload = function() {
document.getElementById("mapMap").addEventListener("click", function (e) {
<!-- alert("CLICKED"); -->
var img = document.createElement('img');
$("#snowballAppear")[0].appendChild(img);
});
};
</script>
</html>
<html>
<head>
body {
background-repeat: no-repeat;
background-attachment: fixed;
<!-- overflow: hidden; -->
}
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
<div id="modal-background">
<div id="modal-content"></div>
</div>
<img id="IMGMAPS" src="put_text_heatmap.jpg" height="1036px" width="1237px" usemap="#image-maps" alt="" />
<map name="image-maps" id="IMGMAPS">
<area data-brand="Ajile" data-imageurl="dashboard_images/9.PNG" shape="rect" style="display: none;" height="480px" width="640px" coords="127, 629, 283, 869" , target="_self" />
<area data-brand="Honey" data-imageurl="dashboard_images/8.PNG" shape="rect" style="display: none;" height="480px" width="640px" coords="514, 842, 803, 1024" , target="_self" />
<area data-brand="Akkriti" data-imageurl="dashboard_images/7.PNG" shape="rect" style="display: none;" height="480px" width="640px" coords="774, 265, 909, 409" , target="_self" />
<area data-brand="Cosmatics" data-imageurl="dashboard_images/6.PNG" shape="rect" style="display: none;" height="480px" width="640px" coords="985, 809, 1139, 992" , target="_self" />
<area data-brand="Annabelle" data-imageurl="dashboard_images/5.PNG" shape="rect" style="display: none;" height="480px" width="640px" coords="258, 442, 429, 584" target="_self" />
<area data-brand="Sunglases" data-imageurl="dashboard_images/4.PNG" shape="rect" style="display: none;" height="480px" width="640px" coords="827, 851, 980, 1033" target="_self" />
<area data-brand="VanHeusen" data-imageurl="dashboard_images/3.PNG" shape="rect" style="display: none;" height="480px" width="640px" coords="343, 611, 514, 753" target="_self" />
<area data-brand="jealous" data-imageurl="dashboard_images/2.PNG" shape="rect" style="display: none;" height="480px" width="640px" coords="500, 358, 595, 409" target="_self" />
<area data-brand="Denim" data-imageurl="dashboard_images/1.PNG" shape="rect" style="display: none;" height="480px" width="640px" coords="163, 879, 334, 999" target="_self" />
</map>
<script>
$(document).ready(function () {
$("area").click(function () {
$("#modal-content").html("<img src=" + $(this).data("imageurl") + ">");
$("#modal-background").fadeIn();
});
$("#modal-background").click(function () {
closeModal();
});
});
function closeModal() {
$("#modal-background").fadeOut();
}
</script>
</body>
</html>
Related
I have a jsfiddle code to record the time and location of a click on an image. It works fine on any desktop platforms but scrolling and highlighting chunks of the text don’t work on iPad in chrome or safari. So as a workaround, I'd like to be able to copy the list of clicks and times that the javascript generates but not sure how. Any thoughts would be much appreciated.
https://jsfiddle.net/369z8Lxu
<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="https://hecoira.leeds.ac.uk/wp-content/uploads/sites/164/2019/08/0D174AF3-1221-42A4-878E-305FD6D829BF-e1564773811882.jpeg" usemap="#image-map">
<map name="image-map">
<area target="" alt="IVStand" title="IVStand" href="javascript:ClickOnImageMap('IVStand');" coords="147,258,186,208" shape="rect">
<area target="" alt="Chair" title="Chair" href="javascript:ClickOnImageMap('chair');" coords="68,262,163,343" shape="rect">
<area target="" alt="DoorHandle" title="DoorHandle" href="javascript:ClickOnImageMap('DoorHandle');" coords="17,237,62,371" shape="rect">
<area target="" alt="Bed" title="Bed" href="javascript:ClickOnImageMap('Bed');" coords="176,154,327,224" shape="rect">
<area target="" alt="Window" title="Window" href="javascript:ClickOnImageMap('Window');" coords="159,119,43,8" shape="rect">
<area target="" alt="Trolley" title="Trolley" href="javascript:ClickOnImageMap('Trolley');" coords="53,129,138,162" shape="rect">
<area target="" alt="Sink" title="Sink" href="javascript:ClickOnImageMap('Sink');" coords="503,328,410,284" shape="rect">
<area target="" alt="ClinicalWaste" title="ClinicalWaste" href="javascript:ClickOnImageMap('ClinicalWaste');" coords="297,327,406,374" shape="rect">
<area target="" alt="AlcoholGel" title="AlcoholGel" href="javascript:ClickOnImageMap('AlcoholGel');" coords="399,258,504,158,504,241" shape="rect">
</map>
<p id="clicks">
Clicks:<br>
</p>
Jscript
ClickOnImageMap = function(area){
var oldHtml = document.getElementById("clicks").innerHTML;
var now = new Date();
document.getElementById("clicks").innerHTML = oldHtml + area + ' ' + now.toLocaleString() + '<br>';
}
I was able to have it working using CSS user-select, I added the value all to demonstrate the selection, if you are testing it on Chrome Mac, use double click and hold for 2 seconds and it will select the text and right click menu will appear (that how Mac imitate touch select on Mac OS).
Update: I tested this on my machine iPad/iPhone simulator safari browser and worked for me! anyway maybe there is something wrong:
and
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
zoom: 1;
user-select: all;
cursor: text
}
</style>
</head>
<body>
<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="https://hecoira.leeds.ac.uk/wp-content/uploads/sites/164/2019/08/0D174AF3-1221-42A4-878E-305FD6D829BF-e1564773811882.jpeg" usemap="#image-map">
<map name="image-map">
<area target="" alt="IVStand" title="IVStand" href="javascript:ClickOnImageMap('IVStand');" coords="147,258,186,208" shape="rect">
<area target="" alt="Chair" title="Chair" href="javascript:ClickOnImageMap('chair');" coords="68,262,163,343" shape="rect">
<area target="" alt="DoorHandle" title="DoorHandle" href="javascript:ClickOnImageMap('DoorHandle');" coords="17,237,62,371" shape="rect">
<area target="" alt="Bed" title="Bed" href="javascript:ClickOnImageMap('Bed');" coords="176,154,327,224" shape="rect">
<area target="" alt="Window" title="Window" href="javascript:ClickOnImageMap('Window');" coords="159,119,43,8" shape="rect">
<area target="" alt="Trolley" title="Trolley" href="javascript:ClickOnImageMap('Trolley');" coords="53,129,138,162" shape="rect">
<area target="" alt="Sink" title="Sink" href="javascript:ClickOnImageMap('Sink');" coords="503,328,410,284" shape="rect">
<area target="" alt="ClinicalWaste" title="ClinicalWaste" href="javascript:ClickOnImageMap('ClinicalWaste');" coords="297,327,406,374" shape="rect">
<area target="" alt="AlcoholGel" title="AlcoholGel" href="javascript:ClickOnImageMap('AlcoholGel');" coords="399,258,504,158,504,241" shape="rect">
</map>
<p id="clicks">
Clicks
</p>
<script>
ClickOnImageMap = function(area){
var oldHtml = document.getElementById("clicks").innerHTML;
var now = new Date();
document.getElementById("clicks").innerHTML = oldHtml + area + ' ' + now.toLocaleString() + '<br>';
}
</script>
</body>
</html>
This is a suggestion more than a solution to your 'copy-and-paste' request.
As your difficulty occurs on iPads/ smaller screens, it occurred to me that maybe the layout [of the output] could stand to be adjusted.
For instance, repetitively outputting the name of an area on a new line on every click is bulky, so I would suggest grouping the clicks and simply appending the time/date to the end of that area's list of dates when it is clicked again.
You could add a counter before the list of times to display a count of the number of times an area has been clicked.
Bearing in mind that the list could get long, I would suggest setting a height on paragraphs and setting the overflow to scroll/auto so that if you really want to read a list of times, you can tap down. Or you could elect to show/hide dates if you wish.
I put together a fiddle* (layout modifiable as you wish of course) to give an idea. Please note I didn't have an iPad to test it out; I used logic and my imagination!
Hope this helps
ClickOnImageMap = function(area) {
var oldHtml = document.getElementById("clicks").innerHTML;
var newHTML, areaclicks;
var now = new Date();
const area1 = 1;
var spanid = "";
if (oldHtml.indexOf(area) == -1) {
var para = document.createElement("P");
para.setAttribute("id", "" + area + "");
var cont = document.createTextNode("");
para.appendChild(cont);
spanid = area + 1;
para.innerHTML = area + " Clicks: " + '<span id= "' + spanid + '">' + area1 + '</span>' + " " + now.toLocaleString();
//const info = document.getElementById("clicks");
document.getElementById("clicks").appendChild(para);
} else {
var addto = document.getElementById(area);
newHTML = addto.innerHTML + " " + now.toLocaleString();
var areaclicks = ((addto.innerText.match(/,/g) || []).length) + 1;
console.log("Clicks is " + areaclicks);
spanid = area + 1;
addto.innerHTML = newHTML;
document.getElementById(spanid).innerHTML = areaclicks;
}
}
#clicks p {
width: 100%;
max-height: 35px;
overflow: auto;
}
<html>
<body>
<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="https://hecoira.leeds.ac.uk/wp-content/uploads/sites/164/2019/08/0D174AF3-1221-42A4-878E-305FD6D829BF-e1564773811882.jpeg" usemap="#image-map">
<map name="image-map">
<area target="" alt="IVStand" title="IVStand" href="javascript:ClickOnImageMap('IVStand');" coords="147,258,186,208" shape="rect">
<area target="" alt="Chair" title="Chair" href="javascript:ClickOnImageMap('Chair');" coords="68,262,163,343" shape="rect">
<area target="" alt="DoorHandle" title="DoorHandle" href="javascript:ClickOnImageMap('DoorHandle');" coords="17,237,62,371" shape="rect">
<area target="" alt="Bed" title="Bed" href="javascript:ClickOnImageMap('Bed');" coords="176,154,327,224" shape="rect">
<area target="" alt="Window" title="Window" href="javascript:ClickOnImageMap('Window');" coords="159,119,43,8" shape="rect">
<area target="" alt="Trolley" title="Trolley" href="javascript:ClickOnImageMap('Trolley');" coords="53,129,138,162" shape="rect">
<area target="" alt="Sink" title="Sink" href="javascript:ClickOnImageMap('Sink');" coords="503,328,410,284" shape="rect">
<area target="" alt="ClinicalWaste" title="ClinicalWaste" href="javascript:ClickOnImageMap('ClinicalWaste');" coords="297,327,406,374" shape="rect">
<area target="" alt="AlcoholGel" title="AlcoholGel" href="javascript:ClickOnImageMap('AlcoholGel');" coords="399,258,504,158,504,241" shape="rect">
</map>
<h3>
Clicks
</h3>
<p id="clicks">
</p>
<!--<script>
</script>--->
</body>
</html>
*(I entered a snippet, just to show the code. Even though it's the same code as in the fiddle (which runs fine), the snippet didn't run [at time of entering], even in full screen.. hmmm. See fiddle.)
I have a custom map (an image), and i need to show country names when the mouse cursor is over the countries areas.
I'm using an HTML map. My image which uses the HTML map is in a modal that you can open with button click. i have tried tooltipster (http://iamceege.github.io/tooltipster/) and Responsive HTML Image Maps jquery plugin (https://github.com/davidjbradshaw/image-map-resizer), but i can't get it to show tooltips exactly where i want and this might be due to responsiveness issues as the image takes the height of the modal while the image size is bigger than that, and i created the map based on the real image size.
Here is my map code:
<img src="<?php the_field('home__map_lightbox_image'); ?>" class="locations-map-full" alt="<?php the_field('home__map_lightbox_title'); ?>" usemap="#map">
<map name="map" id="locations-map">
<area shape="circle" coords="596, 408, 10" title="Libye" class="tooltip"/>
<area shape="circle" coords="508, 361, 16" title="Tunisie" class="tooltip" />
<area shape="circle" coords="457, 374, 7" title="Algerie" class="tooltip" />
<area shape="circle" coords="406, 360, 16" alt="Maroc" class="tooltip" />
</map>
So, my question is: is this the right way to do it ? am i on the right way or should i use something other than HTML maps ?
Working snippet - vanilla JS
Although not perfect, this approach works:
Note: I've changed the first image map to appear in the center
function myFunc (el) {
var tooltip = document.getElementById('myTooltip');
tooltip.style.display = 'block';
tooltip.innerHTML = el.title;
}
function myFuncHide(el) {
var tooltip = document.getElementById('myTooltip');
tooltip.style.display = 'none';
tooltip.innerHTML = '';
}
document.addEventListener('mousemove', function(e){
/*console.log(e.pageX);
console.log(e.pageY);*/
document.getElementById('myTooltip').style.left = (e.pageX+5)+"px";
document.getElementById('myTooltip').style.top = (e.pageY+5)+"px";
});
#myTooltip {
display: inline-block;
padding: 15px;
background: rgba(0,0,0,.5);
color: white;
position: absolute;
display: none;
}
<img src="https://images.icanvas.com/list-square/abstract-photography-1.jpg" class="locations-map-full" width="600" height="600" alt="" usemap="#map">
<map name="map" id="locations-map">
<area shape="circle" coords="596, 408, 10" title="Libye" class="tooltip"/>
<area shape="circle" coords="300, 300, 100" title="Tunisie" class="tooltip" onmouseover="myFunc(this)" onmouseout="myFuncHide(this)"/>
<area shape="circle" coords="457, 374, 7" title="Algerie" onmouseover="myFunc(this)" class="tooltip" />
<area shape="circle" onmouseover="myFunc(this)" coords="406, 360, 16" alt="Maroc" class="tooltip" />
</map>
<div id="myTooltip" />
You can try to use a javascript plugin like this: jquery.responsive-image-maps that dynamicaly re-computes the coordinates of the image map on window.load and window.resize. Then everything should work fine.
If you like you can try responsive svg image maps as well (they are easier to be made responsive, but I am not sure about the tooltips added).
For example see this create-responsive-svg-image-maps
Here is example of adding tooltipster tooltips to an svg map
You can add custom hotspot to your map using Taggd script which is responsive and easy to use.
https://timseverien.github.io/taggd/v3/
What I want : when my cursor is overing the area #ota-tail, the img change to another image, and when we stop overing, the original image come back.
I've got nothing in my console with below code:
$(function(){
$("#ota-tail").hover(function(){
$("#ota-img").eq(0).attr('src','about/about_tail.png');
}, function(){ $("#ota-img").eq(0).attr('src','about/about_null.png');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="ota-img test" src="public/js/about/about_null.png" usemap="#image-map">
<map name="image-map">
<area id="ota-tail" alt="queue de l'otarie" coords="353,376,399,408,403,429,295,430,324,383" shape="poly">
<area id="ota-body" alt="corps de l'otarie" coords="472,288,582,332,543,388,463,409,399,408,353,375,404,306" shape="poly">
<area id="ota-paw" alt="patte de l'otarie" coords="510,397,540,389,562,428,509,428" shape="poly">
<area id="ota-head" alt="tête de l'otarie" coords="595,164,526,184,486,224,471,287,583,332,594,249" shape="poly">
</map>
You can use CSS for that:
#ota-img{
background-image: url('about/about_tail.png');
}
#ota-img:hover {
background-image: url('SOURCEFORTHEIMAGEYOUWANT');
}
Another option is to use JavaScript:
<img src='about/about_tail.png' onmouseover="this.src='SOURCEFORTHEIMAGEYOUWANT';" onmouseout="this.src='about/about_tail.png';" />
I am working on a bluetooth location project interface. I am new at html, javascript. I need to assign pixels for location like map/areas. But I need them for place objects. For example while I create an object I am assigning top:"50"px, left"40"px. I am looking a way to just give area id to my object and my object will placed in the area. I hope you guys can understand my question.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<img src="~/Images/kroki.jpg" alt="map" usemap="#Map" />
<map name="Map" id="Map">
<area target="" alt="" id="galeri" title="" href="" coords="144,186,251,386" shape="rect">
<area target="" alt="" id="a1" title="" href="" coords="42,32,106,31,106,37,163,37,163,160,40,162" shape="poly">
<area target="" alt="" id="a2" title="" href="" coords="164,160,290,160,289,47,257,30,196,32,165,41" shape="poly">
</map>
<div class="row">
<div style="position:absolute; top:15px; left:15px; width:15px; height:15px; margin:0; background-color:lawngreen" class="dot"></div>
<div style="position:absolute; top:290px; left:190px; width:15px; height:15px; background-color:deeppink" class="dot" id="pink"></div>
</div>
</body>
</html>
<script>
var img = (document.getElementsByClassName("dot"));
var interval = window.setInterval(function () {
for (var i = 0; i < 100; i++) {
if (img[i].style.visibility == 'hidden') {
img[i].style.visibility = 'visible';
} else {
img[i].style.visibility = 'hidden';
}
}
}, 500);
</script>
as you can see here I am manually assigning location values. But as you can see again there is areas I created. How do I assign this squares directly into areas with using area ids?
<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>
Instead Of Using Maps,
You Can Make Use Of Canvas And Draw Pixels with Width And Height.
Canvas HTML5:
Drawing a dot on HTML5 canvas
I'm currently trying to use image map to replace an image. The first image gets replaced by the second image however I have no luck on getting the third image to replace the second one.
javascript:
<script>
dcoument.getElementById("img1").src="MSWORD.jpg";
document.getElementById("img2").src="ClickFile.png";
documnet.getElementById("img3").src="NewFile.png"
function replaceImage(imgid, source, mapid)
{
var image = document.getElementById(imgid);
image.src= source;
var newmap = document.getElementById(mapid);
var origin = document.getElementById("ClickFile");
origin.innerHTML = newmap.innerHTML;
}
</script>
Html5
<img id="img1" src="MSWORD.jpg" alt="Microsoft Word"
style="width:fill-available;height:fill-available" usemap="#ClickFile">
<map name="ClickFile">
<area href="javascript:(function(){
document.getElementById('img1').src='ClickFile.png';})()"
shape="rect" coords="58,50,0,25">
</map>
<map name="image1" id="image1">
<area href="javascript:replaceImage('img1', 'ClickFile.png', 'img2')"
shape="rect" coords="50,58,0,25">
</map>
<area href="javascript:(function(){
document.getElementById('img2').src='NewFile.png';})()"
shape="rect" coords="122,103,0,141">
<map name="image2" id="image2">
<area href="javascript:replaceImage('img2', 'Newfile.png', 'img3')"
shape="rect" coords="122,103,0,141">
</map>
Not sure if this is the problem but make sure your </map> tag comes immediately after the<area …> tags within it. Right now your second and third maps are inside the first map which is probably confusing the browser.