JSFiddle - React, Tailwind, and code Playground

by Daniel Morton

HTML

<script src="http://www.phuketfr.com/js/jquery.jqtransform.js"></script>
<link rel="stylesheet" href="http://www.phuketfr.com/css/jqtransform.css">
<form>
<div id="map-view-container">
<div id="map-container">

    <img src='http://www.phuketfr.com/img/map/transparentMap.gif' width='120' height='220' border='0' alt='' usemap='#regionMapView' class='map' />

        <map name="regionMapView"  id="regionMapView">
<area alt="Bang Tao" href="#ban" id="ban" coords="25,100,20" shape="circle">
            <area alt="Chalong" href="#cha" id="cha" coords="59,187,22" shape="circle">
            <area alt="East" href="#eas" id="eas" coords="71,-1,121,138" shape="rect">
            <area alt="Kamala" href="#kam" id="kam" coords="17,127,16" shape="circle">
            <area alt="Karon" href="#kar" id="kar" coords="22,182,14" shape="circle">
            <area alt="Kata" href="#kat" id="kat" coords="29,196,12" shape="circle">
            <area alt="Kathu" href="#kth" id="kth" coords="53,140,20" shape="circle">
            <area alt="Nai Narn" href="#nai" id="nai" coords="32,213,15" shape="circle">
            <area alt="Talang" href="#tal" id="tal" coords="57,93,20" shape="circle">
            <area alt="North" href="#nor" id="nor" coords="0,0,70,85" shape="rect">
            <area alt="Patong" href="#pat" id="pat" coords="20,154,21" shape="circle">
            <area alt="Phuket City" href="#phu" id="phu" coords="88,173,32" shape="circle">
            <area alt="Rawai" href="#rai" id="raw" coords="58,230,32" shape="circle">
        </map>



    <img width="120" height="220" alt="" src="http://www.phuketfr.com/img/map/phuket-phu-active.png" class="region phu-map ">
    <img width="120" height="220" alt="" src="http://www.phuketfr.com/img/map/phuket-cha-active.png" class="region cha-map ">
    <img width="120" height="220" alt="" src="http://www.phuketfr.com/img/map/phuket-pat-active.png" class="region pat-map ">
    <img width="120" height="220" alt=""...

CSS

.clearboth {clear: both;}
    #map-view-container {position: relative;}
    #map-container {float: left;}
    #map-view-container img.map {position: relative; z-index: 100;}
    #map-view-container img.regionBg {left: 0px; position: absolute;    top: 0px; z-index: 19;}
    #map-view-container img.region {display: none;    left: 0px;    position: absolute;    top: 0px;    z-index: 20;}
    #locmap label { display: inline; cursor:pointer;}
    #regionMapView {z-index:400;}
    
    #locmap label {}
    
    #map-view-container img.selected {display:inline; }
    #map-view-container img.unselected {display:none; }
    #locmap a.jqTransformCheckbox {}

    .jqTransformHidden {display:inline;}

JavaScript

jQuery(document).ready(function() {

jQuery("#map-container AREA, #locmap .jqTransformCheckboxWrapper, #locmap .jqTransformCheckbox").mouseenter(function(){
            var hover = '.'+$(this).attr('id')+'-map-hover';
            var tickbox2 = '.'+$(this).attr('id')+'-link';
            
            jQuery(hover).addClass('selected'); // img hover
            jQuery(tickbox2).addClass('jqTransformHover') // checkbox
            
        }).mouseleave(function(){

            var hover = '.'+$(this).attr('id')+'-map-hover';
            var tickbox2 = '.'+$(this).attr('id')+'-link';
            
                jQuery(hover).removeClass('selected');
                jQuery(tickbox2).removeClass('jqTransformHover');
        });

        jQuery("#map-container AREA, #locmap .map-checkbox, #locmap .jqTransformCheckbox").click(function(){

            var Mselect = '.'+$(this).attr('id')+'-map'; // img select
            //var tickbox = '.'+$(this).attr('id')+'-check';  // input selectbox
            var tickbox2 = '.'+$(this).attr('id')+'-link'; // a. tickbox

            if (jQuery(Mselect).hasClass('selected')) { //remove on click ?
                jQuery(Mselect).removeClass('selected');
            //    jQuery(tickbox).removeAttr('checked','checked');
                jQuery(tickbox2).removeClass('jqTransformChecked').removeAttr('checked','checked');
            }
            else {
                jQuery(Mselect).addClass('selected');
            //    jQuery(tickbox).attr('checked','checked') // checkbox
                jQuery(tickbox2).addClass('jqTransformChecked').attr('checked','checked') // tickbox
            }

        });
        
});

   

// form styling 

 $(function(){
     $('form').jqTransform({imgPath:'img/'});
 });