I used map and area attr and for styling them , i used maphighlight.js which is jquery. When i hover , it shows borders and color fillings etc.
Now i want to put text center of each areas which are determined with coordinates. When page loads , i want to see texts on center of areas "without hover" and after hover i wanna see borders ,color etc. Thanks for your helps.
Here's my code. 1)Maphilight
$(document).ready(function(){
$('.map').maphilight();
});
2)I tried to write text but not works properly
$(function() {
$('area').each(function(){
var txt=$(this).data('name');
var coor=$(this).attr('coords');
var coorA=coor.split(',');
var left=coorA[0];
var top=coorA[1];
var $span=$('<span class="map_title">'+txt+'</span>');
$span.css({top: top+'px', left: left+'px', position:'absolute'});
$span.appendTo('.content');
})
})
This is mapping
<div class="content">
<img src="ozak.jpg" alt="" class="map" width="2000" height="2000" border="0" usemap="#demo">
</div>
<map name="demo">
<area id="51" alt="D1" class ="tooltip" title="3+1 150 m² Deniz Manzaralı " href="javascript: alert('Daire 5127 Satılmıştır!')" coords="588,271,816,369" shape="rect" data-maphilight='{"strokeColor":"000000","strokeWidth":5,"fillColor":"F72E06","fillOpacity":0.7}' data-name="Daire1">
<area alt="" title="" href="javascript: alert('Daire 5287 Satılıktır!')" coords="1251,278,1374,367" shape="rect" data-maphilight='{"strokeColor":"000000","strokeWidth":5,"fillColor":"00BD06","fillOpacity":0.7}' data-name="Daire2">
<area alt="" title="" href="javascript: alert('Daire 8692 Satılmıştır!')" coords="600,469,807,554" shape="rect" data-maphilight='{"strokeColor":"000000","strokeWidth":5,"fillColor":"F72E06","fillOpacity":0.7}' data-name="Daire3">
</map>
CSS
#map {
position:relative
}
.map_title {
position:absolute;
}
First thing is that I have used my own image.
How coords="588,271,816,369" works:
Here it is x1,y1,x2,y2 where x1,y1 is for top-left corner of area and x2,y2 is bottom-right corner.
Second thing is that you need to parse these cordinates to integer to calculate top/left attribute of your text.
Now, you can calculate left attribute by using this formula. parseInt(coorA[0])+((parseInt(coorA[2])-parseInt(coorA[0]))/2). And same for top
Please note, here the point I calculated is the exact center of your rect but it is appearing sligh the right side as it is starting from the exact center point. You can apply some more mathematics to get it exactly center aligned.
EDIT
You can calculate the width of your span and get its width. After that, divide by 2 will give you the pixes you need subtract to get your labels accurately in the center. Here, I assume some pixels are being utilized in the border so I have back 9 pixels to it as an adjustment. It can be removed if you feel it's working fine.
$(function() {
$('.map').maphilight();
$('area').each(function(){
var txt=$(this).data('name');
var coor=$(this).attr('coords');
var coorA=coor.split(',');
var left=parseInt(coorA[0])+((parseInt(coorA[2])-parseInt(coorA[0]))/2);
var top=parseInt(coorA[1])+((parseInt(coorA[3])-parseInt(coorA[1]))/2)
var $span=$('<span class="map_title">'+txt+'</span>');
$span.css({top: top+'px', left: left+'px', position:'absolute'});
$span.appendTo('.content');
$span.css({left:(left-Math.ceil($span.width()/2)+9)+'px'})
})
});
#map {
position:relative
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/maphilight/1.4.0/jquery.maphilight.min.js" integrity="sha256-nUK4JHJVwdj7H1SYkkMcuE2unpjH5vYOe3mGEVu/69Q=" crossorigin="anonymous"></script>
<div class="content">
<img src="https://i.picsum.photos/id/372/200/300.jpg" alt="" class="map" width="2000" height="2000" border="0" usemap="#demo">
</div>
<map name="demo">
<area id="51" alt="D1" class ="tooltip" title="3+1 150 m² Deniz Manzaralı " href="javascript: alert('Daire 5127 Satılmıştır!')" coords="588,271,816,369" shape="rect" data-maphilight='{"strokeColor":"000000","strokeWidth":5,"fillColor":"F72E06","fillOpacity":0.7}' data-name="Daire1">
<area alt="" title="" href="javascript: alert('Daire 5287 Satılıktır!')" coords="1251,278,1374,367" shape="rect" data-maphilight='{"strokeColor":"000000","strokeWidth":5,"fillColor":"00BD06","fillOpacity":0.7}' data-name="Daire2">
<area alt="" title="" href="javascript: alert('Daire 8692 Satılmıştır!')" coords="600,469,807,554" shape="rect" data-maphilight='{"strokeColor":"000000","strokeWidth":5,"fillColor":"F72E06","fillOpacity":0.7}' data-name="Daire3">
</map>
Related
I have an image map and I would like to use the built-in tooltips provided by Bootstrap when a user hovers over a specific part of that image.
The issue I'm having is that the tooltip does not show up in the right place. Right now it shows at the top left corner of the image for all areas of the image map.
How can I move the tooltips under their respective areas without having to reposition each tooltip individually? It should automatically be within the rec defined.
Here is the map code I am using:
<img id="Image-Maps-Com-process-map" src="images/osh drawing.png" border="0" width="600" height="600" orgWidth="600" orgHeight="600" usemap="#process-map" alt="" />
<map name="process-map" id="ImageMapsCom-process-map">
<area alt="" title="Wood Burning Stove" href="#" class="tooltip-bot" data-original-title="Title text here" shape="rect" coords="478,186,572,296" style="outline:none;" target="_self" />
<area alt="" title="Rough Cut Lumber" href="#" class="tooltip-bot" data-original-title="Title text here" shape="rect" coords="184,1,395,148" style="outline:none;" target="_self" />
<area alt="This is the description maybe" title="Distributing" href="#"class="tooltip-bot" data-original-title="Title text here" shape="rect" coords="45,398,304,577" style="outline:none;" target="_self" />
<area alt="" title="Shipping Materials" href="#"class="tooltip-bot" data-original-title="Title text here" shape="rect" coords="9,52,141,183" style="outline:none;" target="_self" />
<area alt="" title="Sawdust" href="#"class="tooltip-bot" data-original-title="Title text here" shape="rect" coords="302,311,410,385" style="outline:none;" target="_self" />
<area alt="" title="Electricity" href="#"class="tooltip-bot" data-original-title="Title text here" shape="rect" coords="430,0,570,113" style="outline:none;" target="_self" />
<area alt="manufacturing" title="Manufacturing" href="#"class="tooltip-bot" data-original-title="Title text here" shape="poly" coords="348,193,213,197,188,313,221,368,296,362,300,310,357,302,363,193" style="outline:none;" target="_self" />
</map>
I'm no expert but I feel like this is because the area elements have no actual heights or widths. Their boundaries are established using the coords attribute which likely is not looked at by bootstrap.
There may be a better way to do this, but a simple fix would be to add the below code to your page.This will position the tooltip a fixed distance from the pointer itself.
Here is a working jsFiddle
$(document).mousemove( function(e) {
var mouseX = e.pageX - $('#Image-Maps-Com-process-map').offset().left - 40;
var mouseY = e.pageY - $('#Image-Maps-Com-process-map').offset().top + 20;
$('.tooltip').css({'top':mouseY,'left':mouseX}).fadeIn('slow');
});
I know that this is a fairly old and answered question, but I figured I would throw this in as I ran into the same issue and couldn't find an exact answer elsewhere. I have a site that uses an older asp.net chart control that draws image maps over the graphs so that tooltips can be displayed. To use tooltips on its area attributes and get them in the right places, I used the code below. Note that I still had to use offset amounts, but it worked fairly well. ".maparea" is a class that is dynamically applied to all of the map area attributes. I also used mouseover as I did not need the tooltip to move around constantly.
$('.maparea').mouseover(function (e) {
var position = $(this).attr('coords').split(',');
x = +position[0];
y = +position[1];
$('.tooltip').css({ 'top': y + 60, 'left': x - 83 }).fadeIn('slow');
$('.tooltip-arrow').css({ 'left': '50%' });
});
Edit:
I had to put in the tooltip-arrow line because Google Chrome was messing up the alignment of the tooltip arrow. Don't think this will happen in all scenarios but since my page has menus that can be collapsed that will resize the page on their own, they were throwing the alignment off.
My solution for popovers (basing on mouse click position):
var clickTop,clickLeft=0;
$(document).click(function(e){
clickTop =e.pageY;
clickLeft =e.pageX;
});
$().ready(function(){
var popovers=$('[data-toggle="popover"]');
popovers.popover({
placement: 'bottom center',
html:true,
trigger:'focus'
}).on("shown.bs.popover", function(e){
$('.popover').css({top:clickTop,left:clickLeft-100});
})
});
I've adopted #Big EMPin solution (right area tooltips), so it works for me at last:
<div style="position: relative;display: inline-block">
<img style="max-width: 100%" src="../static/img/JavaPyramid.jpg" usemap="#courses">
</div>
<map name="courses">
<area shape="rect" coords="120,10,200,85" href="/view/startjava" data-toggle="tooltip" data-placement="right" title="StartJava" class="maparea">
<area shape="rect" coords="85,100,165,175" href="/view/basejava" data-toggle="tooltip" data-placement="right" title="BaseJava" class="maparea">
<area shape="rect" coords="50,190,130,265" href="/view/topjava" data-toggle="tooltip" data-placement="right" title="TopJava" class="maparea">
<area shape="rect" coords="20,280,100,355" href="/view/masterjava" data-toggle="tooltip" data-placement="right" title="MasterJava" class="maparea">
</map>
<script>
$('.maparea').mousemove(function (e) {
var pos = $(this).attr('coords').split(',');
$('.tooltip').css({'left': parseInt(pos[2]) + 5, 'top': parseInt(pos[1]) + 35}).fadeIn('slow');
});
</script>
Solution can be seen at http://javaops.ru/
I would like to put an onclick event on an area element. Here is my setup:
<img id="image" src="wheel.png" width="2795" height="2795" usemap="#Map" >
<map name="Map">
<area class="blue" onclick="myFunction()" shape="poly" coords="2318,480,1510,1284" href="#">
</map>
I have tried 2 different ways to have an onclick event. Firstly i tried this:
$(".blue").click( function(event){
alert('test');
});
I have also tried this:
function myFunction() {
alert('test');
}
Neither of the above work. Do area elements support the above, or do they only support having a href?
Pay attention:
Attribute href is obligatory, without it the area-tag does nothing!
To add a click event, you'll need to block default href.
Your code should start as follows:
$(".blue").on("click", function(e){
e.preventDefault();
/*
your code here
*/
});
Live example here.
Its the shape that's the problem. Your code has set shape equal to polygon but only has 4 points in the coordinates attribute. You need to set shape to rectangle instead.
Set shape="rect" like this:
<img id="image" src="wheel.png" width="2795" height="2795" usemap="#Map" >
<map name="Map">
<area class="blue" onclick="myFunction()" shape="rect" coords="2318,480,1510,1284" href="#">
</map>
Use a class for all elements you want to listen on, and optionally an attribute for behavior:
<map name="primary">
<area shape="circle" coords="75,75,75" class="popable" data-text="left circle text">
<area shape="circle" coords="275,75,75" class="popable" data-text="right circle text">
</map>
<img usemap="#primary" src="http://placehold.it/350x150" alt="350 x 150 pic">
<div class='popup hidden'></div>
Then add your event listeners to all elements in the class:
const popable = document.querySelectorAll('.popable');
const popup = document.querySelector('.popup');
let lastClicked;
popable.forEach(elem => elem.addEventListener('click', togglePopup));
function togglePopup(e) {
popup.innerText = e.target.dataset.text;
// If clicking something else, first restore '.hidden' to popup so that toggle will remove it.
if (lastClicked !== e.target) {
popup.classList.add('hidden');
}
popup.classList.toggle('hidden');
lastClicked = e.target; // remember the target
}
Demo: https://codepen.io/weird_error/pen/xXPNOK
Based on your comments, you just need this:
$("#image").click( function(){
alert("clicked");
//your code here
});
Demo:
http://codepen.io/tuga/pen/waBQBZ
This is a simple one:
<area class="blue" onclick="alert('test');" shape="poly" coords="2318,480,1510,1284" href="#">
Or for any other code:
<area class="blue" onclick="//JavaScript Code//" shape="poly" coords="2318,480,1510,1284" href="#">
Try :
<img src="wheel.png" width="2795" height="2795" alt="Weels" usemap="#map">
<map name="map">
<area shape="poly" coords="2318,480,1510,1284" alt="otherThing" href="anotherFile">
</map>
You souldn't want to add onClick events on area, documentation :
The tag defines an area inside an image-map (an image-map is an image with clickable areas).
Edit : your coords are a bit weird since its supposed to the couples of each vertices (so right now, your polygon is a line)
I found this question by #TimorEranAV
HTML map that displays text instead of linking to a URL
and was marked as duplicate, but i think what he was expecting is this,
<html>
<head>
<title> Program - Image Map</title>
</head>
<body>
<img src="new.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" title = "Sun">
<area shape="rect" coords="82,0,100,126" href="mercur.htm" alt="Mercury" title = "Mercury">
</map>
</body>
</html>
Here the title tag gives the opportunity to add a hover text(tip) to the image map.
I'm on a worpress website and i try to make a mandala with changing images.
I use jquery, and area from css, when the mouse is over a section delimited by an area, i display the image corresponding.
But there is an issue, when i put the mouse over, it take some time(1s) before displaying the image, and when i put the mouse over another section, it's not working well eather..
I think the issue is due to the fact that the new displayed image comes over the mouseover section delimited by the area
here is the html code:
<div class="mandala">
<img id="mandala_img" src="http://example.org/site/wp-content/uploads/2015/02/background.png" usemap="#mandala_map">
<div id="image1"></div>
<div id="image2"></div>
<div id="image3"></div>
<div id="image4"></div>
<div id="image5"></div>
<div id="image6"></div>
<div id="image7"></div>
<div id="image8"></div>
<map name="mandala_map" id="mandala_map">
<area shape="poly" coords="310,10,422,33,498,87,430,154,383,121,310,106" href="http://example.org/site/" id="area_image1">
<area shape="poly" coords="498,87,430,154,479,274,576,274,557,178" href="http://example.org/site/" id="area_image2">
<area shape="poly" coords="479,275,576,275,553,383,499,462,430,393,463,348" href="http://example.org/site/" id="area_image3">
<area shape="poly" coords="499,462,430,393,310,442,310,540,420,516" href="http://example.org/site/" id="area_image4">
<area shape="poly" coords="310,442,310,540,206,518,124,462,192,393" href="http://example.org/site/" id="area_image5">
<!-- <area shape="poly" coords="124,462,192,393," href="http://example.org/site/" id="area_image2">
<area shape="poly" coords="" href="http://example.org/site/" id="area_image2">
<area shape="poly" coords="" href="http://example.org/site/" id="area_image2">-->
</map>
</div>
js code:
<script type="text/javascript">
$('.mandala area').each(function () {
// Assigning an action to the mouseover event
$(this).mouseover(function (e) {
var image = $(this).attr('id').replace('area_', '');
$('#image1').css('display', 'none');
$('#image2').css('display', 'none');
$('#image3').css('display', 'none');
$('#image4').css('display', 'none');
$('#image5').css('display', 'none');
$('#image6').css('display', 'none');
$('#image7').css('display', 'none');
$('#image8').css('display', 'none');
$('#' + image).css('display', 'block');
});
});
</script>
the mandala looks like this:
The image displayed on the mouse over looks like this:
thank you for your help
As per my suggestion, I have made a basic rough fiddle. It is not quite smooth yet but this is just to give proof of concept to my suggestion.
All I am doing is change the background image based on which area is hovered by using a transparent screen for image map
Fiddle link here
Snippet as follows..
$("#area_image1").mouseover(function(e) {
$('.mandala').css("background", "url('http://i.stack.imgur.com/xypLJ.png') no-repeat center");
});
$("#area_image1").mouseout(function(e) {
$('.mandala').css("background", "url('http://i.stack.imgur.com/A690W.png')");
});
.mandala {
background-image: url("http://i.stack.imgur.com/A690W.png");
display: inline-block;
}
#mandala_img {
opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="mandala">
<img id="mandala_img" src="http://dummyimage.com/600x541.png&text=sample" width="600" height="541" usemap="#mandala_map">
<map name="mandala_map" id="mandala_map">
<area shape="poly" coords="310,10,422,33,498,87,430,154,383,121,310,106" href="#area_image1" id="area_image1" />
<area shape="poly" coords="498,87,430,154,479,274,576,274,557,178" href="#area_image2" id="area_image2" />
<area shape="poly" coords="479,275,576,275,553,383,499,462,430,393,463,348" href="#area_image3" id="area_image3">
<area shape="poly" coords="499,462,430,393,310,442,310,540,420,516" href="#area_image4" id="area_image4" />
<area shape="poly" coords="310,442,310,540,206,518,124,462,192,393" href="#area_image5" id="area_image5" />
</map>
</div>
Again this is just a proof of concept. Please do not tell me that this does not work the way you want exactly
Hope this helps.
I have a single, fixed-sized image of 5 stars (each star also being a fixed-width). I would like to track and respond as the use hovers over each of the 5 stars.
I've done some Googling but didn't find a clear way to approach this in JavaScript/jQuery. I know there are APIs for getting the mouse coordinates, but how can I get coordinates within the image?
Any tips or links for getting the mouse coordinates relative to an an image being hovered over?
You could use an image map:
Create five HTML image map areas using Image Mapper, being sure to add one "hotspot" for each of the five stars.
Use the mouseover and mouseout events on the area elements to trigger an action when the mouse pointer collides with and leaves a star.
Demo
Reusing the star image from Prisoner's answer:
http://jsfiddle.net/4GgBu/1/
HTML
<img src="http://i.imgur.com/CwkF2Hr.jpg" usemap="#image-map" />
<map name="image-map" id="image-map">
<area shape="poly" class="star" coords=" 79,11, 63,56, 13,59, 52,91, 36,139, 79,110, 120,139, 105,91, 147,59, 95,56, 79,10" href="#" alt="star 1" />
<area shape="poly" class="star" coords=" 257,9, 241,59, 189,59, 232,91, 215,139, 256,109, 300,138, 285,89, 325,59, 274,58, 259,13" href="#" alt="star 2" />
<area shape="poly" class="star" coords=" 420,58, 367,58, 409,89, 393,138, 436,110, 478,140, 463,90, 504,59, 453,57, 436,11, 420,55" href="#" alt="star 3" />
<area shape="poly" class="star" coords=" 614,12, 596,58, 549,60, 587,89, 571,138, 613,111, 656,141, 640,88, 679,58, 631,57, 618,15" href="#" alt="star 4" />
<area shape="poly" class="star" coords=" 774,58, 726,60, 767,88, 750,139, 792,110, 835,140, 819,91, 862,58, 808,56, 791,9, 776,57" href="#" alt="star 5" />
</map>
<p class="message">Rollover a star to see this message update.</p>
JavaScript
var $stars = $(".star");
$stars.mouseover(function(e){
var starID = $stars.index(e.target) + 1;
$('.message').text('Star ' + starID + ' rolled over');
});
$stars.mouseout(function(e){
var starID = $stars.index(e.target) + 1;
$('.message').text('Star ' + starID + ' rolled out');
});
Perhaps something like this (can be optimised, I just rushed it):
Javascript
var NUMBER_STARS = 5
$("img").click(function(e){
var left = e.pageX-$(this).offset().left;
var selected_stars = 0;
for(var i = 0; i < NUMBER_STARS; i++){
if($(this).width() / NUMBER_STARS * i < left){
selected_stars++;
}
}
alert(selected_stars);
});
Just a little css for the cursor:
img{
width: 300px;
cursor: pointer;
}
HTML
<img src="http://i.imgur.com/CwkF2Hr.jpg" />
jsfiddle: http://jsfiddle.net/wp7sg/1/
I have the following code:
<div style="width:100%" align="center">
<img src="./platform-logos-big.png" alt="Icons of platforms we support: Windows Linux and MacOS X" border="0" align="middle" usemap="#Map">
<map name="Map">
<area shape="rect" coords="0,0,87,100" href="#Linux" alt="Click here to download Linux version of CloudClient">
<area shape="rect" coords="88,0,195,100" href="#Windows" alt="Click here to download Windows version of CloudClient">
<area shape="rect" coords="196,0,300,100" href="#MacOsX" alt="Click here to download MacOsX version of CloudClient">
</map>
</div>
<div class="WTT">
tooltipWin
</div>
<div class="LTT">
tooltipLin
</div>
<div class="MTT">
tooltipMac
</div>
I want to show my pure html tool tips appear on top of mouse and move fllowing it. How to do such thing with jQuery?
Really you should give a common class to all the tooltips, and id to all the elements, but this works against your existing HTML.
$('.WTT,.LTT,.MTT').css({
position: 'absolute'
}).hide()
$('area').each(function(i) {
$('area').eq(i).bind('mouseover', function(e) {
$('.WTT,.LTT,.MTT').eq(i).css({
top: e.pageY,
left: e.pageX
}).show()
})
$('area').eq(i).bind('mouseout', function() {
$('.WTT,.LTT,.MTT').hide()
})
})
fiddle here: http://jsfiddle.net/billymoon/BmxR7/
Stick a title="your tooltip" on your area tag.
You have different options here:
http://wiki.jqueryui.com/w/page/12138112/Tooltip
EDIT: This link may help also: http://docs.jquery.com/Plugins/Tooltip#Delay_and_tracking
Regarding using jQuery UI for map > area > tooltip, you need to add:
$("area").tooltip({ track: true });
And, the styling:
.ui-tooltip { }