We Keep Coding

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/

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"

How do I display a GIF image when hovering over a point in another image in HTML and CSS?

I have a map with some locations marked with orange dots.
The map is in .jpg image format.
I placed it on my website, now I want to display another gif animated image, when someone hovers over a particular orange dot in the map image. Refer to the picture on the link below. The gif image to be displayed in every dot is different.
Help me solve this problem using HTML, CSS, JavaScript.
https://drive.google.com/file/d/0B5s1EBTl5WExcUNBTXR0aHFmYjQ/edit?usp=sharing

you can use an imagemap in combination with one or more DIVs
you show or hide and if needed change the position of your DIVs via JavaScript on mouseover
a little example
<html>
<head>
<style type="text/css">
#myOverlay{visibility:hidden; z-index:10; position:absolute; top:100px; left:100px;}
</style>
<script language="JavaScript">
function showDiv(imgUrl, x, y)
{
var myDiv = document.getElementById("myOverlay"); //get the div element
myDiv.innerHTML = "<img src='" + imgUrl + "' />" //overwrite the content
myDiv.style.top = y; //set position top
myDiv.style.left = x; //set position left
myDiv.style.visibility = "visible"; //show the div
}
function hideDiv()
{
document.getElementById("myOverlay").style.visibility = "hidden"; //hide the div
}
</script>
</head>
<body>
<img src="yourFile.jpg" usemap="#yourMapName"></img>
<map name="yourMapName">
<area shape="rect" coords="11,10,59,29" href = '#' onMouseOver="JavaScript:showDiv('yourOverlayImage1.gif',59,29);" onMouseOut="JavaScript:hideDiv()"alt="anyAlt1" title="anyTitle1">
<area shape="rect" coords="110,100,159,129" href = '#' onMouseOver="JavaScript:showDiv('yourOverlayImage2.gif',159,129);" onMouseOut="JavaScript:hideDiv()"alt="anyAlt2" title="anyTitle2">
</map>
<div name="myOverlay" id="myOverlay"></div>
</body>
</html>
or
you can draw your image as svg (http://www.w3.org/2000/svg) - i would not recommend that cause it's a lot of work

You can use iframe to show a image:
<iframe frameborder="0" scrolling="no" width="25" height="25" src="image1.gif" name="imgbox" id="imgbox">
And make a dot a link which will load new picture in iframe:
dot

How to popUp image and link with javascript or jQuery?

If you know about how to do something like this,
I mean how to load a javascript or jQuery popUp image onLoad (once) and how can i link it to somewhere else, please help me =(
Thanks a lot..

http://lokeshdhakar.com/projects/lightbox2/
window.onload= function(){
var myEvt = document.createEvent('MouseEvents');
myEvt.initEvent(
'click' // event type
,true // can bubble?
,true // cancelable?
);
document.getElementById('myLink').dispatchEvent(myEvt);
}

here's a tutorial on how to create the modal container
http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
once you have it you can trigger the modal window inside
$(document).ready(function(){
// trigger modal here
});

It looks like the div is just set to visible when the page loads.
<div id="lightBox" style="width:100%; height:100%; position:absolute; z-index:1100; background:url(images/bgfb.png);display:block">
<div id="ekranKapla" style="position: absolute; top: 50%; left: 50%; margin-left:-255px; margin-top:-196px;display:block">
<img src="/images/lightbox.png" border="" alt="facebook" useMap="#mapThis" />
</div>
</div>
<map name="mapThis" id="mapThis">
<area shape="rect" coords="470,2,509,37" onclick="javascript:lightBoxKapat();" href="#" />
<area shape="rect" coords="293,294,496,370" href="http://www.facebook.com/EczacibasiToplulugu" target="_blank" title="facebook " />
</map>
<script type="text/javascript">
function lightBoxKapat() {
document.getElementById("lightBox").style.display = "none";
document.getElementById("ekranKapla").style.display = "none";
}
</script>
Then the user can click on it to hide it.

Don't use JavaScript for that - at least not to show it. To have a picture displaying when the page loads, just code the HTML that way.
To show or hide it later, just use:
$("#popupContainer").show();
$("#popupContainer").hide();
Working demo: http://jsfiddle.net/7rVaZ/

Getting flicker from transparent PNG used as mouseover image

I did a little bit of poking around for this, but couldn't find the exact thing I am trying to do here. Basically I have an image map, where I wanted to have hidden layers appear over the top of the image on mouseover. There are 5 different hotspots, and 5 different hidden layers that correspond, and show up only when you mouseover the corresponding hotspot.
The problem is this: each of the hidden layers on top contains a PNG with transparent bits, and the PNG is revealed pretty much in the same spot where the user's mouse is. When it is called up by a mouseover, the PNG flickers rapidly...I presume because the page is having trouble determining whether the mouse is over or off the image, due to its transparency...?
Anyone have a clever solution to this?
I've got this in the head:
<script type="text/javascript" language="JavaScript">
<!--
function HideContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "block";
}
function ReverseContentDisplay(d) {
if(d.length < 1) { return; }
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
//-->
</script>
And this in the body of the page:
<div id="homeowners"
style="display:none;
position:absolute;
left:0px;
top:39px;
padding: 5px;
z-index:10;">
<img src="<?php bloginfo('template_directory'); ?>/images/homeowners-over.png" width="257" height="107" alt="Homeowners" /></div>
<div id="dealers"
style="display:none;
position:absolute;
left:319px;
top:39px;
padding: 5px;
z-index:10;">
<img src="<?php bloginfo('template_directory'); ?>/images/dealers-over.png" width="257" height="107" alt="Dealers" /></div>
<div id="commercial"
style="display:none;
position:absolute;
left:0px;
top:509px;
padding: 5px;
z-index:10;">
<img src="<?php bloginfo('template_directory'); ?>/images/commercial-over.png" width="257" height="107" alt="Commercial" /></div>
<div id="importers"
style="display:none;
position:absolute;
left:319px;
top:509px;
padding: 5px;
z-index:10;">
<img src="<?php bloginfo('template_directory'); ?>/images/importers-over.png" width="257" height="107" alt="Importers" /></div>
<img src="<?php bloginfo('template_directory'); ?>/images/aww_home.jpg" width="586" height="638" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="poly" coords="3,4,293,4,293,25,4,313" href="#"
onmouseover="ShowContent('homeowners'); return true;"
href="javascript:ShowContent('homeowners')"
onmouseout="HideContent('homeowners'); return true;"
href="javascript:HideContent('homeowners')">
<area shape="poly" coords="296,5,583,4,584,312,296,27" href="#"
onmouseover="ShowContent('dealers'); return true;"
href="javascript:ShowContent('dealers')"
onmouseout="HideContent('dealers'); return true;"
href="javascript:HideContent('dealers')">
<area shape="poly" coords="294,32,8,317,295,603,575,318" href="#" />
<area shape="poly" coords="5,322,4,633,294,634,294,608" href="#"
onmouseover="ShowContent('commercial'); return true;"
href="javascript:ShowContent('commercial')"
onmouseout="HideContent('commercial'); return true;"
href="javascript:HideContent('commercial')">
<area shape="poly" coords="299,607,299,634,582,634,580,325" href="#"
onmouseover="ShowContent('importers'); return true;"
href="javascript:ShowContent('importers')"
onmouseout="HideContent('importers'); return true;"
href="javascript:HideContent('importers')">
</map>
Many thanks!

Since you have not mentioned on which elements you have added mouseover and mouseout event handlers, I am going to assume that you are calling showContent to show png when mouse is moved over the div and you are calling hideContent to hide the png when mouse is over the png.
If this is what is happening then the reason for the flicker is:
When mouse is moved over div, the png is shown over the div. Therefore the mouse is now over png due to which mouseover event is fired on png which hides it. Now the mouse is over the div therefore, the mouseover event is fired on div due to which png is shown. This will keep on going.
Solutions:
1. Place the png (on showing) a little further from the mouse so that the png is not directly below the mouse cursor.
2. Or, remove the mouseover event handler from the png and add the mouseout handler to div to hide the png.

I corrected my problem when I added .show to the element that pops up as well. The browser was getting confused when my mouse would transition from one element to the other.
$(function () {
$('.parent_div').hover(function () {
$('.show_popup').show();
}, function () {
$('.show_popup').hide();
});
});
$(function () {
$('.show_popup').hover(function () {
$('.show_popup').show();
});
});