Accelerated Mobile Pages: Map Area alternative

Question

I'm using AMP and I need to have hrefs on an image with some coordinates like on this example:

<img src="planets.gif" width="145" height="126" alt="Planets"
usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

How can I do it on AMP?

score 0 · Answer 1 · answered Dec 27 '19 at 08:29

Use an SVG instead (which is even responsive). Here is an example:

<figure id='backing'>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1280 504" preserveAspectRatio="xMinYMin meet">
      <image width="1280" height="504" xlink:href="https://cdn.pixabay.com/photo/2018/01/24/18/05/background-3104413_1280.jpg">
      </image>
      <a on="tap:AMP.navigateTo(url='game1.html')">
        <circle cx="243" cy="133" r="79" fill="#fff" opacity="0.15" /></a>
      <a on="tap:AMP.navigateTo(url='game2.html')">
        <rect x="870" y="147" width="680" height="33" fill="#fff" opacity="0.25" /></a>
      <a on="tap:AMP.navigateTo(url='game3.html')">
        <circle cx="889" cy="379" r="80" fill="#fff" opacity="0.1" /></a>
      <a on="tap:AMP.navigateTo(url='game4.html')">
        <circle cx="770" cy="671" r="73" fill="#fff" opacity="0.2" /></a>
      <a on="tap:AMP.navigateTo(url='game5.html')">
        <polygon id="test" points="163,587 214,492 267,473 335,483 377,603 327,631 249,658 211,641" fill="#fff" opacity="0.3" /></a>
    </svg>
  </figure>

The trick is: AMP actions work inside SVG's so you can add click handler that navigate to a different page or update AMP State.

Note: the SVG example is from this answer.

Accelerated Mobile Pages: Map Area alternative

1 Answers1