mouseover map region to display image and mouseout to hide - javascript

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

Related

top menu's position fixed but on scroll part from next div disappears

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.

how to avoid maps tag mapping to hyperlink and calling an onclick function instaed html php js

I am trying to make a 4-buttoned image to work as 4 buttons mapped to 4 different functions instead of default hyperlinks (href=#).
What I wish is that the user data is added edited deleted or updated within this PHP page instead of explicit hyperlinks to different pages.
Even if I have to resort to other pages, this data needs to be submitted via functions of the post or get etc or some own function. But the issue is that after mapping this image as 4 different buttons and even removing the href and adding onclick=myfunction(), it does nothing and if I add href, it doesn't go to myfunction after clicking and takes to href link instead.
please help.
<html>
<head>
<title>Panel
</title>
<?php
require('connect.php'); //working connection
$queryU = "SELECT username FROM `user`";
$listU = $connection->query($queryU);
if ($listU->num_rows > 0) {
while ($rowu = $listU->fetch_assoc()) {
$y = $rowu['username']; //working script
}
}
?>
<style>
body {
background-image : url("main.jpg");
opacity : 40%;
font-family : AlphaMaleModern;
text-align : center;
color : #fff;
font-size : 26px;
}
.a {
height : 90%; width : 45%;
}
.img {
margin-top : 20%;
position : relative;
}
.list {
float : right;
position : absolute;
border : lime solid;
width : 50%;
z-index : -1;
position : static;
top : 10%;
height : 90%;
}
#userlist {
width : 100%;
opacity : 0.8;
font-family : AlphaMaleModern;
text-align : center;
font-size : 28px;
height : 100%;
}
.img:hover, #userlist:hover {
opacity : 1;
}
</style>
<script>
//test function 1 for on click call but not working
document.getElementById('aa').on(click, function (e) {
e.preventDefault();
alert("CLICKED");
}
);
//test function 2 for on click call but not working
function printr(ss) {
var x = document.getElementById('ss').name;
alert(x);
switch (x) {
case "aa":
alert("AA");
break;
case "b":
alert("B");
break;
case "c":
alert("C");
break;
case "d":
alert("D");
break;
}
</script>
</head>
<body>
<fieldset name="Users" class="a" style="float:right;">
<legend>USERS
</legend>
<div id="user" class="user" style="">
<img src="panel/panel.png" class="img" alt="" usemap="#Map1"/>
<map name="Map1" id="Map1">
<area alt="" title="" href="#" id="aa" onclick="printr(aa)"
shape="poly" coords="200,8,16,10,104,108"/>
<area alt="" title="" href="#" id="b" onclick="printr(b)"
shape="poly" coords="205,14,108,109,204,197"/>
<area alt="" title="" href="#" id="c" onclick="printr(c)"
shape="poly" coords="8,201,98,110,8,15"/>
<area alt="" title="" href="#" id="d" onclick="printr(d)"
shape="poly" coords="104,113,16,208,204,207"/>
</map>
<div class="list">
<select id="userlist" size="20">
<option>
<?php echo $y; ?>
</option>
<!--list of users from mysql database (working good)-->
</select>
</div>
</fieldset>
</div>
</body>
</html>
image:
I'll answer in few steps.
Firstly – your html block comment in 98 line is wrong.
It is:
<!--list of users from mysql database (working good) --!>
but is should looks like that:
<!--list of users from mysql database (working good) -->
Because of that wrong comment closing (which isn't close) – every line under that comment was commented too.
Your function printr(ss) isn't closed. Last } is closing of switch.
You've onclick="printr(aa)" instead of onclick="printr('aa')". Without ' brackets you're giving function argument nonexistent variable aa. With brackets you're giving just string.
My version of code:
<html>
<head>
<title>Panel
</title>
<style>
body{
background-image: url("main.jpg");
opacity:40%;
font-family: AlphaMaleModern;
text-align:center;
color:#fff;
font-size: 26px;
}
.a{
height:90%;
width:45%;
}
.img{
margin-top:20%;
position:relative;
}
.list{
float:right;
position:absolute;
border:lime solid;
width:50%;
z-index:-1;
position:static;
top:10%;
height:90%;
}
#userlist{
width:100%;
opacity: 0.8;
font-family:AlphaMaleModern;
text-align:center;
font-size:28px;
height:100%;
}
.img:hover,#userlist:hover{
opacity: 1;
}
</style>
<script>
function printr(ss)
{
switch (ss)
{
case "aa":
alert("AA");
break;
case "b":
alert("B");
break;
case "c":
alert("C");
break;
case "d":
alert("D");
break;
}
}
</script>
</head>
<body>
<fieldset name="Users" class="a" style="float:right;">
<legend>USERS
</legend>
<div id="user" class="user" style="">
<img src="https://i.stack.imgur.com/7A0Ky.png" class="img" alt="" usemap="#Map1" />
<map name="Map1" id="Map1">
<area alt="" title="" href="#" id="aa" onclick="printr('aa')" shape="poly" coords="200,8,16,10,104,108" />
<area alt="" title="" href="#" id="b" onclick="printr('b')" shape="poly" coords="205,14,108,109,204,197" />
<area alt="" title="" href="#" id="c" onclick="printr('c')" shape="poly" coords="8,201,98,110,8,15" />
<area alt="" title="" href="#" id="d" onclick="printr('d')" shape="poly" coords="104,113,16,208,204,207" />
</map>
<div class="list" >
<select id="userlist" size="20">
<option>
</option>
<!--list of users from mysql database (working good) -->
</select>
</div>
</fieldset>
</div>
</body>
</html>
https://jsfiddle.net/9ks9kxzw/
That's not as clear code as it could be, but it's working now.
By the way – I've removed php sections etc. to not disturb myself. I hope you understand what have I done. Remember that if you have error in javascript – it'll just don't execute.

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

change class on image for image map

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
}

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