JSFiddle - React, Tailwind, and code Playground

HTML

<p>The plantes of the solar system serving as a navigation:</p>
    <map name="planetmap" id="planetmap">
      <area shape="circle" coords="84,214,14" href="#mercury" alt="Mercury" id="map-mercury" />
      <area shape="circle" coords="125,190,26" href="#venus" alt="Venus" id="map-venus" />
      <area shape="circle" coords="175,161,26" href="#earth" alt="Earth" id="map-earth" />
      <area shape="circle" coords="223,135,22" href="#mars" alt="Mars" id="map-mars" />
      <area shape="circle" coords="396,212,67" href="#jupiter" alt="Jupiter" id="map-jupiter" />
      <area shape="circle" coords="504,151,45" href="#saturn" alt="Saturn" id="map-saturn" />
      <area shape="poly" coords="550,180,580,180,580,240,550,240" nohref="nohref" alt="X" id="map-extra">
    </map>
    <dl id="menu-earth" class="menu">
      <dt>Name</dt>
      <dd>Earth</dd>
      <dt>Mean radius</dt>
      <dd>6,371.0 km</dd>
    </dl>
    <dl id="menu-venus" class="menu">
      <dt>Name</dt>
      <dd>Venus</dd>
      <dt>Mean radius</dt>
      <dd>6,051.8 km</dd>
    </dl>
    <dl id="menu-mercury" class="menu">
      <dt>Name</dt>
      <dd>Mercury</dd>
      <dt>Mean radius</dt>
      <dd>2,439.7 km</dd>
    </dl>
    <dl id="menu-mars" class="menu">
      <dt>Name</dt>
      <dd>Mars</dd>
      <dt>Mean radius</dt>
      <dd>3,396.2 km</dd>
    </dl>
    <dl id="menu-jupiter" class="menu">
      <dt>Name</dt>
      <dd>Jupiter</dd>
      <dt>Mean radius</dt>
      <dd>71,492 km</dd>
    </dl>
    <dl id="menu-saturn" class="menu">
      <dt>Name</dt>
      <dd>Saturn</dd>
      <dt>Mean radius</dt>
      <dd>60,268 km</dd>
    </dl>
    <dl id="menu-extra" class="menu">
      <dt>Name</dt>
      <dd>Dust in space</dd>
    </dl>
    <img src="http://www.vtaide.com/png/images/planets3.jpg" alt="Solar system" longdesc="http://www.vtaide.com/png/images/planets3.jpg" usemap="#planetmap" id="planetimage" />

CSS

img {
  border-style: none;
}
dl.menu {
  display: none;
  border: 1px solid black;
  position: absolute;
  margin: 0;
  padding: 10px;
  background: gold;
}
dl.menu-show {
  display: block;
}
nav {
  display: block;
  position: relative;
}

JavaScript

/*!
 * jQuery areaOffset Plugin
 *
 * Copyright 2010, Peter Galiba
 * Dual licensed under the MIT or GPL Version 2 licenses.
 */
(function ($) {

  /**
   * Fetch the offset of an <area> in a <map> element.
   *
   * @param center {Boolean}
   *   Return the center offset of the area if set.
   * @returns {Object}
   *   Offset position in an object like: {top: 0, left: 0}.
   */
  $.fn.areaOffset = function (center) {
    var areas = this.filter('area'),
        area = areas.length && areas[0],
        coords = (area && $.map(area.coords.split(','), $.trim)) || [],
        cl = coords.length,
        offset = { left: 0, top:  0 },
        shape,
        xs, ys, xm, ym, i, A, xl, cx, cy, s,
        map, obj;

    if (cl > 2) {
      shape = areas.eq(0).attr('shape');
      shape = shape && shape.toLowerCase();
      // Different calculations are required by shape type.
      switch (shape) {
        case 'circle':
          // By default circle returns center, so calculation is only needed,
          // if upper left corner is required.
          offset = {
            left : +coords[0] - (center ? 0 : coords[2]),
            top  : +coords[1] - (center ? 0 : coords[2])
          };
          break;

        case 'rect':
        case 'poly':
          // Polygon needs to have at least 3 vectors.
          if (cl >= 6 && cl % 2 === 0) {
            xs = []; ys = [];
            for (i = 0; i < cl; i += 1) {
              i % 2 ? ys.push(+coords[i]) : xs.push(+coords[i]);
            }
            xm = Math.min.apply(Math, xs);        // Minimum of all X coords
            ym = Math.min.apply(Math, ys);        // Minimum of all Y coords

            offset = {
              left : xm,
              top  : ym
            };

            // Caculate center position if needed.
            if (center) {
              xl = xs.length; // Real corners of the polygon
              // Treat rectangles differently
              if (shape === 'rect') {
                offset...