1

I am building the stite at https://simard57.synology.me/LHVCResortMap/LHVCResortMap%20Simple.php#ResortMap and the USEMAP I am trying to code does not seem to be working. The snippet is

            <div class="Resort">
                <h1 id="ResortMap">Resort Map</h1>
                <img src="High Res/Resort-Map Blue Labeled 10-6-22.jpg" alt="Full Map of the Resort" width="100%" height="auto" usemap="#ResortMap">
                <map name="ResortMap">
                <!-- Villa --> 
                    <area alt="Royal Villas" title="Royal Villas" href="#RoyalVillas" coords="757,1112,81" shape="circle">
                    <area alt="Crown Villas North" title="Crown Villas" href="#CrownVillas" coords="1037,575,84" shape="circle">
                    <area alt="Crown Villas South" title="Crown Villas" href="#CrownVillas" coords="1377,1080,81" shape="circle">
                    <area alt="Cliff Villas" title="Cliff Villas" href="#CliffVillas" coords="991,312,72" shape="circle">
                    <area alt="Villa Park Villas" title="Villa Park Villas" href="#VillaParkVillas" coords="1395,1606,75" shape="circle">
                    <area alt="Royal Lake Village" title="Royal Lake Village" href="#RoyalLake" coords="1754,1760,85" shape="circle">
                    <area alt="Overflow Villas" title="Overflow Villas" href="#OverflowVillas" coords="46,1048,127,1262" shape="rect">
                <!-- Apartments --> 
                    <area alt="Sunrise Suites" title="Sunrise Suites" href="#ResortInfo" coords="526,1175,90" shape="circle">
                    <area alt="Presidential Suites" title="Presidential Suites" href="#ResortInfo" coords="214,1325 375,1146 453,1233 295,1401 295,1401 " shape="polygon">
                    <area alt="Royal Suites" title="Royal Suites" href="#ResortInfo" coords="875,716,999,863" shape="rect">
                    <area alt="Residence Suites" title="Residence Suites" href="#ResortInfo" coords="693,1311 910,1220 933,1346 739,1409 733,1377 736,1412 " shape="polygon">
                    <area alt="Crowne Suites" title="Crowne Suites" href="#ResortInfo" coords="554,1389,84" shape="circle">
                <!-- Hotels --> 
                    <area alt="Tropical Hotel" title="Tropical Hotel" href="#ResortInfo" coords="719,809,87" shape="circle">
                    <area alt="Cofresi Palm Beach Spa and Resort" title="Cofresi Palm Beach Spa and Resort" href="#ResortInfo" coords="300,936,90" shape="circle">
                </map>
            </div>

the clickable areas used to work until I swapped out the map image for one that was higher resolution. I recreated the AREA coordinates using https://www.imagemap.org/

Donald Simard
  • 21
  • 2
  • Just wanted to say that they exist but in the wrong position, I think because you changed the width="100%" which change the image size. To fix this you have to change the coords and test until you get the right coords. – ABDULAZIZ NOREDIN QADMOR Dec 28 '22 at 09:22
  • excellent! that was the problem. I will rework them. I suppose I made two changes and I thought it scaled - thanks for setting me on the right path! – Donald Simard Jan 06 '23 at 23:59
  • do you have thoughts on how to find the right coordinates? Is it simply trial/error or is there some way to calculate them? – Donald Simard Jan 09 '23 at 18:13
  • Yes, I know. However, I can calculate if the shape is a circle only. if it is a rect or poly you need to add more values for coords which makes it more complicated. – ABDULAZIZ NOREDIN QADMOR Jan 10 '23 at 12:47
  • Let us imagine an image with 400 width and 400 height. coords="x,y, radius";. x value is to move it from left to right, while y is from top to bottom. The radius is the size of the clickable area. if I want it on the middle I should use coords="200,200,40"; it will be in middle of the image. Another example is if I want it to be in the bottom right corner then I should use coords="400,400,40";. please make sure that the shape="circle";. Is that clear? – ABDULAZIZ NOREDIN QADMOR Jan 10 '23 at 16:40
  • i have been using https://www.imagemap.org/ to find the coordinates using the tools there (Circle, Rectangle, Polygon) however when I adjust the width in the image to have it display at a better size, the image scales but the – Donald Simard Jan 11 '23 at 14:00
  • Your problem has been mentioned in this link https://stackoverflow.com/questions/7844399/responsive-image-map – ABDULAZIZ NOREDIN QADMOR Jan 12 '23 at 09:25

0 Answers0