Related
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.
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.
I have a single, fixed-sized image of 5 stars (each star also being a fixed-width). I would like to track and respond as the use hovers over each of the 5 stars.
I've done some Googling but didn't find a clear way to approach this in JavaScript/jQuery. I know there are APIs for getting the mouse coordinates, but how can I get coordinates within the image?
Any tips or links for getting the mouse coordinates relative to an an image being hovered over?
You could use an image map:
Create five HTML image map areas using Image Mapper, being sure to add one "hotspot" for each of the five stars.
Use the mouseover and mouseout events on the area elements to trigger an action when the mouse pointer collides with and leaves a star.
Demo
Reusing the star image from Prisoner's answer:
http://jsfiddle.net/4GgBu/1/
HTML
<img src="http://i.imgur.com/CwkF2Hr.jpg" usemap="#image-map" />
<map name="image-map" id="image-map">
<area shape="poly" class="star" coords=" 79,11, 63,56, 13,59, 52,91, 36,139, 79,110, 120,139, 105,91, 147,59, 95,56, 79,10" href="#" alt="star 1" />
<area shape="poly" class="star" coords=" 257,9, 241,59, 189,59, 232,91, 215,139, 256,109, 300,138, 285,89, 325,59, 274,58, 259,13" href="#" alt="star 2" />
<area shape="poly" class="star" coords=" 420,58, 367,58, 409,89, 393,138, 436,110, 478,140, 463,90, 504,59, 453,57, 436,11, 420,55" href="#" alt="star 3" />
<area shape="poly" class="star" coords=" 614,12, 596,58, 549,60, 587,89, 571,138, 613,111, 656,141, 640,88, 679,58, 631,57, 618,15" href="#" alt="star 4" />
<area shape="poly" class="star" coords=" 774,58, 726,60, 767,88, 750,139, 792,110, 835,140, 819,91, 862,58, 808,56, 791,9, 776,57" href="#" alt="star 5" />
</map>
<p class="message">Rollover a star to see this message update.</p>
JavaScript
var $stars = $(".star");
$stars.mouseover(function(e){
var starID = $stars.index(e.target) + 1;
$('.message').text('Star ' + starID + ' rolled over');
});
$stars.mouseout(function(e){
var starID = $stars.index(e.target) + 1;
$('.message').text('Star ' + starID + ' rolled out');
});
Perhaps something like this (can be optimised, I just rushed it):
Javascript
var NUMBER_STARS = 5
$("img").click(function(e){
var left = e.pageX-$(this).offset().left;
var selected_stars = 0;
for(var i = 0; i < NUMBER_STARS; i++){
if($(this).width() / NUMBER_STARS * i < left){
selected_stars++;
}
}
alert(selected_stars);
});
Just a little css for the cursor:
img{
width: 300px;
cursor: pointer;
}
HTML
<img src="http://i.imgur.com/CwkF2Hr.jpg" />
jsfiddle: http://jsfiddle.net/wp7sg/1/
First some HTML code:
<div id="content_4" class="content" style="background:url(pic1.gif)"></div>
<div id="content_4_a" class="content" style="background:url(pic2.gif);
display:none"></div>
This is the JS code:
function getOuterHMTL(element){
return element.outerHTML;
}
function switchDisplayOuter(elementToHide, elementToShow, stringly){
document.getElementsByName(elementToShow).outerHTML=stringly;
document.getElementById(elementToHide).style.display="none";
document.getElementsByName(elementToShow)[0].style.display="";
}
Now this HTML code works (when I click on it, the div switches and the picture changes):
<area shape="rect" coords="0,252,98,337" onMouseOver="switchDisplayOuter(
'content_4', 'content_4_a', getOuterHMTL('content_4_a) )">
But not this one:
<area shape="rect" coords="0,252,98,337" onMouseOver="switchDisplayOuter(
'content_4', 'content_4_a', '<div id="content_4_a" class="content"
style="background:url(pic2.gif); display:none"></div>' )">
It only gets me an error code while debugging in Firefox:
Error: SyntaxError: unterminated string literal
'<div id=
Somebody who knows the right code without using the function getOuterHMTL(element) but with "plain" string literal?
You need to replace your " inside the onMouseOver attribute value with \':
<area shape="rect" coords="0,252,98,337" onMouseOver="switchDisplayOuter('content_4', 'content_4_a', '<div id=\'content_4_a\' class=\'content\' style=\'background:url(pic2.gif); display:none\'></div>' )">
This is because your area tag's onMouseOver attribute's value is enclosed with ".
I have an imagemap and wanted to keep track of how many times it had been clicked in javascript, but I have no idea how I would record the click count.
<p>
<img src="image.png" alt="missing" width="396" height="376" border="0" usemap="#thatPageMap" />
<map name="imageMap" id="thatPageMap">
<area shape="poly" coords="0,376,-3,269,50,251,60,234,71,225,76,192,69,178,44,127,50,82,73,62,94,48,69,46,108,30,145,20,162,29,162,16,183,34,193,41,228,35,247,38,225,47,242,47,279,53,306,78,324,117,326,150,335,179,327,200,327,221,351,234,357,263,393,275,394,378" href="thatpage.com" alt="Refresh" />
</map>
</p>
Above is the imagemap and below is the javascript and the paragraph with the counted ID.
<script type="text/javascript">
var count;
document.getElementById("counted").innerHTML = "This has been clicked " + count + " times.";
</script>
<p id="counted"></p>
How can I increase the variable count each time the imagemap is clicked?
For example like this:
<script type="text/javascript">
var count = 0;
function updateCounter( ) {
count++;
document.getElementById("counted").innerHTML = "This has been clicked " + count + " times.";
}
</script>
<p id="counted"></p>
<map name="imageMap" id="thatPageMap" onclick="updateCounter()">
<area shape="poly" coords="0,376,-3,269,50,251,60,234,71,225,76,192,69,178,44,127,50,82,73,62,94,48,69,46,108,30,145,20,162,29,162,16,183,34,193,41,228,35,247,38,225,47,242,47,279,53,306,78,324,117,326,150,335,179,327,200,327,221,351,234,357,263,393,275,394,378" href="thatpage.com" alt="Refresh" />
</map>
Here you go: http://jsfiddle.net/PUs9g/
Create a function to increase the click count and then call that from the onclick on the area.
<script type="text/javascript">
var count;
function clicked() {
count = count + 1;
document.getElementById("counted").innerHTML = "This has been clicked " + count + " times.";
}
</script>
<p>
<img src="image.png" alt="missing" width="396" height="376" border="0" usemap="#thatPageMap" />
<map name="imageMap" id="thatPageMap">
<area onclick="clicked();" shape="poly" coords="0,376,-3,269,50,251,60,234,71,225,76,192,69,178,44,127,50,82,73,62,94,48,69,46,108,30,145,20,162,29,162,16,183,34,193,41,228,35,247,38,225,47,242,47,279,53,306,78,324,117,326,150,335,179,327,200,327,221,351,234,357,263,393,275,394,378" href="thatpage.com" alt="Refresh" />
</map>
</p>
or alternatively add the onclick to the map itself. But if you are counting a specific area, call it from there.
if you define your counter without the keyword var it is a global variable.
you only need to change
var count;
to
count;