I have an image like this one:
I want to make every dot clickable with different URL and furthermore I would like to implement a pop up text when the mouse is over one dot.
How can I do that with javascript and css? Any library?
You can do this by online mapping tool for your image.
I have tried to map your image from this link.
You can see I have made a clickable link on a couple of dots and set custom text as the title to display text on hover.
I hope this will help you. Thanks.
<img id="Image-Maps-Com-image-maps-2017-04-25-084654" src="https://i.stack.imgur.com/FbxJg.png" border="0" width="286" height="322" orgWidth="286" orgHeight="322" usemap="#image-maps-2017-04-25-084654" alt="" />
<map name="image-maps-2017-04-25-084654" id="ImageMapsCom-image-maps-2017-04-25-084654">
<area alt="" title="custom-text" href="http://www.image-maps.com/" shape="rect" coords="228,156,255,181" style="outline:none;" target="_self" />
<area alt="" title="custom-text" href="http://www.image-maps.com/" shape="rect" coords="129,173,156,198" style="outline:none;" target="_self" />
<area shape="rect" coords="284,320,286,322" alt="Image Map" style="outline:none;" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_0" />
</map>
I wrote up a small example for you. You can do this in native HTML.
.container {
position:relative;
}
.container img {
width:200px;
}
.dot {
color:white;
position:absolute;
padding:10px;
background:black;
border:1px solid white;
border-radius:50%;
font-size:0px;
-webkit-transition: all 2s; /* Safari */
transition: all 2s;
}
.dot:hover {
text-indent: auto;
width:auto;
font-size:12px;
z-index:1;
border-radius:0;
}
<div class="container">
<img src="https://images.craigslist.org/00808_ha1rdMjpXZR_1200x900.jpg" />
<div class="dot" style="left:10px;top:10px;">
I'm testing code
</div>
<div class="dot" style="left:50px;top:50px;">
I'm testing code2
</div>
<div class="dot" style="left:10px;top:70px;">
I'm testing code3
</div>
</div>
You can use the HTML tag to do so, Please check the tag in html it might serve your purpose.
Check the below code may help you:
Demo Link
And you can also use <canvas> or <svg> with the help of Fabric.js you can get the thing done in much more advance way.
Check this link you will get really cool stuff to do with image or canvas and svg:
MDN - Canvas API Tutorial
Thanks
function runfunc(planetId) {
console.log('You selected:', planetId);
}
.as-console-wrapper { max-height: 2.8em !important; }
<p>Click on the Sun or on one of the planets to see which one was selected.</p>
<img src="https://www.w3schools.com/tags/planets.gif" width="145" height="126"
alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" id="Sun" onclick="runfunc(this.id)">
<area shape="circle" coords="90,58,3" alt="Mercury" id="Mercury" onclick="runfunc(this.id)">
<area shape="circle" coords="124,58,8" alt="Venus" id="Venus" onclick="runfunc(this.id)">
</map>
Related
The div class="first" is a top menu that I wanna try to make it fix on scroll
so I used this code, everything is working fine but the problem is that when I start scrolling half of the next image mid-top.jpeg
in the next div class="second" disappear.
it is like image mid-top.jpeg comes under the image top.jpeg
How can I fix this?
thanks!
var fixmeTop = $('.first').offset().top;
$(window).scroll(function() {
var currentScroll = $(window).scrollTop();
if (currentScroll >= fixmeTop) {
$('.first').css({
position: 'fixed',
top: '0',
});
} else {
$('.first').css({
position: 'static'
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="first">
<img src="images/top.jpeg" alt="">
<map name="">
<area target="" alt="" title="home" href="index.html" coords="1,60,95,115" shape="rect">
</map>
</div>
<div class="second">
<img src="images/mid-top.jpeg" alt=""> <!--problem here-->
<map name="">
<area shape="" coords="" href="" alt="">
</map>
</div>
You can solve this with CSS only.
Set .first to position: fixed
Vertically offset .second by the height of .first using margin-top
.first {
height: 150px;
position: fixed;
top: 0;
}
.second {
margin-top: 150px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="first">
<img src="https://via.placeholder.com/350x150">
<map name="">
<area target="" alt="" title="home" href="index.html" coords="1,60,95,115" shape="rect">
</map>
</div>
<div class="second">
<img src="https://via.placeholder.com/350x150">
<map name="">
<area shape="" coords="" href="" alt="">
</map>
</div>
Is img top.jpeg suppose to be part of the fixed menu? If not, it should be moved out of the .first div. That could explain why your second image is moving under the first.
I am designing a Sharepoint page with script editor. I have an image which I have used area tag on. So with onmouseover another image pops up and it reverts back onmouseout. I further want to use another area tag on this new image onmouseover where I can add area tags. Something like a nested image map.
<img src="planets.gif" width="145" height="126" alt="Planets" name="myname"
usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" onmouseover=myname.src="C:\Users\Quabynar\Pictures\sun.gif" ; onmouseout=myname.src="C:\Users\Quabynar\Pictures\planets.gif">
<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>
I expect to put another map with area tags on the sun.gif when onmouseover where I can use href to a link about description the Sun. I don't seem to get around it.
How about this demo?
<style type="text/css">
/* ------------- CSS Popup Image ------------- */
#thumbwrap {
position: relative;
width: 252px;
height: 252px;
}
.thumb img {
border: 1px solid #000;
margin: 3px;
float: left;
}
.thumb span {
position: absolute;
visibility: hidden;
}
.thumb:hover, .thumb:hover span {
visibility: visible;
top: 0;
left: 250px;
z-index: 1;
}
</style>
<div id="thumbwrap">
<a class="thumb" href="#"><img width="250" src="https://www.w3schools.com/howto/img_snow.jpg" alt=""><span><img src="https://www.w3schools.com/howto/img_snow.jpg" alt=""></span></a>
</div>
https://www.w3schools.com/code/tryit.asp?filename=G48M3NZQAW0K
Finally I was able to get the results I wanted. I didn't need another map. I put all the area tags in one map and used functions for image switches when onmouseover and onmouseout. It was pretty straightforward.
<html>
<body>
<img src="planets.png" width="745" height="926" alt="Planets" name="myname"
ismap="ismap"
usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126"
onmouseover=myname.src="C:\Users\Quabynar\Pictures\sun.png" ;
onmouseout=myname.src="C:\Users\Quabynar\Pictures\planets.gif">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
<area target="_blank" href=".../hackathon.htm" shape="rect" coords="73,250,234,297"
onmouseover="cycleprep()"; onmouseout="">
<area target="_blank" href="../mindmap.htm" shape="rect" coords="128,343,279,385"
onmouseover="cycleprep()"; onmouseout="" >
<area target="_blank" href=".../prep_more.htm" shape="rect" coords="206,414,375,459"
onmouseover="cycleprep()"; onmouseout="">
</map>
<script LANGUAGE="javascript">
image1=new Image
image1.src =".../sun.png"
image2=new Image
image2.src=".../planets.png"
function cycleprep() {
document.Auditcycle.src=image1.src;return true;
}
function cyclefull() {
document.Auditcycle.src=image2.src; return true;
}
</script>
</body>
</html>
So I have this body image that I want to use as a kind of navigation point to access rehabilitation exercises for each body part. I've mapped the points on the image so they're clickable, but I then want to make it so when a point is clicked, a dropdown menu appears next to that point with more options. For example, if the shoulder is clicked, the options Weakness, Pain, and Soreness might appear off to the right of that point. I've never used an image map before and I can't find how to make an element appear relative to one of the map points. If I could nest a list inside each point, then I think I could display each menu only when the relevant body part was clicked, but it doesn't look like that's how image maps work. Is there a better way to do this? Here's the codepen I started with, I didn't get very far, but I feel like there must be a better way to accomplish this. https://codepen.io/anon/pen/JJeLWa
CodePen code since I can't link it without including some code:
<div id="frontBody">
<img src="https://i.stack.imgur.com/YDMcB.png" alt="frontBody" usemap="#frontBody" id="frontBody">
</div>
<map name="frontBody">
<area shape="rect" coords="176,106,199,136" alt="Shoulder">
<area shape="rect" coords="171,270,197,307" alt="Hip">
<area shape="rect" coords="225,280,254,309" alt="Wrist">
<area shape="rect" coords="145,428,171,459" alt="Knee">
<area shape="rect" coords="138,547,163,578" alt="Wrist">
</map>
Following is not very advanced regarding positioning or style but would give you a starting point (done using jQuery library).
var items ={
Shoulder:[{txt:'Sh #1',link:'http://google.com'},{txt:'Sh #2',link:'http://google.com'}],
Hip:[{txt:'Hip #1',link:'http://google.com'},{txt:'Hip #2',link:'http://google.com'}],
Knee:[{txt:'Knee #1',link:'http://google.com'},{txt:'Knee #2',link:'http://google.com'}],
Wrist:[{txt:'Wrist #1',link:'http://google.com'},{txt:'Wrist #2',link:'http://google.com'}]
}
var $menu = $('#menu').click(function(){
$(this).hide()
})
$('area').click(function(e) {
var part = this.alt,
$cont = $('#menu-content').empty();
// position menu based on coordinates of click event
$menu.show().css({
top: e.clientY,
left: e.clientX
});
$.each(items[part], function(_, item) {
$cont.append('' + item.txt + '')
})
})
#menu {
position: absolute; background: white;
border: 2px solid #ccc;
padding: 20px;
display: none;
width: 200px;
}
#menu a {
display: block;
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="frontBody">
<img src="https://i.stack.imgur.com/YDMcB.png" alt="frontBody" usemap="#frontBody" id="frontBody">
</div>
<map name="frontBody">
<area shape="rect" coords="176,106,199,136" alt="Shoulder">
<area shape="rect" coords="171,270,197,307" alt="Hip">
<area shape="rect" coords="225,280,254,309" alt="Wrist">
<area shape="rect" coords="145,428,171,459" alt="Knee">
<area shape="rect" coords="138,547,163,578" alt="Wrist">
</map>
<div id="menu">
<div id="menu-hide">
Hide[X]<br>
</div>
<div id="menu-content">
</div>
</div>
JS fiddle demo
I think I can help, using some Javascript.
<map name="frontBody">
<area shape="rect" coords="176,106,199,136" alt="Shoulder" onclick='showCoords(event)'>
<area shape="rect" coords="171,270,197,307" alt="Hip" onclick='showCoords(event)'>
<area shape="rect" coords="225,280,254,309" alt="Wrist" onclick='showCoords(event)'>
<area shape="rect" coords="145,428,171,459" alt="Knee" onclick='showCoords(event)'>
<area shape="rect" coords="138,547,163,578" alt="Wrist" onclick='showCoords(event)'>
</map>
<div style='display:none;' id='menu'>
<ul>
<li>
Item 1
</li>
</ul>
</div>
Now in your script file.
function drawBox(x,y){
document.getElementById('menu').style.display = 'block';
document.getElementById('menu').style.position = 'absolute';
document.getElementById('menu').style.top = y+'px';
document.getElementById('menu').style.left = x+'px';
}
function showCoords(event) {
var x = event.clientX;
var y = event.clientY;
drawBox(x,y);
}
I didn't style it for you, because I didn't know what you wanted.
Fiddle
Of course if you want to use jQuery, that makes things a lot easier.
So I have an image map called map and I want the text to show up within my div #show_message. The image map is on the left and the text will appear on the right side. I believe the only problem that I'm facing right now is integrating the show_message div into the script below. Also how do I hide the text before it appears on click? I thought the .()hide would do it but it doesn't work. Please help!
This is my div
<style>
#show_message {
float: right;
width: 500px;
height: 750px;
position: relative;
padding:20px;
margin:20px;
background:#fff;
color:#000
},
map {
float: left;
}
</style>
This is my map
<img src="{{ 'image.jpg' | asset_url }}" alt="" usemap="#map" id="" />
<map id="map" name="map">
<area alt="" item="abc" href="#" shape="rect" coords="33,110,395,217" />
<area alt="" item="efg" href="#" shape="rect" coords="35,222,395,321" />
<div id="show_message">Click to see text.</div>
<div id="abc show_message" class="display">You clicked abc!</div>
<div id="def show_message" class="display">You clicked def!</div>
</body></html>
This is the script
<script type="text/javascript">
$('[item]').click(function() {
var item=$(this).attr('item');
$(".display").hide();
$("#"+item).show();
return false;
});
</script>
To hide the text you have to do something like this
<div id="abc show_message" class="display">You clicked abc! <input type="button" id="hide" name="hide" value="Hide" /></div>
And the function hide in your js is:
$('#hide').click(function(){
$(".display").hide();
});
I have an area map using rect coordinates to highlight tables of a floor plan that are occupied. Occupied tables will, when you hover over them, display the name of the company. Easy enough.
What I want to do is take those coordinates and, using a div class for each table's coordinate, have a darker opacity over it for visual reference. It's easy enough to calculate the top/left value for each table as well as calculating the width and height. I just don't know how to take those values in jQuery to add this feature. Here's a code snippet.
<img src="images/floor_plan_2011_small.png" alt="" usemap="#fp" />
<map name="fp" id="fp">
<area shape="rect" coords="419,264,439,285" href="javascript://" title="Booth 73" alt="Booth 73" />
<area shape="rect" coords="141,366,164,385" href="javascript://" title="Booth 62" alt="Booth 62" />
<area shape="rect" coords="119,385,142,402" href="javascript://" title="Booth 64" alt="Booth 64" />
</map>
Don't bother with an image map. There's no point:
<div class="map">
<img src="images/floor_plan_2011_small.png" />
<a style="top:419px; right:264px; height:20px; width:21px" href="javascript://" title="Booth 73" />
<a style="top:141px; right:366px; height:23px; width:19px" href="javascript://" title="Booth 62" />
<a style="top:119px; right:385px; height:23px; width:27px" href="javascript://" title="Booth 64" />
</div>
Add this to your stylesheet, and you're done:
.map {
position: relative;
}
.map a{
position: absolute;
display: block;
background: black;
opacity: 0.1;
}
.map a:hover{
opacity: 0.5;
}
If you add a container to the image, you can append an overlay to the image via JavaScript (or CSS):
<span id="img-span"><img src="images/floor_plan_2011_small.png" alt="" usemap="#fp" /></span>
<map name="fp" id="fp">
<area shape="rect" coords="419,264,439,285" href="#" title="Booth 73" alt="Booth 73" />
<area shape="rect" coords="141,366,164,385" href="#" title="Booth 62" alt="Booth 62" />
<area shape="rect" coords="119,385,142,402" href="#" title="Booth 64" alt="Booth 64" />
</map>
JS--
//cache the span wrapper so it only has to be selected once
var $imgSpan = $('#img-span');
//bind a mouseleave event handler to the image map so when the user moves the cursor away from the image map the overlays will be removed
$('#fp').on('mouseleave', function () {
$imgSpan.children('.overlay').remove();
//bind a mouseenter event handler to the image map area tags to create an overlay
}).children('area').on('mouseenter', function () {
var $this = $(this);
$imgSpan.children('.overlay').remove()
.prepend('<div class="overlay" style="top: ' + $this.css('top') + '; left: ' + $this.css('left') + '; width: ' + $this.css('width') + '; height: ' + $this.css('height') + ';"></div>');
});
CSS--
#img-span .overlay {
position : absolute;
opacity : 0.6;
filter : alpha(opacity=60);
z-index : 1000;
}
Note: .on() is new in jQuery 1.7 and in this case is the same as .bind().
Also-Note: I don't ever use image maps so I'm not sure that getting their top/left/width/height style properties is possible, if not then you can just get the coords attribute ($(this).attr('coords')) and parse it into the proper information.