How do I using coordinates as map locations? - javascript

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

Related

How to copy text generated by JavaScript?

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.)

Changing src of an image when mouseover area

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';" />

Popup certain points of image to display text

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>

Using Image map so a new image replaces the old image

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.

Reverting image maps to functions

I have an image and when you click on it, it goes to another image with a function and an image map. But on the next image there's text saying "back to other image" but I can't get it to go to the previous image.
The user clicks on the mainmenu.png and it goes to moreinfo.png, how do I make it go back to mainmenu.png?
<img src="img/mainmenu.png" alt="" style= "width: 15em; height: 25em;" id="moreinfo" usemap="#map"; />
<map name="map">
<area shape="rect" coords="46,335,188,364" onclick="changeImage()">
</map>
<script language="javascript">
function changeImage(){
if (document.getElementById("moreinfo").src == "img/moreinfo.png")
{
document.getElementById("moreinfo").src = "img/moreinfo.png";
}
else
{
document.getElementById("moreinfo").src = "img/moreinfo.png";
}
}
</script>
How about
<area shape="rect" coords="46,335,188,364" onclick="toggleImage()">
function toggleImage(){
var img = document.getElementById("moreinfo");
img.src = img.src.indexOf("moreinfo.png")!=-1?"img/mainmenu.png":"img/moreinfo.png";
}

Categories