I'm currently trying to make a responsive image map where we can also zoom on specific areas.
For the moment I have something like that (illustration):
I have for example 3 sections for 3 different area but now what I wan't is to zoom in a specific area when the user click on it. I already tried a few jquery script but the problem is that it zoom everything and the area don't resize by themselves (but when we reduce the window, it does).
I would like something like that:
http://preview.codecanyon.net/item/mapplic-custom-interactive-map-jquery-plugin/full_screen_preview/6275001?redirect_back=true&ref=coolansh63
When you click on it, it just zoom where you want to go.
For now here is the code that I have:
https://jsfiddle.net/brch3rn9/
<html>
<head>
<link rel="stylesheet" type="text/css" href="Mapify/src/mapify.scss">
<link rel="stylesheet" type="text/css" href="css2.css">
</head>
<body>
<div>
<img id="test" src="flag.png" alt="" usemap="#Map" height="500px" width="488px"/>
</div>
<map name="Map" id="Map">
<area alt="" title="1" id="TXXX" href="#" shape="poly" coords="355,72,362,422,475,435,472,83"/>
<area alt="" title="2" id="TXX" href="#" shape="poly" coords="190,463,357,471,345,67,184,81"/>
<area class="1" alt="" title="3" id="TX" href="#" shape="poly" coords="87,438,187,459,181,78,12,98"/>
</map>
<footer>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="Mapify/src/mapify.js"></script>
<script>
$("img[usemap]").mapify({
popOver: {
content: function(zone){
return "<strong>"+zone.attr("data-title")+"</strong>";
},
delay: 0.7,
margin: "15px",
height: "130px",
width: "260px"
}
});
</script>
</footer>
</body>
EDIT : I manage to make a zoom with the mouse wheel but now there is another problem, the map area doesn't resize and thus, they get offset. Is there any way to zoom where the user click only?
Related
I need to have options to upload img and drow area on that img and save coordinates to JSON.
Similar like here https://www.image-map.net/
I search for libraries but nothing that I can really use.
Here is lib for angularJS, but can not use it in angular 2+.
With 'hard-coded' coordinates it is ok, but I need to create them dynamically (user will drow area)
Thnx
<!DOCTYPE html>
<html>
<body>
<h2>Image Maps</h2>
<p>Click on the computer, the phone, or the cup of coffee</p>
<img src="https://www.w3schools.com/html/workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" onclick="myFunction('Computer')">
<area shape="rect" coords="290,172,333,250" alt="Phone" onclick="myFunction('Phone')">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" onclick="myFunction('Cup')">
</map>
</body>
</html>
<script>
function myFunction(item) {
alert(item);
}
</script>
I want to use image map resizer on my website but there is something wrong. I'm maping image in my header. I'm using this code:
<script type="text/javascript" src="http://davidjbradshaw.com/imagemap-resizer/js/imageMapResizer.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('map').imageMapResize();
});
</script>
And my map:
<img src="link_to_image" usemap="#map" width="100%" />
<map name="map">
<area target="" alt="" title="" href="http://nowa.cwr-poznan.pl/" coords="124,152,109" shape="circle">
</map>
What is wrong?
You have a lot of scripts on there. Try to avoid a potential conflict by changing your on ready to this format and see if that was the issue:
jQuery(function($) {
$('map').imageMapResize();
});
So I am using imagemapster on a page I've created to change regions of an image map on mouse hover. I would like for a pop up to occur on click and intended to use highslide to execute this, however, I'm struggling with how to implement this. My current code looks something like this:
<head>
<script language="javascript" src="include/imagemapster/jquery.imagemapster.js"></script>
<!-- Highslide -->
<script type="text/javascript" src="include/highslide/highslide-with-gallery.js"></script>
<script type="text/javascript" src="include/highslide/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="include/highslide/highslide.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="highslide/highslide-ie6.css" />
<![endif]-->
<!-- End Highslide -->
</head>
<body>
<img src="img/closed.jpg" id="leoweb" usemap="#leoweb" border="0">
<script>
$(document).ready(function ()
{
$('#leoweb').mapster({
singleSelect : true,
render_highlight : { altImage : 'img/open.jpg' },
mapKey: 'hex',
fill : true, altImage : 'img/open.jpg',
fillOpacity : 1,
});
});
</script>
<map name="leoweb" id="leoweb">
<area hex="1" class="highslide" href="onclick="return hs.expand(this)"
title="" style="float:right; margin: 0 0 10px 15px">
<img src="img/hex1.png" alt=""
style="width: 107px;height:120px;" />" shape="poly" coords=" 463,73, 363,74, 305,160, 363,258, 462,255, 513,168, 465,76" />
<area hex="2" href="#" shape="poly" coords=" 579,196, 521,292, 578,384, 675,388, 733,294, 683,200, 585,198" />
<area hex="3" href="#" shape="poly" coords=" 243,202, 138,202, 86,293, 133,379, 245,382, 295,293, 251,206, 245,206" />
<area hex="4" href="#" shape="poly" coords=" 353,330, 304,419, 361,513, 461,508, 513,413, 461,324, 354,328" />
<area hex="5" href="#" shape="poly" coords=" 229,450, 142,451, 83,542, 133,638, 239,636, 296,538, 245,452, 239,450, 235,450, 233,450" />
<area hex="6" href="#" shape="poly" coords=" 453,575, 355,574, 303,664, 351,764, 460,765, 515,672, 459,577, 457,576" />
<area hex="7" href="#" shape="poly" coords=" 573,453, 521,550, 574,638, 681,638, 737,550, 685,450, 577,452" />
</map>
</div>
Now that bit about trying to add the highline code
class="highslide" href="onclick="return hs.expand(this)"
title="" style="float:right; margin: 0 0 10px 15px">
<img src="img/hex1.png" alt=""
style="width: 107px;height:120px;" />"
Into the image map was a long shot, but I tried it as it was the most logical href insertion point I could think of. It obviously did not work. Are any of you familiar enough with highline and imagemapster to help with this, or at least have some clue about a possible solution? Thanks.
I have used Image Mapping to specify which image to display if a user clicks on a particular area on the image. Here is my code:
<html>
<body>
<div align="center">
<img id="IMGMAPS" src="base.jpg" border="0" width="802" height="1026" orgWidth="802" orgHeight="1026" usemap="#image-maps" alt="" />
<map name="image-maps" id="IMGMAPS">
<area shape="rect" coords="800,1024,802,1026" alt="Image Map" style="outline:none;" title="Image Map" href="base.jpg" />
<area alt="" title="" href="abc\1.jpg" shape="poly" coords="248,177,365,177,364,257,248,256" style="outline:none;" target="_self" />
<area alt="" title="" href="abc\2.jpg" shape="poly" coords="386,193,501,180,510,258,394,271" style="outline:none;" target="_self" />
<area alt="" title="" href="abc\3.jpg" shape="poly" coords="539,221,650,250,631,327,518,299" style="outline:none;" target="_self" />
<area alt="" title="" href="abc\4.jpg" shape="poly" coords="128,277,222,271,228,369,135,375" style="outline:none;" target="_self" />
<area alt="" title="" href="abc\5.jpg" shape="poly" coords="238,281,352,265,360,325,359,342,250,359" style="outline:none;" target="_self" />
</map>
</div>
</body>
</html>
This code results in the following image:
What I want is images 1, 2, 3, 4, 5 should open in a popup in the same window if a user clicks on the co-ordinates specified.
How do I achieve this?
Edit 1:
image
The base image is a single image. 1, 2, 3, 4, 5 are the areas with specific co-ordinates on the image. Each area has a corresponding image which opens in a popup only when a user clicks on a particular area with specific co-ordinates.
Edit 2: As suggested by #Edrees, I have made the following changes:
Added Foundation JS
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.js" ></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js" ></script>
<script>
$(document).foundation();
</script>
Used data-reveal-id
<img id="IMGMAPS" src="selfie.jpg" border="0" width="802" height="1026" orgWidth="802" orgHeight="1026" usemap="#image-maps" alt="" data-reveal-id="firstModal" data-reveal />
<map name="image-maps" id="IMGMAPS">
<area shape="rect" coords="800,1024,802,1026" alt="Image Map" style="outline:none;" title="Image Map" href="selfie.jpg" />
<!--<div id="firstModal" class="reveal-modal" data-reveal> -->
<area alt="" title="" href="Shortlisted_selfie\VenkateshSittula.jpg" shape="poly" coords="248,177,365,177,364,257,248,256" style="outline:none;" target="_self" id="firstModal" class="reveal-modal" data-reveal />
<a class="close-reveal-modal">×</a>
<!-- </div> -->
This didn't made any difference to my results.
Edit 3: I am still struggling to get a working solution to this. Just to clarify again what I am looking for:
Base Image is a single image having areas 1, 2, 3, 4, 5.
Each area (1, 2, 3, 4, 5) has a corresponding image.
I want a functionality where if I click on area 1, it's corresponding image opens in a modal dialog, if I click on area 2, it's corresponding image opens in a modal dialog... so forth and so on for all the areas (only on click).
Is there a workaround for this?
Edit 4: As per Edrees's solution, I was able to implement the functionality what I looking for. Further, I need to fine-tune this solution by including a close button or link at top-right of the reveal-modal. I saw some foundation documents and found out that there is a class called **close-reveal-modal** used for this purpose, but I don't know how to implement this in my solution. Also I have images of sizes ranging from 612*640 to 900*1600 to 1280*960 to 1920*1080... how do I ensure that the image opened inside the modal resize proportionally (i.e. image maintains the ratio) as per the window size ?
Improve the solution using the following codepen link
Edit 5: The solution by #Edrees worked perfectly as long as I was viewing this page separately. However, when I embedded this page in MOJO Portal, Foundation CSS and JS completely screwed up the default behavior of MOJO Portal. It seems that default CSS was overridden by Foundation. Does anyone has a workaround for it? A plain jQuery to solve this without using Framework/plugin?
Edit 6: After facing issues with foundation framework, I realised that Rodrigo Leite has an answer to solve this issue. Although, I don't find any modal dialog being opened, it does give a feel of dialog box to the user and suffice for my requirements.
What changes I need:
I want the "div" to cover the entire window
Image should be displayed at the center (vertically and horizontally) of the window/screen
A close button at the top-right of the window/screen when the mapped image is displayed
A user should be able to click only the close button when image is opened. All other part of the window/screen should disable the click functionality / no action on clicking on any part of the screen except close button
NOTE: The close button can be displayed in any form i.e. image, button, etc.
You can create your own modal div and put it invisible, then, when the user click on area you can use javascript to show this modal and put your content inside it. Take a look:
css
#modal-background{
width: 100%;
height: 100%;
background-color: #000000;
position: fixed;
top: 0; left: 0;
display: none;
z-index: 99;
}
#modal-content{
background-color: #FFFFFF;
width: 500px;
height: 500px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -250px;
z-index: 100;
}
html
<div id='modal-background'>
<div id='modal-content'>
</div>
</div>
<img id="IMGMAPS" src="http://i.stack.imgur.com/zir2T.png" border="0" width="802" height="1026" orgWidth="802" orgHeight="1026" usemap="#image-maps" alt="" />
<map name="image-maps" id="IMGMAPS">
<area shape="rect" coords="800,1024,802,1026" alt="Image Map" style="outline:none;" title="Image Map" href="base.jpg" />
<area alt="" title="" data-imageurl="http://s.hswstatic.com/gif/smart-car-1.jpg" shape="poly" coords="248,177,365,177,364,257,248,256" style="outline:none;" target="_self" />
<area alt="" title="" data-imageurl="http://s.hswstatic.com/gif/smart-car-1.jpg" shape="poly" coords="386,193,501,180,510,258,394,271" style="outline:none;" target="_self" />
<area alt="" title="" data-imageurl="http://s.hswstatic.com/gif/smart-car-1.jpg" shape="poly" coords="539,221,650,250,631,327,518,299" style="outline:none;" target="_self" />
<area alt="" title="" data-imageurl="http://s.hswstatic.com/gif/smart-car-1.jpg" shape="poly" coords="128,277,222,271,228,369,135,375" style="outline:none;" target="_self" />
<area alt="" title="" data-imageurl="http://s.hswstatic.com/gif/smart-car-1.jpg" shape="poly" coords="238,281,352,265,360,325,359,342,250,359" style="outline:none;" target="_self" />
</map>
javascript (jquery):
$(document).ready(function(){
$('area').click(function(){
$('#modal-content').html('<img src=' + $(this).data('imageurl') +'>');
$('#modal-background').fadeIn();
});
$('#modal-background').click(function(){
closeModal();
});
});
function closeModal(){
$('#modal-background').fadeOut();
}
Hope it helps.
HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/foundation/5.5.0/css/foundation.css">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.foundation5.zurb.com/foundation.js"></script>
</head>
<body>
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="http://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" href="" data-reveal-id="one">
<area shape="circle" coords="90,58,3" alt="Mercury" href="" data-reveal-id="two">
<area shape="circle" coords="124,58,8" alt="Venus" href="" data-reveal-id="three">
</map>
<img src="https://www.nasa.gov/sites/default/files/706436main_20121114-304-193blend_m6-orig_full.jpg" width="145" height="126" alt="Planets" id="one" data-reveal class="reveal-modal">
<img src="http://news.bbcimg.co.uk/media/images/65904000/jpg/_65904720_mdis_global_enhancedcolor_caloris_orth_hd.jpg" width="145" height="126" alt="Planets" id="two" data-reveal class="reveal-modal">
<img src="https://upload.wikimedia.org/wikipedia/commons/1/10/Kepler10b_artist.jpg" width="145" height="126" alt="Planets" id="three" data-reveal class="reveal-modal">
<script type="text/javascript">
$(document).foundation();
</script>
</body>
</html>
Javascript:
Files needed: JQuery + foundation.js
JS code:
$(document).foundation();
For a complete working code visit this link
I am currently working on 2 functions; I created an image map for an image and want if someone hovers over this part of the image that on the right the price appears and a tooltip under the mouse that says "Discover" or similar.
Right now I have the following
<!DOCTYPE html>
<html>
<script>
function writeText(txt) {
document.getElementById("test").innerHTML = txt;
}
</script>
</head>
<body>
<img src ="test.png" alt="Jacket" usemap="#jacket" />
<p id="test"></p>
<map name="jacket">
<area shape="poly" coords="174,361,149,350,180,203,217,213"href="test"; title="Discover" alt="Shop Now" onmouseover="writeText('$60')" />
<map name="Map" id="Map">
<area href="test"; title="Shop Now" alt="Discover" shape="poly" coords="221,215,183,218,190,164" onmouseover="writeText('$60')" />
</map>
</map>
</body>
</html>
However there are a few problems:
The price does not disappear if the customer does not hover over the area
I am unable to show a tooltip.
Does anyone have an idea how to fix these problems?
I appreciate your help
You can add the following attribute to remove the price:
onmouseout="writeText('')"
And, you have extra semi-colons that may be the problem with your title not appearing. Try this instead:
<map name="jacket">
<area shape="poly" coords="174,361,149,350,180,203,217,213" href="test" title="Discover" alt="Shop Now" onmouseover="writeText('$60')" onmouseout="writeText('')" />
<map name="Map" id="Map">
<area href="https://jerry123.myshopify.com/products/product1" title="Shop Now" alt="Discover" shape="poly" coords="221,215,183,218,190,164" onmouseover="writeText('$60')" onmouseout="writeText('')" />