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.
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>
I've an Europe map. When i mouse-over Italy region, i wish to display the map image and disappear when mouse-out. However, i cant make it works perfectly.
Below is the HTML
function show(id) {
document.getElementById(id).style.display = "block";
}
function hide(id) {
document.getElementById(id).style.display = "none";
}
section {
width: 1000px;
position: relative;
margin: 0 auto;
}
#map01 {
position: absolute;
left: 334px;
top: 562px;
display: none;
}
<img id="map01" src="images/italy.png" />
<img src="images/map.jpg" width="1000" height="816" usemap="#Map" border="0" />
<map name="Map" id="Map">
<area shape="poly" onMouseOver="show('map01')" onMouseOut="hide('map01')" coords="339,597,334,598,338,604,335,613,345,617,346,622,353,622,357,615,366,612,378,618,382,622,387,636,394,647,406,657,421,670,427,676,438,676,441,679,450,684,456,689,457,695,467,696,472,701,475,712,478,719,474,725,474,737,478,737,486,726,486,716,492,715,491,709,485,703,480,698,484,689,489,684,496,689,503,688,504,694,510,695,509,688,502,682,490,676,482,672,472,670,468,665,473,662,460,659,449,658,441,648,438,640,432,630,422,622,416,615,410,606,414,599,410,592,419,589,428,586,428,577,428,572,415,570,411,563,402,561,393,565,386,566,385,575,376,573,369,581,366,585,361,579,357,574,353,584,344,584,338,584,340,595" href="#" />
</map>
Here's my code
http://codepen.io/w3nta1/pen/JWrmaz
Changed the answer.
After tinkering a bit I realized that the problem is that the image overlays the map. The solution was to move the use map on to the italy image and switch to opacity instead of display.
the code became a follows:
Please note that I eyeballed the area approximately.
function show(id) {
document.getElementById(id).style.opacity = 1;
}
function hide(id) {
document.getElementById(id).style.opacity = 0;
}
#map01 { position: absolute; left:342px; top:569px; opacity:0; }
<map name="Map" id="Map">
<area onMouseOver="show('map01')" onMouseOut="hide('map01')" alt="" title="" href="#" shape="poly" coords="56,78,65,87,74,94,82,97,93,105,100,111,131,134,140,143,143,161,136,170,120,174,99,175,88,177,92,188,127,199,132,194,133,181,149,174,156,154,158,148,150,138,151,126,174,135,176,126,140,108,138,101,101,77,82,54,77,32,98,24,94,8,74,0,66,0,54,7,39,12,32,22,25,12,19,20,7,22,7,31,2,37,6,46,4,54,13,63,30,50,47,56,39,115,32,118,21,123,26,139,27,159,38,156,42,128,40,120,50,65,47,58,48,60" />
</map>
<img id="map01" src="https://image.ibb.co/bYLutv/italy.png" usemap="#Map"/>
<img src="https://image.ibb.co/hEbZtv/map.jpg" width="1000" height="816" border="0"/>
This seems to fix the issue.
I took the listeners out of the html and put them into your javascript area. I also used onmouseenter and onmouseexit instead of onmousein and onmouseout though I'm not totally sure this was a necesary change.
Here is a working version : https://codepen.io/jonathanmarotta/pen/poarREK
(credits to Bango in his previous answer ...)
document.getElementById('poly').onmouseleave = function() {
hide('map01');
};
(Note : to generate the area(s) you need in your image, you can use any map generator like this online one for example : https://www.image-map.net/)