Image map resizer doesn't work - javascript

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

Related

Draw area on image to get coordinates

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>

Zoom on an area of a image map

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?

image map, image should change onhover,

Why is the image not changing on hover? The image should change on hover and onclick and use the same image map
<script>
function changeImage() {
document.getElementById('image').src = document.getElementById('some_id').getAttribute('data-img-src');
};
</script>
<html>
<body>
<img id="image" src="http://imgur.com/SY5h8EC" map="#map" />
<map name="map">
<map id="some_id" data-img-src='http://imgur.com/Sch9YFq'>
<area shape="poly" coords="172,227,181,224,183,213,189,201,195,193,199,190,199,184,126,93,135,93,123,79,103,96,84,117,68,140,58,162,51,186,48,201,47,214,135,219,130,227,148,227,147,225,151,227,149,223,153,227,153,221,156,225,157,214,160,202,166,190,174,179,176,177,174,174,191,176,192,192,189,189,180,200,174,212,172,224,172,227" width="453" height="453" id="area1"
onmouseover=" changeImage();"/>
</map>
</map>
</body>
</html>

I changed the image links and wrote the code into a jsFiddle, you also had to change "map" to "usemap" and I got rid of one of the maps, I dont think you need it:
<body>
<img id="image" src="http://i.imgur.com/SY5h8EC.png" usemap="#map" />
<map name="map" id="some_id" data-img-src='http://i.imgur.com/Sch9YFq.png'>
<area shape="poly" coords="172,227,181,224,183,213,189,201,195,193,199,190,199,184,126,93,135,93,123,79,103,96,84,117,68,140,58,162,51,186,48,201,47,214,135,219,130,227,148,227,147,225,151,227,149,223,153,227,153,221,156,225,157,214,160,202,166,190,174,179,176,177,174,174,191,176,192,192,189,189,180,200,174,212,172,224,172,227" id="area1" onmouseover=" changeImage();" />
</map>
</body>
<script>
function changeImage() { document.getElementById('image').src=document.getElementById('some_id').getAttribute('data-img-src');
}
</script>
Working Fiddle:
https://jsfiddle.net/3eqb4uuj/
If you need help with something else please comment and I'll edit it

How to highlight areas in an imagemap on hover in a partial html file with AngularJS

I have set up a single page web app using AngularJS and in one of my partials I have an imagemap and would like to highlight the areas on mouseover. Ive tried searching around trying to figure out how to do this and I am not sure what is going wrong. Here is the code.
I tried using https://github.com/cowglow/AngularJS-maphilights as a resource
<section class="artistinfo">
<div class="artist cf">
<h1>Select a room for more details</h1>
<div class="info">
<img ng-src="images/housediagram.jpg" alt="Photo of thing" class="map" usemap="#houseMap">
<map name="houseMap" id="Map" class="maphilight">
<area name="kitchen" shape="poly" coords="197,193,348,194,349,301,197,302" href="#/kitchen"/>
<area name="livingroom" shape="poly" coords="349,194,349,300,562,301,561,192" href="#/livingroom"/>
<area name="laundry" shape="poly" coords="389,309,390,399,562,399,563,308" href="#/laundry"/>
<area name="basement" shape="poly" coords="387,309,388,399,197,399,197,306" href="#/basement"/>
<area name="office" shape="poly" coords="198,108,196,190,301,191,301,83,256,80" href="#/office"/>
<area name="bathroom" shape="poly" coords="301,83,302,190,418,191,417,83" href="#/bathroom"/>
<area name="bedroom" shape="poly" coords="419,83,417,192,560,191,560,109,494,80" href="#/bedroom"/>
</map>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
<script type="text/javascript" src="angular-maphilights.js"></script>
<script type="text/javascript" charset="utf-8">
angular.module('map', ['maphilights']);
</script>
</div>

You'll have to edit his code since he doesn't actually invoke the jQuery function that does the highlighting. You can replace the link function with the following
link: function (scope, element, attr) {
$(element).load(function () {
$(element).maphilight();
}).trigger('load');
}
Also, be sure to apply your directive on the <img> tag, not the <map> tag.

tooltip on mouseover image map

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('')" />

Categories

Resources