Image Map Help - NEWBIE, Coded Image Map but links are not working Options

[The Arc]

Hi Everyone,

I know some coding but HTML isn't my best. I update and create webpages for a non-profit. We want a map that is linked to multiple different websites and I was able to use image-map.net to code out the photo with the links at the correct coordinates but when I input the code the links are not working and whenever you scroll over the photo it is as if the links are not even there. Can anyone help with this?

Website is www.arcofappalachia.org/app-front
Coding: <img src="https://images.squarespace-cdn.com/content/v1/640b875d14fa1852d6031793/1c7bde0c-661e-457f-aea5-e09aecdaa3db/Appalachian+Front.jpg?format=2500w" usemap="#image-map">
<map name="#image-map">
<area target="_blank" alt="Ross County" title="" href="https://rosscountyparkdistrict.com/" coords="3747,648,4261,521" shape="rect">
<area target="_blank" alt="ODNR" title="" href="https://ohiodnr.gov/go-and-do/plan-a-visit/find-a-property/great-seal-state-park" coords="4284,706,4973,774" shape="rect">
<area target="_blank" alt="NPS" title="" href="https://www.nps.gov/hocu/learn/historyculture/mound-city-group.htm" coords="3555,723,4120,853" shape="rect">
<area target="_blank" alt="NPS" title="" href="https://www.nps.gov/hocu/learn/historyculture/hopeton-earthworks.htm" coords="4176,796,4809,881" shape="rect">
<area target="_blank" alt="NPS" title="" href="https://www.nps.gov/hocu/learn/historyculture/hopewell-mound-group.htm" coords="3137,858,3866,949" shape="rect">
<area target="_blank" alt="" title="" href="https://www.adenamansion.com/" coords="3945,869,4504,954" shape="rect">
<area target="_blank" alt="" title="" href="https://www.arcofappalachia.org/junction-earthworks" coords="4030,1067,4673,1140" shape="rect">
<area target="_blank" alt="" title="" href="https://rosscountyparkdistrict.com/" coords="3386,1073,3888,1157" shape="rect">
<area target="_blank" alt="" title="" href="https://www.arcofappalachia.org/spruce-hill" coords="3651,1197,4329,1282" shape="rect">
<area target="_blank" alt="" title="" href="https://ohiodnr.gov/go-and-do/plan-a-visit/find-a-property/scioto-trail-state-park" coords="4193,1411,4899,1502" shape="rect">
<area target="_blank" alt="" title="" href="https://www.nps.gov/hocu/learn/historyculture/seip-earthworks.htm" coords="3352,1366,3770,1451" shape="rect">
<area target="_blank" alt="" title="" href="https://www.arcofappalachia.org/highlands-nature-sanctuary" coords="2894,1485,3758,1626" shape="rect">
<area target="_blank" alt="" title="" href="https://ohiodnr.gov/go-and-do/plan-a-visit/find-a-property/pike-lake-state-park" coords="3341,1728,3934,1801" shape="rect">
<area target="_blank" alt="" title="" href="http://www.greenfieldhistoricalsociety.org/" coords="2081,886,2883,977" shape="rect">
<area target="_blank" alt="" title="" href="https://ohiodnr.gov/go-and-do/plan-a-visit/find-a-property/paint-creek-state-park" coords="2211,1236,2883,1310" shape="rect">
<area target="_blank" alt="" title="" href="https://hchistoricalsociety.square.site/" coords="1612,1519,2126,1609" shape="rect">
<area target="_blank" alt="" title="" href="https://ohiodnr.gov/go-and-do/plan-a-visit/find-a-property/rocky-fork-state-park" coords="1714,1626,2369,1688" shape="rect">
<area target="_blank" alt="" title="" href="https://ohiodnr.gov/go-and-do/plan-a-visit/find-a-property/miller-nature-sanctuary-state-nature-preserve" coords="2578,1558,2838,1643" shape="rect">
<area target="_blank" alt="" title="" href="https://www.arcofappalachia.org/fort-hill" coords="2550,1891,2866,1982" shape="rect">
<area target="_blank" alt="" title="" href="https://www.ohiohistory.org/visit/browse-historical-sites/serpent-mound/" coords="2194,2275,2708,2383" shape="rect">
<area target="_blank" alt="" title="" href="https://www.arcofappalachia.org/samson-obrist-woods" coords="3979,2529,4662,2625" shape="rect">
<area target="_blank" alt="" title="" href="https://www.arcofappalachia.org/ohio-hanging-rock" coords="4775,3230,5379,3314" shape="rect">
<area target="_blank" alt="" title="" href="https://www.arcofappalachia.org/gladys-riley" coords="3397,3038,3860,3134" shape="rect">
<area target="_blank" alt="" title="" href="https://www.arcofappalachia.org/tremper-mound" coords="3945,3269,4442,3371" shape="rect">
<area target="_blank" alt="" title="" href="https://somacc.com/" coords="4080,3546,5272,3642" shape="rect">
<area target="_blank" alt="" title="" href="https://ohiodnr.gov/go-and-do/plan-a-visit/find-a-property/shawnee-state-park" coords="3408,3484,4024,3557" shape="rect">
<area target="_blank" alt="" title="" href="https://ohiodnr.gov/go-and-do/plan-a-visit/find-a-property/raven-rock-state-nature-preserve" coords="3606,3568,4013,3647" shape="rect">
<area target="_blank" alt="" title="" href="https://www.arcofappalachia.org/rock-run" coords="3098,4054,3459,4155" shape="rect">
<area target="_blank" alt="" title="" href="https://www.arcofappalachia.org/ohio-river-bluffs" coords="1528,3738,2059,3811" shape="rect">
<area target="_blank" alt="" title="" href="https://ohiodnr.gov/go-and-do/plan-a-visit/find-a-property/whipple-state-nature-preserve" coords="2155,3602,2465,3704" shape="rect">
<area target="_blank" alt="" title="" href="https://ohiodnr.gov/go-and-do/plan-a-visit/find-a-property/chaparral-prairie-state-nature-preserve" coords="1674,3077,2245,3173" shape="rect">
<area target="_blank" alt="" title="" href="https://ohiodnr.gov/go-and-do/plan-a-visit/find-a-property/johnson-woods-state-nature-preserve" coords="2397,3009,2906,3083" shape="rect">
<area target="_blank" alt="" title="" href="https://ohiodnr.gov/go-and-do/plan-a-visit/find-a-property/shoemaker-state-nature-preserve" coords="2945,2575,3307,2659" shape="rect">
<area target="_blank" alt="" title="" href="https://ohiodnr.gov/go-and-do/plan-a-visit/find-a-property/davis-memorial-state-nature-preserve" coords="2900,2693,3397,2772" shape="rect">
<area target="_blank" alt="" title="" href="https://ohiodnr.gov/go-and-do/plan-a-visit/find-a-property/adams-lake-state-park" coords="1674,3196,2352,3263" shape="rect">
<area target="_blank" alt="" title="" href="https://www.arcofappalachia.org/chalet-nivale" coords="2544,2433,2973,2524" shape="rect">
<area target="_blank" alt="" title="" href="https://www.arcofappalachia.org/plum-run" coords="2313,2642,2872,2727" shape="rect">
<area target="_blank" alt="" title="" href="https://www.arcofappalachia.org/quiverheart-gorge" coords="2194,2778,2770,2857" shape="rect">
<area target="_blank" alt="" title="" href="https://www.arcofappalachia.org/kamama-prairie" coords="2725,2891,3261,2981" shape="rect">
<area target="_blank" alt="" title="" href="https://www.nature.org/en-us/get-involved/how-to-help/places-we-protect/edge-of-appalachia-cedar-falls-trail/" coords="2753,3167,3171,3241" shape="rect">
<area target="_blank" alt="" title="" href="https://www.nature.org/en-us/get-involved/how-to-help/places-we-protect/edge-of-appalachia-the-wilderness-trail/" coords="2753,3297,3154,3399" shape="rect">
<area target="_blank" alt="" title="" href="https://www.nature.org/en-us/get-involved/how-to-help/places-we-protect/edge-of-appalachia-buzzardroost-rock-trail/" coords="2064,3399,2618,3461" shape="rect">
<area target="_blank" alt="" title="" href="https://www.nature.org/en-us/get-involved/how-to-help/places-we-protect/edge-of-appalachia-lynx-prairie-trail/" coords="2714,3455,3120,3534" shape="rect">
<area target="_blank" alt="" title="" href="https://www.nature.org/en-us/get-involved/how-to-help/places-we-protect/joan-jones-portman-trail-and-dr-george-rieveschl-jr-creeks-bend-overlook/" coords="2200,3506,2584,3580" shape="rect">
<area target="_blank" alt="" title="" href="https://visitchillicotheohio.com/what-to-do/" coords="4815,954,5645,1327" shape="rect">
</map>

[pandy]

The coordinates are way off. I have a 32" screen set to 2560 pixels width. Your targets are outside my screen and definitely outside the image. Read this and use a screen ruler to get the coords needed to place the areas where you want. It isn't hard.
https://htmlhelp.com/reference/html40/special/area.html

Also, if you use the output from image-map.net (in case you can get something better out of it) you can't paste the whole shebang with doctype, HEAD and so on in. Just take the map, the bit you show here.

[The Arc]

The coordinates are way off. I have a 32" screen set to 2560 pixels width. Your targets are outside my screen and definitely outside the image. Read this and use a screen ruler to get the coords needed to place the areas where you want. It isn't hard.
https://htmlhelp.com/reference/html40/special/area.html

Also, if you use the output from image-map.net (in case you can get something better out of it) you can't paste the whole shebang with doctype, HEAD and so on in. Just take the map, the bit you show here.

What screen ruler do you use? I've uploaded in paint as I read to do on another website and the coords are matching with the above when I do that. Maybe I don't have the correct width? Again, I apologize as this type of coding is very new to me. match

[The Arc]

I was able to figure out the links and I am starting to get them to the work. Now my question is how can I get this to work on the phone version. Website is through Squarespace and I'm betting there isn't a great way, correct?

[pandy]

I doubt they do. Is your screen more than 4284 pixels wide? The image is 2500 pixels wide but the first AREA begins 3747 pixels from the left, the second 4284 pixels from the left and so on.


I use an old freeware called Calipers. Alas it isn't free anymore. But you can find lots of free rulers. Any of them will do. Or you can use an image program that can tell you the coordinates for the spot where you place the mouse pointer.

[pandy]

Heh, I found you can still download the old freware version of Calipers from their site. It's v. 1.0 I have. I assume 1.5 is also free. I'll download that myself.
http://www.iconico.com/caliper/old.aspx

It's handy for other things because it isn't ruler but what it's called - calipers. A ruler works fine for what you need but this will too.