The code is working for all the areas and figures, except when the variable id equals 9. Then the #10 image (#9 index) doesn't appear, an undefined message is written instead. When id equals any other number, the checkAnswer() function alert correct or wrong for every area clicked, except for the #10 area, which doesn't alert anything. What's wrong with the code? (the images are all correctly on the directory)
<!doctype html>
<html>
<head>
<script type="text/javascript">
var cobras=new Array();
cobras[0] = '<img src="cobra1.jpg">';
cobras[1] = '<img src="cobra2.jpg">';
cobras[2] = '<img src="cobra3.jpg">';
cobras[3] = '<img src="cobra4.jpg">';
cobras[4] = '<img src="cobra5.jpg">';
cobras[5] = '<img src="cobra6.jpg">';
cobras[6] = '<img src="cobra7.jpg">';
cobras[7] = '<img src="cobra8.jpg">';
cobras[8] = '<img src="cobra9.jpg">';
cobras[9] = '<img src="cobra10.jpg">';
cobras[10] = '<img src="cobra11.jpg">';
cobras[11] = '<img src="cobra12.jpg">';
cobras[12] = '<img src="cobra13.jpg">';
cobras[13] = '<img src="cobra14.jpg">';
cobras[14] = '<img src="cobra15.jpg">';
id=Math.floor(Math.random()*15);
function makeDisappear() {
var elem = document.getElementById("main");
elem.style.visibility = "hidden";
var elem = document.getElementById("empty");
elem.style.visibility = "visible";
var bodyE1 = document.body;
bodyE1.innerHTML += cobras[id];
}
function checkAnswer(a) {
if (a==id) {
alert('Correct!')
}
else {
alert('Wrong!')
}
}
</script>
</head>
<body>
<center> <button onclick="makeDisappear();"> Hide </button> </center>
<center> <img id="main" src="..\images\cobra.jpg" width="941" height="689" alt="Todos os bichos."> </center>
<center> <img style="visibility: hidden;" id="empty" src="..\images\vazio.jpg" width="941" height="689" alt="Vazio." usemap="#empty"> </center>
<map name="empty">
<area shape="rect" coords="0,230,190,40" alt="1" onclick="checkAnswer(1)">
<area shape="rect" coords="191,230,380,40" alt="2" onclick="checkAnswer(2)">
<area shape="rect" coords="381,230,570,40" alt="3" onclick="checkAnswer(3)">
<area shape="rect" coords="571,230,760,40" alt="4" onclick="checkAnswer(4)">
<area shape="rect" coords="761,230,941,40" alt="5" onclick="checkAnswer(5)">
<area shape="rect" coords="0,470,190,240" alt="6" onclick="checkAnswer(6)">
<area shape="rect" coords="191,470,380,240" alt="7" onclick="checkAnswer(7)">
<area shape="rect" coords="381,470,570,240" alt="8" onclick="checkAnswer(8)">
<area shape="rect" coords="571,470,760,240" alt="9" onclick="checkAnswer(9)">
<area shape="rect" coords="761,470,941,689" alt="10" onclick="checkAnswer(10)">
<area shape="rect" coords="0,490,190,689" alt="11" onclick="checkAnswer(11)">
<area shape="rect" coords="191,490,380,689" alt="12" onclick="checkAnswer(12)">
<area shape="rect" coords="381,490,570,689" alt="13" onclick="checkAnswer(13)">
<area shape="rect" coords="571,490,760,689" alt="14" onclick="checkAnswer(14)">
<area shape="rect" coords="761,490,941,689" alt="15" onclick="checkAnswer(15)">
</map>
</body>
</html>
If it is indeed only happening on item #9, it suggests to me some type of number verses string problem.
First change the variable name of 'id' to something else, that name could cause problems.
Then declare it at the top with a var, the same as you are doing with the cobras array.
I would change 'id' to a string, and convert the result of the Math function using parseInt.
Change the index values you are giving in the array to strings as well, so they become keys instead.
Then add single quotes around the value given in the checkAnswer calls from the area tags.
No guarantee that this would fix the problem, but at least you know for sure that the random item, and the item chosen, are all strings.
Related
I am making a web page and am using the map tag in it. My coordinates of the areas are correct but it is not working for some reason. I also have used the maphilight library which is not working as well. Also, the same code with different coordinates was working for a different image that I had used, but now it isn't. here is my html code:
<div class="col-md-12">
<img src="/static/Images/Mosaic.png" alt="mosaic" usemap="mosaicMap" id="mosaicImg">
<map name="mosaicMap">
<area shape="rect" coords="0,0,100,100" onclick="selectImage(1)">
<area shape="rect" coords="100,0,200,100" onclick="selectImage(2)">
<area shape="rect" coords="200,0,300,100" onclick="selectImage(3)">
<area shape="rect" coords="0,100,100,200" onclick="selectImage(4)">
<area shape="rect" coords="100,100,200,200" onclick="selectImage(5)">
<area shape="rect" coords="200,100,300,200" onclick="selectImage(6)">
<area shape="rect" coords="0,200,100,300" onclick="selectImage(7)">
<area shape="rect" coords="100,200,200,300" onclick="selectImage(8)">
<area shape="rect" coords="200,200,300,300" onclick="selectImage(9)">
</map>
</div>
My image is 300 x 300 px
The function is not being called on clicking the area. Here is my js code for the maphilight:
$(function() {
$('#mosaicImg').maphilight();
});
Here is the function called:
function selectImage(imageNumber) {
console.log("here");
imageNum = imageNumber;
inputImage.src = "/static/Images/Mosaic" + imageNum.toString() + ".png";
laterNextText();
}
Please help me identify where am I wrong.
I would really appreciate some help with looping through the following code and multiplying everything with a factor of my liking.
Thank you in advance!
Ps: using jquery to do it is also an option.
<area shape="poly" coords=" 97,125,168,125,202,186,168,246, 97,246, 63,187" onClick="Tile(0,0)"/>
<area shape="poly" coords=" 97,246,168,246,202,307,168,368, 97,368, 63,306" onClick="Tile(0,1)"/>
<area shape="poly" coords=" 97,368,168,368,202,428,168,490, 97,489, 63,429" onClick="Tile(0,2)"/>
<area shape="poly" coords="201, 64,273, 64,307,125,273,187,202,186,168,125" onClick="Tile(1,0)"/>
<area shape="poly" coords="201,186,273,186,307,246,273,307,202,307,168,246" onClick="Tile(1,1)"/>
<area shape="poly" coords="201,307,273,307,307,368,273,428,202,428,168,368" onClick="Tile(1,2)"/>
<area shape="poly" coords="201,428,273,428,307,489,273,549,202,551,168,490" onClick="Tile(1,3)"/>
<area shape="poly" coords="306,125,378,125,411,186,378,246,306,246,273,186" onClick="Tile(2,0)"/>
<area shape="poly" coords="306,246,378,246,411,307,378,368,306,368,273,308" onClick="Tile(2,1)"/>
<area shape="poly" coords="306,368,378,368,411,429,378,489,306,489,273,428" onClick="Tile(2,2)"/>
<area shape="poly" coords="412, 64,482, 64,517,125,482,186,412,186,378,125" onClick="Tile(3,0)"/>
<area shape="poly" coords="412,186,482,186,517,247,482,308,412,307,378,247" onClick="Tile(3,1)"/>
<area shape="poly" coords="412,307,482,307,517,369,482,428,412,428,378,368" onClick="Tile(3,2)"/>
<area shape="poly" coords="412,428,482,428,517,489,482,550,412,550,378,490" onClick="Tile(3,3)"/>
<area shape="poly" coords="515,126,587,125,621,186,587,246,516,246,482,186" onClick="Tile(4,0)"/>
<area shape="poly" coords="515,246,587,246,621,307,587,368,516,368,482,308" onClick="Tile(4,1)"/>
<area shape="poly" coords="515,368,587,368,621,429,587,488,516,490,482,428" onClick="Tile(4,2)"/>
While the current answers do solve the problem, I sometimes find that a more expanded and split up solution is often easier to follow, when you come back to your code later.
Here's my suggestion
function multiplyByFactor(list, factor) {
return list.map(function (itm) {
return itm * factor;
});
}
function stringArrayToNumArray(list) {
return list.map(function (str) {
return parseInt(str);
});
}
function multiplyCoordinates(elements) {
elements.each(function () {
var el = $(this);
//extract the current coordinates from the element
var strCoords = el.attr("coords").split(",");
//turn them into Numbers, to avoid any weird Javascript math
var numCoords = stringArrayToNumArray(strCoords);
//Multiply each by our factor
var inflatedCoords = multiplyByFactor(numCoords, 5);
//Set replace the attribute
el.attr("coords", inflatedCoords.join(","));
});
}
var areaElements = $("area");
multiplyCoordinates(areaElements);
Here is a fiddle to see it working: https://jsfiddle.net/tm4bxgce/
var x = 5;
jQuery("area").each(function(){
var coords = jQuery(this).attr("coords").split(",");
var output = "";
jQuery.each(coords , function(index,element){
output += (parseInt(element) * x)+",";
});
jQuery(this).attr("coords",output.slice(0, - 1));
});
Try this
$(function(){
var fixedvar=5;
$('area').each(function(){
var arr=$(this).attr('coords').split(',');
var sum=1;
$.each(arr,function(index,value){
sum+=fixedvar*value;
});
console.log(sum);
});
});
I would like to put an onclick event on an area element. Here is my setup:
<img id="image" src="wheel.png" width="2795" height="2795" usemap="#Map" >
<map name="Map">
<area class="blue" onclick="myFunction()" shape="poly" coords="2318,480,1510,1284" href="#">
</map>
I have tried 2 different ways to have an onclick event. Firstly i tried this:
$(".blue").click( function(event){
alert('test');
});
I have also tried this:
function myFunction() {
alert('test');
}
Neither of the above work. Do area elements support the above, or do they only support having a href?
Pay attention:
Attribute href is obligatory, without it the area-tag does nothing!
To add a click event, you'll need to block default href.
Your code should start as follows:
$(".blue").on("click", function(e){
e.preventDefault();
/*
your code here
*/
});
Live example here.
Its the shape that's the problem. Your code has set shape equal to polygon but only has 4 points in the coordinates attribute. You need to set shape to rectangle instead.
Set shape="rect" like this:
<img id="image" src="wheel.png" width="2795" height="2795" usemap="#Map" >
<map name="Map">
<area class="blue" onclick="myFunction()" shape="rect" coords="2318,480,1510,1284" href="#">
</map>
Use a class for all elements you want to listen on, and optionally an attribute for behavior:
<map name="primary">
<area shape="circle" coords="75,75,75" class="popable" data-text="left circle text">
<area shape="circle" coords="275,75,75" class="popable" data-text="right circle text">
</map>
<img usemap="#primary" src="http://placehold.it/350x150" alt="350 x 150 pic">
<div class='popup hidden'></div>
Then add your event listeners to all elements in the class:
const popable = document.querySelectorAll('.popable');
const popup = document.querySelector('.popup');
let lastClicked;
popable.forEach(elem => elem.addEventListener('click', togglePopup));
function togglePopup(e) {
popup.innerText = e.target.dataset.text;
// If clicking something else, first restore '.hidden' to popup so that toggle will remove it.
if (lastClicked !== e.target) {
popup.classList.add('hidden');
}
popup.classList.toggle('hidden');
lastClicked = e.target; // remember the target
}
Demo: https://codepen.io/weird_error/pen/xXPNOK
Based on your comments, you just need this:
$("#image").click( function(){
alert("clicked");
//your code here
});
Demo:
http://codepen.io/tuga/pen/waBQBZ
This is a simple one:
<area class="blue" onclick="alert('test');" shape="poly" coords="2318,480,1510,1284" href="#">
Or for any other code:
<area class="blue" onclick="//JavaScript Code//" shape="poly" coords="2318,480,1510,1284" href="#">
Try :
<img src="wheel.png" width="2795" height="2795" alt="Weels" usemap="#map">
<map name="map">
<area shape="poly" coords="2318,480,1510,1284" alt="otherThing" href="anotherFile">
</map>
You souldn't want to add onClick events on area, documentation :
The tag defines an area inside an image-map (an image-map is an image with clickable areas).
Edit : your coords are a bit weird since its supposed to the couples of each vertices (so right now, your polygon is a line)
I found this question by #TimorEranAV
HTML map that displays text instead of linking to a URL
and was marked as duplicate, but i think what he was expecting is this,
<html>
<head>
<title> Program - Image Map</title>
</head>
<body>
<img src="new.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" title = "Sun">
<area shape="rect" coords="82,0,100,126" href="mercur.htm" alt="Mercury" title = "Mercury">
</map>
</body>
</html>
Here the title tag gives the opportunity to add a hover text(tip) to the image map.
I'm on a worpress website and i try to make a mandala with changing images.
I use jquery, and area from css, when the mouse is over a section delimited by an area, i display the image corresponding.
But there is an issue, when i put the mouse over, it take some time(1s) before displaying the image, and when i put the mouse over another section, it's not working well eather..
I think the issue is due to the fact that the new displayed image comes over the mouseover section delimited by the area
here is the html code:
<div class="mandala">
<img id="mandala_img" src="http://example.org/site/wp-content/uploads/2015/02/background.png" usemap="#mandala_map">
<div id="image1"></div>
<div id="image2"></div>
<div id="image3"></div>
<div id="image4"></div>
<div id="image5"></div>
<div id="image6"></div>
<div id="image7"></div>
<div id="image8"></div>
<map name="mandala_map" id="mandala_map">
<area shape="poly" coords="310,10,422,33,498,87,430,154,383,121,310,106" href="http://example.org/site/" id="area_image1">
<area shape="poly" coords="498,87,430,154,479,274,576,274,557,178" href="http://example.org/site/" id="area_image2">
<area shape="poly" coords="479,275,576,275,553,383,499,462,430,393,463,348" href="http://example.org/site/" id="area_image3">
<area shape="poly" coords="499,462,430,393,310,442,310,540,420,516" href="http://example.org/site/" id="area_image4">
<area shape="poly" coords="310,442,310,540,206,518,124,462,192,393" href="http://example.org/site/" id="area_image5">
<!-- <area shape="poly" coords="124,462,192,393," href="http://example.org/site/" id="area_image2">
<area shape="poly" coords="" href="http://example.org/site/" id="area_image2">
<area shape="poly" coords="" href="http://example.org/site/" id="area_image2">-->
</map>
</div>
js code:
<script type="text/javascript">
$('.mandala area').each(function () {
// Assigning an action to the mouseover event
$(this).mouseover(function (e) {
var image = $(this).attr('id').replace('area_', '');
$('#image1').css('display', 'none');
$('#image2').css('display', 'none');
$('#image3').css('display', 'none');
$('#image4').css('display', 'none');
$('#image5').css('display', 'none');
$('#image6').css('display', 'none');
$('#image7').css('display', 'none');
$('#image8').css('display', 'none');
$('#' + image).css('display', 'block');
});
});
</script>
the mandala looks like this:
The image displayed on the mouse over looks like this:
thank you for your help
As per my suggestion, I have made a basic rough fiddle. It is not quite smooth yet but this is just to give proof of concept to my suggestion.
All I am doing is change the background image based on which area is hovered by using a transparent screen for image map
Fiddle link here
Snippet as follows..
$("#area_image1").mouseover(function(e) {
$('.mandala').css("background", "url('http://i.stack.imgur.com/xypLJ.png') no-repeat center");
});
$("#area_image1").mouseout(function(e) {
$('.mandala').css("background", "url('http://i.stack.imgur.com/A690W.png')");
});
.mandala {
background-image: url("http://i.stack.imgur.com/A690W.png");
display: inline-block;
}
#mandala_img {
opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="mandala">
<img id="mandala_img" src="http://dummyimage.com/600x541.png&text=sample" width="600" height="541" usemap="#mandala_map">
<map name="mandala_map" id="mandala_map">
<area shape="poly" coords="310,10,422,33,498,87,430,154,383,121,310,106" href="#area_image1" id="area_image1" />
<area shape="poly" coords="498,87,430,154,479,274,576,274,557,178" href="#area_image2" id="area_image2" />
<area shape="poly" coords="479,275,576,275,553,383,499,462,430,393,463,348" href="#area_image3" id="area_image3">
<area shape="poly" coords="499,462,430,393,310,442,310,540,420,516" href="#area_image4" id="area_image4" />
<area shape="poly" coords="310,442,310,540,206,518,124,462,192,393" href="#area_image5" id="area_image5" />
</map>
</div>
Again this is just a proof of concept. Please do not tell me that this does not work the way you want exactly
Hope this helps.
I have some images-figures with map-area like this
and i need get image id when click inside area zone
can i made it without custom area functional realisation with js?
UPD sandbox
UPD2 found second, other problem.
first area zone (red), which covered by second image not clickable and z-index for area not working.
FINAL UPD
I wrote small custom function for mapping some objects.
Maybe it will help someone:
jsFiddle
I hope this is what you are looking for
JS Fiddle Example : http://jsfiddle.net/g5Dy3/44/
HTML
<img id="dotted" src="image1.jpg" usemap="#ballmap" alt="sample" />
<img id="solid" src="image2" usemap="#ballmap2" alt="sample" />
<map name="ballmap">
<area shape="circle" coords="210,120,90" href="#" alt="dotted ball" title="dotted ball" onclick="clickedMe(this);">
</map>
<map name="ballmap2">
<area shape="circle" coords="126,90,70" href="#" alt="solid ball" title="solid ball" onclick="clickedMe(this);">
</map>
JS
function clickedMe(item) {
var mapName;
mapName = $(item).parent().attr('name');
$('img').each(function(){
if($(this).attr('usemap') == '#'+mapName){
alert($(this).attr('id'));
}
});
}
Like so assuming you can use jQuery:
<img id="planetsimg" src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" onclick="clicked(this)" alt="Sun" image-id="planetsimg">
<area shape="circle" coords="90,58,3" href="mercur.htm" onclick="clicked(this)" alt="Mercury" image-id="planetsimg">
<area shape="circle" coords="124,58,8" href="venus.htm" onclick="clicked(this)" alt="Venus" image-id="planetsimg">
</map>
<script>
function clicked(map) {
var image = $('#' + $(map).attr('image-id'));
alert('img ' + image + ' clicked map ' + $(map).attr('href'));
return false; // Prevents href from opening normally. Return true if you want the link to open
</script>
just add the clickhandlers to the areas (images) of your map, not to the map itself
if you are using jQuery, you can do it like that:
$('map').find('area').each(function() {
$(this).on('click',...
});