Using JQuery hover with HTML image map
You should check out this plugin:
https://github.com/kemayo/maphilight
and the demo:
http://davidlynch.org/js/maphilight/docs/demo_usa.html
if anything, you might be able to borrow some code from it to fix yours.
jquery image map hover effects
You need to understand what <map>
means, it's a simple definition on the click areas of an image
saying $(this).css('border','1px solid #FF0000');
you are telling to make the <map>
have a solid border, but <map>
is just like the <head>
elements, it only contains definitions.
To make the borders in the areas, you really need to have 2 images instead.
Jquery: mouseover event on image map area
I just tried your code in Safari and it works just as intended. 2 separate areas that give out separate alerts. One is alerting "qdk" and other "undefined", as you don’t have an ID attribute for the second map.
Hover effect over a poly image map using jquery and html/css
Here are some of the solutions. Still working on the rest (*the map is not aligned correctly, but that's an easy fix).
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<style type="text/css">
area{
outline-color: red;
}
</style>
<h1>The cities of Hamilton Region</h1>
<img src="http://i.stack.imgur.com/y8cf8.png" alt="Sample Image" usemap="#Map" />
</div>
<map name="Map" id="Map">
<area data-city="City 1" data-pop="Population 1" class="field" alt="Sample Image" title="" href="#" shape="poly" coords="74,175.64999389648437,106,169.64999389648437,95,128.64999389648437,164,111.64999389648437,164,99.64999389648437,191,71.64999389648437,289,164.64999389648437,227,222.64999389648437,196,238.64999389648437,101,262.6499938964844" />
<area data-city="City 2" data-pop="Population 2" alt="Sample Image" title="" href="#" shape="poly" coords="233,331.64996337890625,255,261.6499938964844,238,233.64999389648437,200,242.64999389648437,101,264.6499938964844" />
<area data-city="City 3" data-pop="Population 3" alt="Sample Image" title="" href="#" shape="poly" coords="261,193.64999389648437,277,212.64999389648437,268,220.64999389648437,253,224.64999389648437,248,235.64999389648437,218,237.64999389648437,207,237.64999389648437,242,220.64999389648437" />
<area data-city="City 4" data-pop="Population 4" alt="Sample Image" title="" href="#" shape="poly" coords="314,288.64996337890625,321,272.64996337890625,339,265.6499938964844,341,251.64999389648437,355,255.64999389648437,361,241.64999389648437,349,238.64999389648437,326,198.64999389648437,332,223.64999389648437,322,215.64999389648437,309,211.64999389648437,307,220.64999389648437,291,217.64999389648437,274,221.64999389648437,255,226.64999389648437,251,246.64999389648437,258,262.6499938964844,256,272.64996337890625" />
<area data-city="City 5" data-pop="Population 5" alt="Sample Image" title="" href="#" shape="poly" coords="403,315.64996337890625,422,253.64999389648437,415,251.64999389648437,404,257.6499938964844,383,245.64999389648437,375,247.64999389648437,363,241.64999389648437,358,257.6499938964844,344,253.64999389648437,343,267.6499938964844,325,276.64996337890625,319,288.64996337890625" />
<area data-city="City 6" data-pop="Population 6" alt="Sample Image" title="" href="#" shape="poly" coords="374,308.64996337890625,254,271.64996337890625,232,334.64996337890625,352,388.64996337890625" />
</map>
<h1 id="city">Flamborough, Ontario</h1></br>
<h2 id="pop">Population: 39,220</h2>
<script>
$(document).on('click',$('area'),function(e){
$('#city').html( $(e.target).data('city') );
$('#pop').html( $(e.target).data('pop') );
})
</script>
Update:
Ok, here's some more: There's no way to easily do what you are talking about. You have to use a canvas and actually draw the polygons on the canvas
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<style type="text/css">
area:hover {
outline-color: red;
border: 1px solid blue;
}
img {
width: 490px;
}
</style>
</head>
<body>
<h1>The cities of Hamilton Region</h1>
<img src="file:///Users/alainnisam/Desktop/Screen Shot 2016-02-20 at 12.24.40 AM.png" alt="Sample Image" usemap="#Map" />
<map name="Map" id="Map">
<area data-city="City 1" data-pop="Population 1" class="field" alt="Sample Image" title="" href="#" shape="poly" coords="74,175.64999389648437,106,169.64999389648437,95,128.64999389648437,164,111.64999389648437,164,99.64999389648437,191,71.64999389648437,289,164.64999389648437,227,222.64999389648437,196,238.64999389648437,101,262.6499938964844" />
<area data-city="City 2" data-pop="Population 2" alt="Sample Image" title="" href="#" shape="poly" coords="233,331.64996337890625,255,261.6499938964844,238,233.64999389648437,200,242.64999389648437,101,264.6499938964844" />
<area data-city="City 3" data-pop="Population 3" alt="Sample Image" title="" href="#" shape="poly" coords="261,193.64999389648437,277,212.64999389648437,268,220.64999389648437,253,224.64999389648437,248,235.64999389648437,218,237.64999389648437,207,237.64999389648437,242,220.64999389648437" />
<area data-city="City 4" data-pop="Population 4" alt="Sample Image" title="" href="#" shape="poly" coords="314,288.64996337890625,321,272.64996337890625,339,265.6499938964844,341,251.64999389648437,355,255.64999389648437,361,241.64999389648437,349,238.64999389648437,326,198.64999389648437,332,223.64999389648437,322,215.64999389648437,309,211.64999389648437,307,220.64999389648437,291,217.64999389648437,274,221.64999389648437,255,226.64999389648437,251,246.64999389648437,258,262.6499938964844,256,272.64996337890625" />
<area data-city="City 5" data-pop="Population 5" alt="Sample Image" title="" href="#" shape="poly" coords="403,315.64996337890625,422,253.64999389648437,415,251.64999389648437,404,257.6499938964844,383,245.64999389648437,375,247.64999389648437,363,241.64999389648437,358,257.6499938964844,344,253.64999389648437,343,267.6499938964844,325,276.64996337890625,319,288.64996337890625" />
<area data-city="City 6" data-pop="Population 6" alt="Sample Image" title="" href="#" shape="poly" coords="374,308.64996337890625,254,271.64996337890625,232,334.64996337890625,352,388.64996337890625" />
</map>
<h1 id="city">Flamborough, Ontario</h1></br>
<h2 id="pop">Population: 39,220</h2>
<canvas id="myCanvas" style="border:1px dashed #FF0000;"></canvas>
<script>
$(document).on('click',$('area'),function(e){
$('#city').html( $(e.target).data('city') );
$('#pop').html( $(e.target).data('pop') );
})
$("area").click(function () {
var $input = $(this);
var obj = $input.attr("coords").split(',');
var poly = obj;
//alert(poly);
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(255, 0, 0, .5)';
ctx.beginPath();
ctx.moveTo(poly[0], poly[1]);
for (item = 2; item < poly.length - 1; item += 2) {
ctx.lineTo(poly[item], poly[item + 1])
}
ctx.closePath();
ctx.fill();
});
//$('#myCanvas').css('width',$('img').css('width')).css('height',$('img').css('height')).css('background-image','url(' + $('img').attr('src') + ')');
$('#myCanvas').css('width','490px').css('height','495px');
</script>
</body>
</html>
Image map on mouse over show div
I assume you want the popup effet.
Please see a demo I've prepared for you using your markup
Here's the working jQuery
var $popup = $('.popup');
$('area').on({
mouseover : function(e){
var $this = $(this),
$obj = $('#'+$this.prop('alt'));
$popup.text($obj.text()).css({
top: e.pageY + 25,
left: e.pageX - ($popup.width()/2),
}).show();
},
mouseout: function(){
var $this = $(this),
$obj = $('#'+$this.prop('alt'));
$popup.hide(0).empty();
}
});
change image on hover with image map
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 x
you'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="Sample Image" 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>
Related Topics
Anything Similar in JavaScript to Ruby's #{Value} (String Interpolation)
How to Fix Ajax to Always Fire When Checking Box
Using Queryselectorall to Retrieve Direct Children
Access Elements of Parent Window from Iframe
How to Prevent the Chrome Developer Tools Console from Logging Image 404 Errors
Allow Only Numbers to Be Typed in a Textbox
How Does JavaScript Determine the Number of Digits to Produce When Formatting Floating-Point Values
What Is the Fastest Factorial Function in JavaScript
Syntaxerror: Unexpected Token Function - Async Await Nodejs
JavaScript Module Pattern with Example
Es6 Template Literals VS. Concatenated Strings
Can Mustache Templates Do Template Extension
Understanding Asynchronous Code in Layman's Terms
Google Maps Places API V3 Autocomplete - Select First Option on Enter
Invert Y Axis of L:Crs.Simple Map on Vue2-Leaflet