How to get coordinates dynamically in HTML? - javascript

I am working on image mapster, but when I do the following I get NaN for coords.
<div id="rts" class="largWin">×
<center><img id="floo-map1" src="img/plan.jpg" alt="Floor plan in Pan Pacific Level 4" border="0" width="750" height="472" usemap="#floorplan-conference-map1" style="width:750px; height:472px;"/></center>
<map id="image_map1" name="floo-map1">
<script>
function getx()
{
return 425,78,483,116 ;
}
</script>
<area id = "try" name="gg" full="ggh" shape="rect" coords=getx() href="#">
</map>
</div>
How can I fix it?

Thats not how javascript works. you dont return its value to area thats why you getting NaN because coords is not getting anyvalues.
instead change the values inside the getx()
document.getElementById("try").coords = "425,78,483,116";
But why do you want to change its coords in javascript to begin with?
Or try Try coords="return getx()"

Related

Is there a way to add tooltips to a (responsive) html image map?

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/

change image on hover with image map

I want to find the easiest way to be able to change an image depending on what part of the image the mouse is over.
The idea was to first create all the possible image options.
Take the base image and map it
When the mouse is over the selected area "onmouseover" replace the image source with the one that is desired to create the effect.
I have created a simpler test sample of what I want to do:
Base image: https://i.imgur.com/FTAtJutl.jpg
Change image: https://i.imgur.com/p5oiGSOl.jpeg
The idea is when the mouse goes over the "Facebook" logo, it will change from blue to red.
function redFacebook(x) {
document.getElementById("imageid").src = "https://i.imgur.com/p5oiGSO.jpeg";
}
<img id= "imageid" src="https://i.imgur.com/FTAtJutl.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
<area alt="facebook" title="" shape="poly" coords="177,214,193,277,475,212,466,149" onmouseover="redFacebook(x)"/>
</map>
I want to take this idea further and have a multiple areas with multiple different image changes, when mouse over instagram logo, that logo goes red, when mouse over youtube logo, that goes red etc.
Thanks for the help in advance
an idea would be to use the same listener for all the images then have a switch statement that will check the parameter that is passed in and highlight the corresponds image, right now it work, the xyou're passing is throwing an error because it doesn't exists. also you'll need a mouseleave listener to remove the highlighting.
Demo
function mouseover(x) {
switch (x) {
case 'facebook':
{
document.getElementById("imageid").src = "https://i.imgur.com/p5oiGSO.jpeg";
};
break;
case 'instagram':
{
};
break;
case 'twitter':
{
};
break;
// etc...
default:
;
break;
}
}
// reset the image when the user isn't hovering.
function mouseleave() {
document.getElementById("imageid").src = "https://i.imgur.com/FTAtJutl.jpg";
}
<img id="imageid" src="https://i.imgur.com/FTAtJutl.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
<area alt="facebook" title="" shape="poly" coords="177,214,193,277,475,212,466,149" onmouseover="mouseover('facebook')"
onmouseleave="mouseleave()"
/>
<!--
<area alt="twitter" title="" shape="poly" coords="177,214,193,277,475,212,466,149" onmouseover="mouseover('twitter')"
onmouseleave="mouseleave()"
/>
<area alt="instagram" title="" shape="poly" coords="177,214,193,277,475,212,466,149" onmouseover="mouseover('instagram')"
onmouseleave="mouseleave()"
/>
etc
-->
</map>

How to select previous element in jquery?

i have an image and i would like to assign which element of the area is clickable.
The red stripe shouldn't be clickable.
My HTML solution:
<img src="" data-highres="" usemap="#img">
<map name="img">
<area class="show-modal" shape="rect" cords="" href="">
</map>
So when i click on the white area it should show me a modal window with "this" image.
my jquery solution:
$('.show-modal').on('click', function(e){
e.preventDefault();
var highres = $('').attr("data-highres");
$('.modal').css('display', 'block');
$('#modal-image').attr('src', highres);
});
When i click on the image(white area) it sould show me a high resulation image in a modal window.
I left the $("") selector empty because i don't know how to select the img attribute -> data-highres=""
I tried with the previous selector but it didn't work.
Actually you have to do the following operations of DOM traversal to get what you need:
Select the parent node of the <area> element, which is <map>. This can be done either using $(this).closest('map') or $(this).parent('map').
Select the image sibling, which is by chaining .prev('img') to the selector above
Therefore, something like this should work:
$('.show-modal').on('click', function(e){
e.preventDefault();
var highres = $(this).closest('map').prev('img').attr('data-highres');
$('.modal').css('display', 'block');
$('#modal-image').attr('src', highres);
});
You can use below code, modify as per your requirements.
var getData = $('#imgID').data("highres");
console.log(getData);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="url/to/your/image.jpg" id="imgID" data-highres="high" alt="image_name" usemap="#Map" />
<div name="Map" id="Map">
</div>
Just add a class to your image like this:
<img src="" data-highres="Hello" class="imgCLASS" usemap="#img">
and then make this:
var highres = $('.imgCLASS').attr("data-highres");
alert(highres); // Hello
https://jsfiddle.net/myrma60b/1/
Refer the element by DOM traversal:
$('.show-modal').on('click', function(e){//called when the element with show.modal class is clicked
alert("map area clicked");
});
$('.show-modal').parent().prev().on('click', function (e) {//called when the element before the map area element is clicked
alert("previous element of map area is clicked");
});
The later one works for all types of element tags. If you want it to be specific to image types, specify the element type in prev(). i.e.,
$('.show-modal').parent().prev('img').on('click', function (e) {//called when the element before the map area element is clicked
alert("Image is clicked");
});
<html>
<head>
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
<img src="pages/dn/low/dn-02.jpg" data-highres="pages/dn/high/dn-02.jpg" usemap="#image">
<map name="image">
<area class="show-modal" shape="rect" coords="1,1,725,1094" alt="clickable">
</map>
<br>
<img src="pages/dn/low/dn-03.jpg" data-highres="pages/dn/high/dn-03.jpg" usemap="#image">
<map name="image">
<area class="show-modal" shape="rect" coords="1,1,725,1094" alt="clickable">
</map>
<script>
$('.show-modal').on('click', function(){
var $this = $(this).parent('map').prev('img').attr('data-highres');
alert($this);
});
</script>
</body>
</html>
here is simple code. i get all the time the same attr. ->data-highres="pages/dn/high/dn-02.jpg"

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.

image map access ID (area)

i have a image map and I want that the polygons will be highlighted until the next polygon is clicked.
like: click plogone 1 -become highlighted
than: click polygone 2 -becomes highlighted (polygon 1 is not highlighted)
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jquery.maphilight.js"></script>
<script>
$(function() {
var nr = 0;
$('.map').maphilight({ strokeColor: 'ff0000', strokeWidth: 5});
$(polymap).click(function(e) {
var data = $(high1).mouseout().data('maphilight') || {};
data.alwaysOn = !data.alwaysOn;
$(high1).data('maphilight', data).trigger('alwaysOn.maphilight');
});
});
</head>
<body>
<br>
<img class="map" src="pb90%20%28150%29.html.png" ismap="ismap" usemap="#mapmap" alt="html imagemap created with QGIS" border="0">
<map id="polymap" name="mapmap">
<area id='high1' shape="poly" href="PDF1.pdf" target="cont" coords="834,366,837,363,840" alt="">
<area id='high2' shape="poly" href="PDF2.pdf" target="cont" coords="940,236,941,236" alt="">
<area id='high3' shape="poly" href="PDF3.pdf" target="cont" coords="831,345,828,348,824" alt="">
....
My problem is that I can't access the ID of the areas. If you click the polygons only the area with "high1" will be high lighted.
So instead of that
$(high1).
I would need a kind of event handler.
It would be really cool If someone knows a solution :-)
cheers Immanuel
Your jquery selector can be on area, and then the function that would run on the click event would be dependent on the area you clicked. Within your function, you can use the this keyword to refer to the calling object.
$('area').click(function (e) {
var data = $(this).mouseout().data('maphilight') || {};
data.alwaysOn = !data.alwaysOn;
$(this).data('maphilight', data).trigger('alwaysOn.maphilight');
});

Categories