XF 2.2 Use HTML image mapping in page nodes.

[Ferdinand]

Is it possible? I have created a basic image map html but for some reason it will not work, even when the page is created using HTML:

<img src="ldn.png" usemap="#image_map">
<map name="image_map">
  <area alt="Gordon Hospital" title="Gordon Hospital" href="https://atomicacademia.com/pages/medicaltraining/" coords="1642,2942,159" shape="circle">
  <area alt="St Thomas Hospital" title="St Thomas Hospital" href="https://atomicacademia.com/pages/stthomas/" coords="3089,1999,214" shape="circle">
</map>

 

[avalanch]

Try this. Your dimensions for ldn.png is 3300x3300 right?

<img src="ldn.png" alt="London Hospitals" usemap="#image_map">
<map name="image_map">  <area alt="Gordon Hospital" title="Gordon Hospital" href="https://atomicacademia.com/pages/medicaltraining/" coords="1642,2942,159" shape="circle">
 <area alt="St Thomas Hospital" title="St Thomas Hospital" href="https://atomicacademia.com/pages/stthomas/" coords="3089,1999,214" shape="circle">
</map>

If your website needs to be responsive for different screen sizes, you might need to explore alternative methods for creating clickable regions on the image, such as JavaScript or CSS solutions.

 

[Ferdinand]

Try this. Your dimensions for ldn.png is 3300x3300 right?

<img src="ldn.png" alt="London Hospitals" usemap="#image_map">
<map name="image_map">  <area alt="Gordon Hospital" title="Gordon Hospital" href="https://atomicacademia.com/pages/medicaltraining/" coords="1642,2942,159" shape="circle">
 <area alt="St Thomas Hospital" title="St Thomas Hospital" href="https://atomicacademia.com/pages/stthomas/" coords="3089,1999,214" shape="circle">
</map>

Yeah thanks it's 1180 x 1180 but adjusts with the user browser, it's the coordinates changing from whatever editor I am using.

 

[avalanch]

Gimp should be a good editor to try

 

[avalanch]

This discussion goes into how to add coordinates via a combination of css+js

‎Gemini - tell me how i can use css to add coordinates to that image

Created with Gemini

g.co

Also I fed it your updated coordinates and it responded by saying to use percentages.... added below;

<img src="ldn.png" alt="London Hospitals" usemap="#image_map">
<map name="image_map">
  <area alt="Gordon Hospital" title="Gordon Hospital" href="https://atomicacademia.com/pages/medicaltraining/" coords="14%,25%,13%" shape="circle">
  <area alt="St Thomas Hospital" title="St Thomas Hospital" href="https://atomicacademia.com/pages/stthomas/" coords="26%,17%,18%" shape="circle">
</map>

 

[Ferdinand]

I tried to follow this for the page I was hoping to do this on. It's a little more complex now.

<p class="noselect">
<img src="https://atomicacademia.com/simulation/ldn.png" usemap="#image_map2">
<map name="image_map2">
<map id="imgmap2024426141928" name="imgmap2024426141928">
  <area shape="rect" alt="Go to Bond Street" title="Go to Bond Street" coords="163,4,248,42" href="https://atomicacademia.com/pages/transport/" target="_self" />
  <area shape="rect" alt="Go to Claridges" title="Go to Claridges" coords="203,44,274,85" href="https://atomicacademia.com/pages/claridges/" target="_self" />
  <area shape="rect" alt="Go to Carnaby Street" title="Go to Carnaby Street" coords="453,12,552,60" href="https://atomicacademia.com/pages/carnaby/" target="_self" />
  <area shape="rect" alt="Go to the Apollo Theatre" title="Go to the Apollo Theatre" coords="609,87,713,135" href="https://atomicacademia.com/pages/apollo/" target="_self" />
  <area shape="rect" alt="Go to the Ambassadors" title="Go to the Ambassadors" coords="781,19,877,64" href="https://atomicacademia.com/pages/ambassadors/" target="_self" />
  <area shape="rect" alt="Go to Covent Garden Station" title="Go to Covent Garden Station" coords="887,16,989,57" href="https://atomicacademia.com/pages/transport/" target="_self" />
  <area shape="rect" alt="Go to The Biltmore" title="Go to The Biltmore" coords="61,133,198,185" href="https://atomicacademia.com/pages/biltmore/" target="_self" />
  <area shape="rect" alt="Go to Berkeley Square" title="Go to Berkeley Square" coords="237,160,345,236" href="https://atomicacademia.com/pages/berkley/" target="_self" />
  <area shape="rect" alt="Go to the Royal Academy of Arts" title="Go to the Royal Academy of Arts" coords="400,200,547,248" href="https://atomicacademia.com/pages/royalacademy/" target="_self" />
  <area shape="rect" alt="Go to Piccadilly Circus Station" title="Go to Piccadilly Circus Station" coords="573,177,684,217" href="https://atomicacademia.com/pages/transport/" target="_self" />
  <area shape="rect" alt="Go to Leicester Square Station" title="Go to Leicester Square Station" coords="761,99,873,133" href="https://atomicacademia.com/pages/transport/" target="_self" />
  <area shape="rect" alt="Go to the Restaurant" title="Go to the Restaurant" coords="75,224,154,269" href="https://atomicacademia.com/pages/restaurant/" target="_self" />
  <area shape="rect" alt="Go to Green Park Station" title="Go to Green Park Station" coords="337,332,416,371" href="https://atomicacademia.com/pages/transport/" target="_self" />
  <area shape="rect" alt="Go to St Jame's Palace" title="Go to St Jame's Palace" coords="455,433,596,478" href="https://atomicacademia.com/pages/sjpalace/" target="_self" />
  <area shape="rect" alt="Go to London Coliseum" title="Go to London Coliseum" coords="824,165,935,207" href="https://atomicacademia.com/pages/lc/" target="_self" />
  <area shape="rect" alt="Go to the Savoy Theatre" title="Go to the Savoy Theatre" coords="995,161,1086,201" href="https://atomicacademia.com/pages/savoy/" target="_self"/>
  <area shape="rect" alt="Go to Sumerset House" title="Go to Sumerset House" coords="1092,121,1180,176" href="https://atomicacademia.com/pages/sumerset/" target="_self" />
  <area shape="rect" alt="Go to Charing Cross Station" title="Go to Charing Cross Station" coords="891,268,985,314" href="https://atomicacademia.com/pages/transport/" target="_self" />
  <area shape="rect" alt="Go to Embankment Station" title="Go to Embankment Station" coords="952,308,1053,346" href="https://atomicacademia.com/pages/transport/" target="_self" />
  <area shape="circle" alt="Go to St Thomas' Hospital" title="Go to St Thomas' Hospital" coords="1095,720,58" href="https://atomicacademia.com/pages/stthomas/" target="_self" />
  <area shape="circle" alt="Go to Gordon Hospital" title="Go to Gordon Hospital" coords="584,1058,55" href="https://atomicacademia.com/pages/medicaltraining/" target="_self" />
  <area shape="rect" alt="Go to Waterloo Bridge" title="Go to Waterloo Bridge" coords="1108,227,1180,294" href="https://atomicacademia.com/pages/waterloo/" target="_self" />
  <area shape="rect" alt="Go to Royal Festival Hall" title="Go to Royal Festival Hall" coords="1100,364,1181,423" href="https://atomicacademia.com/pages/royalfestivalhall/" target="_self" />
  <area shape="rect" alt="Go to Banqueting House" title="Go to Banqueting House" coords="831,424,943,478" href="https://atomicacademia.com/pages/bh/" target="_self" />
  <area shape="rect" alt="Go to 10 Downing Street" title="Go to 10 Downing Street" coords="774,480,895,528" href="https://atomicacademia.com/pages/no10/" target="_self" />
  <area shape="rect" alt="Go to the London Eye" title="Go to the London Eye" coords="1036,476,1117,542" href="https://atomicacademia.com/pages/londoneye/" target="_self" />
  <area shape="circle" alt="Go to Westminster Station" title="Go to Westminster Station" coords="918,608,33" href="https://atomicacademia.com/pages/transport/" target="_self" />
  <area shape="rect" alt="Go to Westminster Bridge" title="Go to Westminster Bridge" coords="955,609,1072,651" href="https://atomicacademia.com/pages/westminsterbridge/" target="_self" />
  <area shape="rect" alt="Go to the Palace of Westminster" title="Go to the Palace of Westminster" coords="856,674,997,733" href="https://atomicacademia.com/pages/wpalace/" target="_self" />
  <area shape="rect" alt="Go to St James's Park Station" title="Go to St James's Park Station" coords="569,684,687,736" href="https://atomicacademia.com/pages/transport/" target="_self" />
  <area shape="rect" alt="Go to The Royal Mews" title="Go to The Royal Mews" coords="293,702,410,750" href="https://atomicacademia.com/pages/trm/" target="_self" />
  <area shape="rect" alt="Go to Buckingham Palace" title="Go to Buckingham Palace" coords="305,565,444,684" href="https://atomicacademia.com/pages/buckinghampalace/" target="_self" />
 <area shape="rect" alt="Go to Archbishop's Park" title="Go to Archbishop's Park" coords="1095,791,1181,859" href="https://atomicacademia.com/pages/archbishopspark/" target="_self" />
 <area shape="rect" alt="Go to Garden Museum" title="Go to Garden Museum" coords="1011,886,1119,944" href="https://atomicacademia.com/pages/gardenmuseum/" target="_self" />
 <area shape="rect" alt="Go to London Fire Brigade Museum" title="Go to London Fire Brigade Museum" coords="1002,1008,1137,1075" href="https://atomicacademia.com/pages/lfb/" target="_self" />
 <area shape="rect" alt="Go to Tate Britain" title="Go to Tate Britain" coords="792,1071,878,1125" href="https://atomicacademia.com/pages/tate/" target="_self" />
 <area shape="rect" alt="Go to Victoria Park Plaza Hotel" title="Go to Victoria Park Plaza Hotel" coords="381,929,461,990" href="https://atomicacademia.com/pages/vphotel/" target="_self" />
 <area shape="rect" alt="Go to Eccleston Square Hotel" title="Go to Eccleston Square Hotel" coords="240,1068,395,1129" href="https://atomicacademia.com/pages/esh/" target="_self" />
 <area shape="rect" alt="Go to London Victoria Station" title="Go to London Victoria Station" coords="274,895,378,945" href="https://atomicacademia.com/pages/transport/" target="_self" />
 <area shape="rect" alt="Go to the Restaurant" title="Go to the Restaurant" coords="82,1143,149,1181" href="https://atomicacademia.com/pages/restaurant2/" target="_self" />
 <area shape="rect" alt="Go to Eaton Square" title="Go to Eaton Square" coords="67,847,169,896" href="https://atomicacademia.com/pages/esquare/" target="_self" />
 <area shape="rect" alt="Go to Hide Park Corner Underground" title="Go to Hide Park Corner Underground" coords="2,524,90,562" href="https://atomicacademia.com/pages/transport/" target="_self" />
 <area shape="rect" alt="Go to Apsley House" title="Go to Apsley House" coords="65,485,158,522" href="https://atomicacademia.com/pages/aspley/" target="_self" />
 <area shape="rect" alt="Go to Green Park" title="Go to Green Park" coords="310,451,389,505" href="https://atomicacademia.com/pages/gpark/" target="_self" />
 <area shape="rect" alt="Go to Trafalgar Square" title="Go to Trafalgar Square" coords="772,230,878,296" href="https://atomicacademia.com/pages/tsquare/" target="_self" />
 <area shape="rect" alt="Go to St James's Square" title="Go to St James's Square" coords="523,264,637,344" href="https://atomicacademia.com/pages/stjsquare/" target="_self" />
 <area shape="rect" alt="Go to The Royal Society" title="Go to The Royal Society" coords="635,344,753,393" href="https://atomicacademia.com/pages/royalsociety/" target="_self" />
    <area shape="rect" alt="Go to St James's Park" title="Go to St James's Park" coords="535,480,770,622" href="https://atomicacademia.com/pages/stjpark/" target="_self" /></map></map></p>

Anywho I tried to make the coords percentages based on the image size of 1158 x 1158 but LLM's never complete for me lol: https://chat.openai.com/share/8fc8a904-8f6d-4ef2-ac3c-9192d2a556b1

I also tried a percentage coordinate but I don't they work with safari.