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
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();
});
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.
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('')" />
I have a smaller image which is of a control with 8 buttons, I have set up 8 area shapes so when what looks like a button is clicked the larger main image is updated.
When an area shape is clicked the relevant image loads, but I want the image to fade in and the old image to fade out.
Is this possible? Happy to explore Javascript and Jquery solutions. Thanks.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEST</title>
<script type="text/javascript">
function showImage(image){
var mainImage = document.getElementById('mainImage');
mainImage.src = image;
}
</script>
</head>
<body>
<div><img src="button.jpg" width="260" height="193" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="61,21,120,55" href="#" onclick="showImage('A.jpg')" />
<area shape="rect" coords="147,21,205,54" href="#" onclick="showImage('B.jpg')" />
<area shape="rect" coords="60,58,121,90" href="#" onclick="showImage('C.jpg')" />
<area shape="rect" coords="147,59,205,92" href="#" onclick="showImage('D.jpg')" />
<area shape="rect" coords="61,92,121,125" href="#" onclick="showImage('E.jpg')" />
<area shape="rect" coords="146,96,205,128" href="#" onclick="showImage('F.jpg')" />
<area shape="rect" coords="60,128,122,163" href="#" onclick="showImage('G.jpg')" />
<area shape="rect" coords="146,131,204,164" href="#" onclick="showImage('I.jpg')" />
</map>
</div>
<div>
<img id="mainImage" src="A.jpg" />
</div>
</body>
</html>
I'd suggest having all the images on the page, positioned on top of each other. The below will add all the images linked to by the area to a container then crossfade when you click...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$('#Map area').each(function(){
var area = $(this);
var img = $('<img>').attr('src', area.attr('href'));
$('#imgcontainer').append(img);
area.click(function(){
$('#imgcontainer img').stop().fadeOut();
img.stop().fadeIn();
return false;
})
});
$('#imgcontainer img:first-child').show();
});
</script>
<style>
#imgcontainer{width:260px;height:193px;}
#imgcontainer img{display:none;position:absolute;}
</style>
<img src="button.jpg" width="260" height="193" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="61,21,120,55" href="A.img" />
<area shape="rect" coords="147,21,205,54" href="B.img" />
<area shape="rect" coords="60,58,121,90" href="C.img" />
<area shape="rect" coords="147,59,205,92" href="D.img" />
<area shape="rect" coords="61,92,121,125" href="E.img" />
<area shape="rect" coords="146,96,205,128" href="F.img" />
<area shape="rect" coords="60,128,122,163" href="G.img" />
<area shape="rect" coords="146,131,204,164" href="I.img" />
</map>
<div id="imgcontainer"></div>
To do this you will need to create a new image and fade the old one out and the new one in.
This should work:
function showImage(image){
var mainImage = document.getElementById('mainImage');
$('#mainImage').before('<img src="' + image + '" id="newImage" />');
$('#mainImage').fadeOut().remove();
$('#newImage').attr('id','mainImage');
}
You should make sure with CSS that the new image is positioned behind the main one.
Source(s)
jQuery API - .append()
jQuery API - fading