We Keep Coding

Executing javascript function with image map in HTML

I want to execute some a javascript function when i click on a certain part of the image in my cshtml page. However the clickable area does not appear.
I also dont want to reference www.google.com but it requires me to have alt and href attributes.
Why is my code not working?
Here is my code:
<image src="~/Content/Images/PeriodicTable2.jpg" width="900" height="450" alt="Sample Image" />
<map name="PeriodicTable">
<area shape="rect" coords="0,0,200,200" onclick="Popup('Hydrogen')" href="https://www.google.com" alt="something">
</map>

You have to set the usemap attribute:
<img src="..." usemap="#PeriodicTable">
See the following example, where I added a dummy Popup() function to test:
function Popup(text) {
console.log(text)
}
<img src="https://via.placeholder.com/600x200" usemap="#PeriodicTable" width="600" height="200" alt="Sample Image">
<map name="PeriodicTable">
<area shape="rect" coords="0,0,200,200" onclick="Popup('Hydrogen')" href="#" alt="something">
</map>
As for the <area> and its attributes, HTML4 requires both the alt and href to be set (alternatively the nohref attribute).
In HTML5, href is optional and alt is required only if href is used.
As an <area> without a href is not considered a regular link, browsers will not show the mouse changing to a pointer when you hover the areas. This behavior can be changed using CSS: area { cursor: pointer }.
This means the following example should work pretty much like the first one, but without the href and alt attributes.
function Popup(text) {
console.log(text)
}
area {
cursor: pointer;
}
<img src="https://via.placeholder.com/600x200" usemap="#PeriodicTable" width="600" height="200" alt="Sample Image">
<map name="PeriodicTable">
<area shape="rect" coords="0,0,200,200" onclick="Popup('Hydrogen')">
</map>

onclick="Popup('Hydrogen')" it is a function, I think you must put semi-colon ';' after the code. Like this onclick="Popup('Hydrogen');"

Select area of an image and trigger a JS event

Is it possible, using either HTML canvas or Javascript, to click on part of an image and, depending on which part you clicked, it trigger a Javascript event?
So, for example;
If I have an image of a watch and the user clicks on the strap, this triggers a modal with content relating to the strap. Similarly, if they click on one of the watch hands, this triggers a different modal.

You can use the HTML tag to do so, Please check the <area> tag in html it might serve your purpose.
Check the below code may help you:
W3 Schools - Areamap
And you can also use <canvas> or <svg> with the help of Fabric.js you can get the thing done in much more advance way.
Check this link you will get really cool stuff to do with image or canvas and svg:
MDN - Canvas API Tutorial
Thanks
function runfunc(planetId) {
console.log('You selected:', planetId);
}
.as-console-wrapper { max-height: 2.8em !important; }
<p>Click on the Sun or on one of the planets to see which one was selected.</p>
<img src="https://www.w3schools.com/tags/planets.gif" width="145" height="126"
alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" id="Sun" onclick="runfunc(this.id)">
<area shape="circle" coords="90,58,3" alt="Mercury" id="Mercury" onclick="runfunc(this.id)">
<area shape="circle" coords="124,58,8" alt="Venus" id="Venus" onclick="runfunc(this.id)">
</map>

web page with java script not working in firefox

I am using a map on an image. Inside that map I got onmouseover effects for different areas. Also, I have a script that opens an image thumbnail when that area is clicked. This is the script I'm using: http://britobmarketing.com/thumbnailviewer.js
The problem is it's not working in firefox. Not the onmouseover effect, not the thumbnail script. It's simply not working.
Any recommendations?
I really want to stick with java script and not get into Jquery!
Thanks a lot!

Assuming that the page you are using this on is: http://britobmarketing.com/
Your problem seems to be with how you are defining your imagemap; not how the javascript is working
Your imagemap setup:
<map name="mainMap">
<a rel="thumbnail" href="images/contactUsPic.jpg">
<area onmouseout="document.pic1.src='images/mapPics.gif'" onmouseover="document.pic1.src='images/contactUs.gif'" title="Contact Us" shape="rect" coords="798,481,877,572">
</a>
<area target="_blank" href="http://www.facebook.com/britoBMarketing" title="Facebook" shape="rect" coords="884,298,956,357">
</map>
Playing around with Firebug's "inspect element", it seems that stripping out the target and title attributes seems to remove the problem.
Also your main <area/>s are wrapped with anchors (<a>) which is probably preventing them from working.
Try something like this:
<map name="mainMap">
<area coords="191,138,487,233" shape="rect" href="" onmouseover="alert('hello')">
</map>

JQuery using the click event handler. How do I keep all the elements from not show only have one element show one at time?

In jquery using the click event handler. How do I keep all the elements from not show but only have one element show one at time to what is related when I click on it?.
My example page: http://chrism.net46.net/final-ff-IX/summoners-paintings.html
Using a image map. I have ten "hot spots", each a monster painting and 10 divs with information about each painting. When I click a hot spot I just a lightbox with info about that page segment to open.
I have used jquery plugins like jquery tools with success, but I'd like to learn how without using a plugin.
Anyway here is a video example what I mean starting at 0:15 http://www.youtube.com/watch?v=7628mBPumM4 hope this is more clear.
Here http://jsfiddle.net/muThj/1/ without the image map, though. Using it to host the code review just in case the above link site goes down due to traffic.
<img src="wall-writings.jpg" alt="Eidolon mural paintings of Curbuncle, Madeen, Ramuh, Shiva, Ark, Ifrit, Leviathan, Phoenix, Fenrir, Atomos" usemap="#eidolonpaintings">
<map name="eidolonpaintings">
<area shape="poly" coords="287,230,301,244,319,251,329,252,340,252,347,252,338,246,336,237,344,233,344,229,345,225,356,227,362,229,376,230,385,235,393,242,396,250,403,254,408,248,414,239,419,231,424,224,429,222,433,233,432,248,428,263,422,272,422,279,410,286,396,288,388,291,385,293,390,296,393,305,396,316,400,318,407,320,414,325,416,332,420,343,415,352,414,360,408,369,401,374,405,387,409,399,407,409,408,412,402,414,368,365,357,374,358,390,359,403,354,409,343,415,337,416,323,370,294,362,268,327,264,274,287,230" >
<area shape="poly" coords="628,253,617,222,624,172,630,149,647,109,667,81,681,66,694,53,720,49,756,48,768,53,775,75,825,99,924,135,981,154,1019,169,912,266,795,312,747,372,670,335,628,253" >
<area shape="poly" coords="1018,196,1029,182,1040,174,1043,167,1043,153,1045,138,1059,132,1076,137,1079,159,1082,176,1090,189,1110,249,1127,269,1132,286,1127,303,1146,380,1150,400,1136,409,1095,417,1067,418,1046,415,1029,405,1009,409,988,405,974,399,967,391,977,348,994,275,988,264,1018,196" >
<area shape="poly" coords="1173,125,1176,116,1168,110,1163,101,1168,83,1167,75,1153,73,1148,61,1159,52,1165,46,1172,41,1192,33,1202,33,1213,33,1220,37,1233,38,1248,40,1259,54,1254,65,1227,71,1227,80,1218,93,1228,105,1231,116,1230,137,1228,152,1225,175,1217,184,1209,195,1195,219,1196,235,1197,245,1190,250,1180,248,1140,204,1130,191,1173,135,1173,125" >
<area shape="poly" coords="1269,1,1302,41,1320,59,1322,73,1316,86,1310,105,1310,114,1317,125,1324,133,1325,149,1322,179,1317,196,1311,207,1303,217,1292,207,1288,221,1284,238,1279,254,1281,270,1281,290,1290,294,1306,314,1316,334,1312,349,1311,363,1313,383,1295,407,1285,418,1284,429,1272,438,1274,458,1285,459,1336,463,1369,461,1457,465,1488,463,1513,467,1482,429,1493,406,1474,366,1475,330,1474,287,1469,276,1479,254,1478,235,1472,216,1469,183,1469,166,1475,149,1477,129,1473,123,1475,118,1482,85,1504,53,1536,3,1536,-1,1269,1" >
<area shape="poly" coords="1482,301,1516,347,1510,371,1526,396,1550,409,1568,418,1583,442,1614,470,1622,481,1633,479,1673,487,1709,480,1716,448,1724,369,1728,331,1739,296,1713,265,1699,250,1681,228,1652,233,1619,235,1584,237,1528,273,1482,301" >
<area shape="poly" coords="1719,222,1747,160,1751,143,1726,149,1724,132,1717,119,1712,97,1687,86,1636,33,1643,28,1687,47,1772,41,1823,2,1843,1,1858,35,1914,50,1976,37,2082,87,2080,100,1911,119,1879,141,1829,136,1836,158,1852,180,1859,200,1849,225,1825,238,1811,266,1819,284,1837,301,1843,304,1847,325,1823,309,1805,285,1797,263,1816,228,1829,220,1818,214,1790,201,1773,192,1762,180,1735,214,1719,222" >
<area shape="poly" coords="2051,147,2074,125,2080,118,2094,113,2107,106,2131,112,2169,84,2231,92,2254,107,2273,130,2274,147,2264,161,2265,179,2269,214,2235,215,2174,208,2189,172,2160,165,2140,161,2115,180,2102,198,2091,204,2071,208,2061,205,2053,197,2083,180,2094,172,2087,161,2065,168,2052,168,2051,147" >
<area shape="poly" coords="1847,298,1896,265,1988,240,2041,232,2044,253,2096,251,2082,273,2105,287,2091,329,2065,349,2079,377,2049,390,2032,397,2018,420,2070,456,2050,477,1986,437,1960,421,1957,460,1939,460,1908,408,1904,438,1871,448,1876,402,1857,410,1811,435,1803,430,1844,392,1864,359,1875,335,1865,324,1847,298" >
<area shape="poly" coords="2332,1,2523,1,2535,23,2548,38,2541,50,2534,69,2524,79,2528,101,2524,159,2511,208,2503,272,2482,295,2479,344,2452,393,2434,394,2419,427,2387,422,2368,407,2351,351,2341,300,2337,213,2330,201,2312,201,2308,170,2307,153,2326,143,2341,115,2348,90,2342,81,2338,64,2332,1" >
</map>
$('area').attr('href', '#');
$('.off-the-side').addClass('push-side');
$('.wall-writings').addClass('wall-writepos').prepend('<button class="close"><img src="x-icon.png" alt=""></button>').hide();
$('area').click(function(){$('#writing1').fadeIn('slow');return false;});
$('.close').click(function(){$(".wall-writings").fadeOut();});

Hope I understood the problem :)
I would place an href tag on each area like:
<map>
<area href="#div1" shape="poly" coords="287,230,301,244,319,251,329,252,340,252,347,252,338,246,336,237,344,233,344,229,345,225,356,227,362,229,376,230,385,235,393,242,396,250,403,254,408,248,414,239,419,231,424,224,429,222,433,233,432,248,428,263,422,272,422,279,410,286,396,288,388,291,385,293,390,296,393,305,396,316,400,318,407,320,414,325,416,332,420,343,415,352,414,360,408,369,401,374,405,387,409,399,407,409,408,412,402,414,368,365,357,374,358,390,359,403,354,409,343,415,337,416,323,370,294,362,268,327,264,274,287,230" >
</map>
<div id="some_div">Some text</div>
$('area').click(function(){var href = $(this).attr('href'); $(href).show(); return false;});
css
#some_div{display:none;}
I think this should work. If this is not what you intended please explain further

In jquery using the click event handler. How do I keep all the
elements from not show but only have one element show one at time to
what is related when I click on it?.
From what i can deduce from your html mapping, you are missing the id's attribute for the tag and your Jquery is actually targeting the whole image map.
the guilty code:
$('area').click(function(){$('#writing1').fadeIn('slow');return false;});
Because of that, all the elements would show when you clicked on any of the area map.

How do you JavaScript style area elements on mouseover?

I've got an image map with 20 area elements, only four shown below. I want to style each area so that a blue border appears whenever a user hovers over it - all the area shapes are rectangles.
<map id="mymap" name="mymap">
<area shape="rect" coords="0,0,223,221" href="http://..." />
<area shape="rect" coords="226,0,448,221" href="http://..." />
<area shape="rect" coords="451,0,673,223" href="http://..." />
<area shape="rect" coords="677,0,1122,223" href="http://..." />
...
</map>
I've tried using CSS to style each area, but it's not working. And I've tried to put an onmouseover=color() on the map element and call the following function, but that doesn't seem to be working either:
function color() {
var blueboxes = document.getElementsByTagName('area');
for(var i=0; i<blueboxes.length; i++) {
blueboxes[i].style.border = 'solid blue 5px';
}
}

mapper.js can be used for this.
Mapper.js 2.4 allows you to add automatic area highlighting to image maps on your webpages (inc. export to SVG).
It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+. On older browsers, it can use "jsgraphics" from Walter Zorn (if installed), else it'll degrade and your visitors won't notice a thing.
Sample code from that website:
Please note that everything below this line is his code and wording, not mine. Full attribution belongs to the link above.
Setting Up
Download mapper.js and include it into your webpage.
<script type="text/javascript" src="wz_jsgraphics.js"></script>
<script type="text/javascript" src="mapper.js"></script>
"wz_jsgraphics.js" is copyright by Walter Zorn and not part of the distribution!
Using It
To get the highlighting just add a class="mapper" to an div surrounded image.
<div>
<img src="..." class="mapper" usemap="..." alt="...">
</div>
To get individual area highlightings add one or more classes to the area.
<map>
...
<area shape="poly" class="noborder icolor00ff00" href="#" coords="...">
...
</map>
To get multiple area selections add one or more id's to the areas rel attribute.
<map>
...
<area shape="poly" id="blue" rel="green,red" href="#" coords="...">
<area shape="poly" id="green" rel="red,blue" href="#" coords="...">
<area shape="poly" id="red" rel="green,blue" href="#" coords="...">
...
</map>
To force a group of areas using the attributes of the initial area.
<map>
...
<area shape="rect" id="black" class="icolor000000 forcegroup" rel="green,red,blue" href="#" coords="...">
...
</map>

The area tag can't be styled like a normal anchor. I would use a different approach. You could apply your image to a div as the background-image and then position clickable elements over the div by using position: absolute.
Take a look at this technique: http://www.alistapart.com/articles/cssmaps/

Can Raphaeljs helps?
Have a look at this sample :)

Usually the approach I see is to build the imagemap itself out of different images in CSS. Here's a good example of this:
http://ago.tanfa.co.uk/css/examples/europe-map.html