Printable Version of Topic

Posted by: The Arc Feb 15 2024, 03:14 PM

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>

Posted by: pandy Feb 15 2024, 03:48 PM

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.

Posted by: The Arc Feb 15 2024, 04:15 PM

QUOTE(pandy @ Feb 15 2024, 03:48 PM)

Posted by: The Arc Feb 15 2024, 04:38 PM

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?

Posted by: pandy Feb 15 2024, 04:45 PM

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.

Posted by: pandy Feb 15 2024, 04:54 PM

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.