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'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?
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();
});
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
I'm making an interactive world map gif, using javascript and html5, here is my code so far:
<!DOCTYPE html>
<html>
<head>
<title>World Map</title>
<body>
<p>Click on a clickable area of the map for more info.</p>
<img src ="worldmap.gif" width="576" height="307" alt="World Map" usemap="#worldmap">
<map name="worldmap">
<area shape="rect" coords="265,49,279,64" href="
but now I'm stuck, firstly i want to know how to link to a video within the html5 video tags, upon the clicking of the linked coordinates, and also how to set javascript parameters within this, such as swapping videos etc. I have the code to be able to do the swap with the videos once the link is clicked, and I have the code to do the coordinates, I just don't know how to put it together.
Thanks so much for you help, but want to keep it super simple using the method i've done and kind of understand (if it works) here is my super simple code
<!DOCTYPE html>
<html>
<head>
<title>World Map</title>
<body>
<p>Click on a clickable area of the map for more info.</p>
<img src ="worldmap.gif" width="576" height="307" alt="World Map" usemap="#worldmap">
<map name="worldmap">
<area shape="rect" coords="265,49,279,64" <video src="ukanthem.mp4"></video>
</map>
</body>
</head>
</html>
the map opens on the page, but the clickable area does not appear to be there?
UPDATE:
So the coordinates still don't work, there is no area to click
also the video's appear on the same page as my map, I would like them on a seperate page, any help? also the video's aren't recognised, it says "video cannot be found, may have been removed from the server. http 404"
World Map
Click on a clickable area of the map for more info.
<map name="worldmap">
<area shape="rect" coords="265,49,279,64" onclick="playVideo()">
<video id="video1" class="true" autoplay controls width="420">
<source src="ukanthem.mp4" type="video/mp4">
<source src="ukanthem.mp4" type="video/ogg">
</video>
<video id="video2" class=flase" width="420" controls>
<source src="beef.mp4">
</video>
<button id="hideButton" onclick="swap();">Switch</button>
<script>
var flag=true;
function swap() {
var myVideo1=document.getElementById("Video1");
var myVideo2=document.getElementById("video2");
flag=!flag;
video1.setAttribute("class", flag);
video2.setAttribute("class", !flag);
if (flag) {
video2.pause();
video1.play();
} else {
video1.pause();
video2.play();
}
}
</script>
</map>
</body>
</head>
</html>
Look at my code again please :)
Ok super simple.
You can put an Onclick action to your area tag.
Like this.
<area .... onclick="playVideo()">
And for your HTML 5 video tag...
<video id="video1" width="420">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
And a Javascript to do things for you:
This part is for the normal HEAD HTML tag <-------
<script>
function playVideo() {
var myVideo=document.getElementById("video1");
myVideo.play();
}
</script>
If you want it super easy this is super easy, and i havent used any jquery, or new stuff. Let me know how it goes :)
You need a video tag:
<video src="urlofvideo"></video>
You can use jQuery to bind the click events on the image map:
jQuery(document).ready(function($) {
$('area').bind('click', function(event) {
event.preventDefault();
//url of video
var url = this.href;
//Here your code to start the video
...
});
});
Im not 100% sure i understood your question, but i made you this. Its a map with cords on, this is without the old map method, but its with HTML, CSS and Jquery instead.
Sorry if i totally misunderstood, but its my shoot :)
<style type="text/css">
.map_image { display: block; width: 1280px; height: 960px; background-repeat: no-repeat; }
.map_image .map_link { display: block; position: absolute; text-indent: -999em; overflow: hidden; }
.map_image #paris { width: 150px; height: 80px; top: 11px; left: 11px; border: 1px solid red; }
.map_image #copenhagen { width: 150px; height: 80px; top: 40px; left: 177px; border: 1px solid yellow;}
</style>
<div class="map_image" style="background-image: url('your_picture.jpg');">
<a class="map_link" id="paris" title="google.com"></a>
<a class="map_link" id="copenhagen" title=""></a>
</div>
<script>
$("#paris").click(function() {
// play a video about paris
alert("paris");
});
$("#copenhagen").click(function() {
// play a video about paris
alert("copenhagen");
});
</script>