JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div class='area_icon icon_bronze'></div>

<div class='worldmap'>

<div class='map_highlight map_highlight_1'>
  <img src='http://griffusion.elementfx.com/microstable/map/region-1.png'>
</div>
<div class='map_highlight map_highlight_2'>
  <img src='http://griffusion.elementfx.com/microstable/map/region-2.png'>
</div>
<div class='map_highlight map_highlight_3'>
  <img src='http://griffusion.elementfx.com/microstable/map/region-3.png'>
</div>
<div class='map_highlight map_highlight_4'>
  <img src='http://griffusion.elementfx.com/microstable/map/region-4.png'>
</div>
<div class='map_highlight map_highlight_5'>
  <img src='http://griffusion.elementfx.com/microstable/map/region-5.png'>
</div>
<div class='map_highlight map_highlight_6'>
  <img src='http://griffusion.elementfx.com/microstable/map/region-6.png'>
</div>
<div class='map_highlight map_highlight_7'>
  <img src='http://griffusion.elementfx.com/microstable/map/region-7.png'>
</div>
<div class='map_highlight map_highlight_8'>
  <img src='http://griffusion.elementfx.com/microstable/map/region-8.png'>
</div>
<div class='map_highlight map_highlight_9'>
  <img src='http://griffusion.elementfx.com/microstable/map/region-9.png'>
</div>
<div class='map_highlight map_highlight_10'>
  <img src='http://griffusion.elementfx.com/microstable/map/region-10.png'>
</div>
<div class='map_highlight map_highlight_11'>
  <img src='http://griffusion.elementfx.com/microstable/map/region-11.png'>
</div>
<div class='map_highlight map_highlight_12'>
  <img src='http://griffusion.elementfx.com/microstable/map/region-12.png'>
</div>
<div class='map_highlight map_highlight_13'>
  <img src='http://griffusion.elementfx.com/microstable/map/region-13.png'>
</div>
<div class='map_highlight map_highlight_14'>
  <img src='http://griffusion.elementfx.com/microstable/map/region-14.png'>
</div>
<div class='map_highlight map_highlight_15'>
  <img src='http://griffusion.elementfx.com/microstable/map/region-15.png'>
</div>
<div class='map_highlight...

CSS

body {background-color:gold;}
.area_info {display:none;}

.area_icon { width: 4.76%; height: 8.7%;position:absolute;
    background: url('http://griffusion.elementfx.com/microstable/icons-dragon.png') no-repeat;
    background-size: 400% 100%;  cursor:pointer;
}
/* icon versions */
.icon_gold, .icon_bronze:hover { background-position: 0 0; }
.icon_silver, .icon_dark:hover { background-position: 100% 0; }
.icon_bronze { background-position: 66.66% 0; }
.icon_dark { background-position: 33.33% 0; }

/* region 1 */
.area_1 {top:12%;left:12%;} /* icy north */
.area_2 {top:29%;left:15%;} /* icy south tip */
.area_3 {top:18%;left:25%;} /* icy ridges */
.area_4 {top:29%;left:42%;} /* frosty plain */
.area_5 {top:23%;left:55%;} /* taiga */
.area_6 {top:30%;left:67%;} /* cool plains */
.area_7 {top:38%;left:57%;} /* cool grassland */
.area_8 {top:47%;left:44%;} /* frosty grassland, forest */
.area_9 {top:77%;left:38%;} /* frosty forest */
.area_10 {top:69%;left:55%;} /* cool seas */
/* region 2 */
.area_11 {top:15%;left:33%;} /* north cloudfront desert */
.area_12 {top:32%;left:26%;} /* sea */
.area_13 {top:57%;left:22%;} /* tropical sea? */
.area_14 {top:32%;left:45%;} /* grasses */
.area_15 {top:28%;left:59%;} /* mtn jungle peak */
.area_16 {top:42%;left:53%;} /* wide river in jungle ravine */
.area_17 {top:54%;left:41%;} /* high jungle */
.area_18 {top:68%;left:33%;} /* south plains */
.area_19 {top:79%;left:46%;} /* south hills */
.area_20 {top:54%;left:57%;} /* upper valley */
.area_21 {top:50%;left:69%;} /* lower valley, falls */
.area_22 {top:58%;left:82%;} /* far east jungle, river */
/* region 3 */
.area_23 {top:35%;left:13%;} /* forested island */
.area_24 {top:31%;left:33%;} /* plains island */ 
.area_25 {top:50%;left:31%;} /* grass plain */
.area_26 {top:66%;left:26%;} /* lush shores */
.area_27 {top:45%;left:53%;} /* sea with 4 falls */
.area_28 {top:34%;left:59%;} /* rich grassy hills */
.area_29 {top:39%;left:69%;} /* jungle hills */
.area_30...

JavaScript

var explorePoints = 20;
var exploreLevel = 3;

$('.map_region').mouseover(function(){
    var region = $(this).data('region');
    var name = $(this).data('name');
    $('.map_highlight').fadeOut(200);
    $('.map_highlight_'+region).fadeIn(200);
    $('#info').html('Region <b>'+name+'</b> is highlighted. Click for a closer look.');
}).mouseout(function(){
    var region = $(this).data('region');
    $('.map_highlight_'+region).fadeOut(200);
});

$('.map_region').click(function(){
    var region = $(this).data('region');
    $('.map_region_lookup').hide();
    $('.map_region_lookup_'+region).show();
});

$('.area_icon').click(function(){
    var area = $(this).data('area');
    var level = $(this).data('level');
    $('.area_info').hide();
    $('.area_info_'+area).show();
    
    if(level > exploreLevel){ 
        $('.area_info_btn').html('Sorry, captain. This area is too dangerous or hard to reach.<br>You need a higher reputation (<b>level '+level+'</b>) to convince exploration teams to go there for you!');
    }else{
        if(explorePoints > 0){
            $('.area_info_btn').html("Want to send an exploration team in here?<br><button class='explore_area_btn' data-area='"+area+"'>Yes, search!</button>");
        }else{
            $('.area_info_btn').html('You have used up all your Explore Funds today.<br>Come back tomorrow to explore this area!');
        }
    }
});