XF 2.2 Use HTML image mapping in page nodes.

Ferdinand

Ferdinand

Well-known member
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:

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>
 
Sort by date Sort by votes
Try this. Your dimensions for ldn.png is 3300x3300 right?

HTML: 
<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.
 
Last edited:
Upvote 0 Downvote
avalanch said:
Try this. Your dimensions for ldn.png is 3300x3300 right?

HTML: 
<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>
Click to expand...
Yeah thanks it's 1180 x 1180 but adjusts with the user browser, it's the coordinates changing from whatever editor I am using.
 
Upvote 0 Downvote
This discussion goes into how to add coordinates via a combination of css+js

g.co

‎Gemini - direct access to Google AI

Created with Gemini
g.co g.co
Also I fed it your updated coordinates and it responded by saying to use percentages.... added below;

Code: 
<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>
 
Upvote 0 Downvote
I tried to follow this for the page I was hoping to do this on. It's a little more complex now.
Code: 
<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.
 
Upvote 0 Downvote
You must log in or register to reply here.

Similar threads

System0
  • Question Question
How do you use HTML in Page Nodes?
Replies
1
Views
608
System0
System0
Back
Top Bottom