The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Image Map Help - NEWBIE, Coded Image Map but links are not working
The Arc
post Feb 15 2024, 03:14 PM
Post #1





Group: Members
Posts: 3
Joined: 15-February 24
Member No.: 29,130



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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 15 2024, 03:48 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
The Arc
post Feb 15 2024, 04:15 PM
Post #3





Group: Members
Posts: 3
Joined: 15-February 24
Member No.: 29,130



QUOTE(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.


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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
The Arc
post Feb 15 2024, 04:38 PM
Post #4





Group: Members
Posts: 3
Joined: 15-February 24
Member No.: 29,130



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 15 2024, 04:45 PM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 15 2024, 04:54 PM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 17th April 2024 - 02:26 PM