change class on image for image map - javascript

I am aware that a lot of similar questions has been asked on this matter, however I seem to not be able to put any of the solutions to use..
i have this imagemap located in a div: (never mind the coords - they are not correct right now)
<div class="spinner">
<img src="test.gif" alt="spinner" id="map" class="map" usemap="#spinnermap">
<map name="spinnermap">
<area shape="poly" coords="0,0,82,126" href="" id="systemmap" alt="System">
<area shape="poly" coords="90,58,3" href="" id="rolemap" alt="Role">
<area shape="poly" coords="124,58,8" href="" id="phasemap" onclick="createTable();" alt="Phase">
</map>
</div>
Now, when the last poly is clicked (or any, but just for e.g) i need the map img to have a different css class - so that class="map" is replaced by class="phasemap". (I have a sprite for this in the css, you see :))
I have tried this:
$('#phasemap').click(function(){
$(this).find("#map").toggleClass('phasemap map');
});
But it doesn't seem to do the trick.. I am sure I have a typo or more - I am very new to this js/jq thingy :)
Edit: I just realized that maybe it means something that the map is created in JS.. So i kinda also need to know where to put the jq stuff (below the map or where in the .js file do i stick this? :))
my JS:
function createSpinner() {
var spinner = '<div class="spinner">';
spinner += '<img src="filler.png" id="map" class="map" alt="Spinner" Usemap="#spinnermap" border="0" />';
spinner += '<map name="spinnermap">';
spinner += '<area shape="poly" coords="5,25 51,60 110,25 51,2 8,25" href="#" onclick="createTable();" alt="Role">';
spinner += '<area shape="poly" coords="5,25 8,66, 15,89 55,112 55,66 5,25" href="#" onclick="createTable();" alt="System">';
spinner += '<area shape="poly" coords="55,112 89,108 118,59 110,25 51,66 55,112" id="phasemap" href="#" onclick="createTable();" alt="Phase">';
spinner += '</map>';
spinner += '</div>';
return spinner;
}
$('#phasemap').click( function() {
$("#map").toggleClass('phasemap map');
return false;
});
and the css:
.map {
width: 117px;
height: 119px;
background: url('spinner.png');
background-repeat: no-repeat;
background-position: 0px 0px;
}
.rolemap {
background-position: 0px 0px;
}
.systemmap {
background-position: 0px -124px;
}
.phasemap {
background-position: 0px -248px;
}


You hav to use $('#map') as selector not $(this).find("#map") as your img is outside of the phasemap
Try this,
$('#phasemap').click(function(){
$("#map").toggleClass('phasemap map');
// Use #map directly it is not children of #phasemap
});// don't use colon here
Updated, you have to use return false; after toggleClass to prevent default working of area like,
$('#phasemap').click(function(){
$("#map").toggleClass('phasemap map');
return false;// use return false or event.preventDefault() here
});
In the demo you can see in console the image class is toggling.
From you edited question you should use jquery version >= 1.9 an use on() like,
$(document).on('click','#phasemap',function(){
$("#map").toggleClass('phasemap map');
return false;
});
And you to check createSpinner() works or not. by inspecting it in firebug


var a=0;
function yourfunctionname(){
if(a == 0){
$("#map").attr('class','');
$("#map").attr('class','phasemap map');
a=1;
return false;
}
else{
$("#map").attr('class','');
$("#map").attr('class','map');
a=0;
return false;
}
// your function code
}

Related

Using "Nested" image tags in html script with onmouseover

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>

How to create an expanding menu off of clickable points on an imagemap?

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.

mouseover map region to display image and mouseout to hide

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/)

Making Click function of image map appear in specific Div

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();
});

Take HTML area map and convert to d

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.

Categories

Resources