JSFiddle - React, Tailwind, and code Playground

by roadrash

HTML

<script src="http://highslide.com/highslide/highslide-full.js"></script>
<link rel="stylesheet" href="http://highslide.com/highslide/highslide.css">
<div style="width: 454px; margin: 0 auto">

<!--
	3) Add onclick attributes to the area tags like below.
-->

    <img src="http://roadrash.no/hs-support/images/nordic.gif" alt="" width="454" height="389" usemap="#imgmap1" style="border: none" />
<map id="imgmap1" name="imgmap1">
	<area shape="rect" alt="Iceland" title="Iceland" coords="1,43,110,135" href="http://en.wikipedia.org/wiki/Iceland" onclick="return hs.htmlExpand(this, {objectType: 'iframe'})" />
	<area shape="circle" alt="Denmark" title="Denmark" coords="239,352,36" href="http://en.wikipedia.org/wiki/Denmark" onclick="return hs.htmlExpand(this, {objectType: 'iframe'})" />
	<area shape="poly" alt="Norway" title="Norway" coords="208,307,171,294,176,206,240,145,244,87,283,19,348,-1,408,1,405,43,391,43,393,34,377,21,366,33,367,55,362,65,354,58,346,64,331,51,324,62,320,79,308,69,307,86,301,84,293,97,296,106,282,129,274,162,277,168,276,175,268,175,258,194,263,226,272,236,264,242,267,254,266,264,260,267,261,287,249,282,247,307,231,310" href="http://en.wikipedia.org/wiki/Norway" onclick="return hs.htmlExpand(this, {objectType: 'iframe'})" />
	<area shape="poly" alt="Sweden" title="Sweden" coords="352,357,359,294,331,228,368,134,354,74,325,57,319,70,306,70,294,97,295,107,274,163,281,168,280,178,266,175,258,194,264,225,271,235,265,243,269,262,259,269,260,288,255,287,245,309,270,344,276,376,276,390,323,381,341,368" href="http://en.wikipedia.org/wiki/Sweden" onclick="return hs.htmlExpand(this, {objectType: 'iframe'})" />
	<area shape="poly" alt="Finland" title="Finland" coords="440,256,355,289,331,228,369,130,353,70,347,64,356,58,364,62,370,50,364,28,380,20,394,36,392,43,437,91,450,140,461,224" href="http://en.wikipedia.org/wiki/Finland" onclick="return hs.htmlExpand(this, {objectType: 'iframe'})" />
</map>
</div>

JavaScript

// open html popup from image map

hs.graphicsDir = 'http://highslide.com/highslide/graphics/';
hs.outlineType = 'rounded-white';
hs.fadeInOut = true;
hs.headingEval = 'this.a.alt';
hs.wrapperClassName = 'draggable-header';
hs.showCredits = false;
hs.width = '650';