JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wizard">
    <h3>Step </h3>
    <div id="wizardcontentwrap">
    <div id="wizardcontent"> </div>
    </div>
    <div class="buttons">
      <button type="submit" id="previous"> <img src="images/arrow_left.png" alt=""/> Back </button>
      <button type="submit" id="next"> Next <img src="images/arrow_right.png" alt="" /> </button>
    </div>
    <ul id="mainNav" class="fiveStep">
      <li><a title=""><em>1: This is where to start</em><span>Do cool stuff</span></a></li>
      <li><a title=""><em>2: Now we're moving</em><span>Do some more cool stuff</span></a></li>
      <li><a title=""><em>3: Fun Fun Fun</em><span>Wow, 3 steps of cool!</span></a></li>
      <li><a title=""><em>4: Almost There!</em><span>This is getting ridiculous</span></a></li>
      <li class="mainNavNoBg"><a title=""><em>Step 5: The Finale</em> <span>Yeah!</span></a></li>
    </ul>
    <div style="clear:both"></div>
  </div>
  <!-- Place markup for wizard content for each step below -->
<span class="wizardcontent" id="step_1">
    <h2>Step 2: Select your height</h2>    
    <div class="map-container-1">
        <img id="short" src="http://i.imgur.com/riX99.png" rel="1" />
        <img id="normal" src="http://i.imgur.com/14s5P.png" rel="2" />
        <img id="tall" src="http://imgur.com/mfytM.png" rel="3" />
        <img id="blank1"  src="http://web-scholar.com/stackoverflow/images/blank.gif" usemap="#height" />
    </div>

    <map name="height">
       <area shape="poly" coords="76,165,70,187,74,203,45,217,51,317,69,331,59,444,125,444,123,316,147,315,137,237,134,209,110,196,110,171,77,166" href="#" alt="short" />
        <area shape="poly" coords="292,103,288,123,287,145,261,162,255,229,257,277,269,304,279,311,284,395,244,415,244,442,391,443,378,417,346,392,344,315,353,298,379,294,369,223,367,165,332,144,331,120,317,104,294,103,294,104" href="#" alt="normal" />
        <area shape="poly"...

CSS

* {
margin:0;
padding:0;
}

body {
font:13px arial,helvetica,clean,sans-serif;
}

#mainNav li a em,h4 {
font-size:114%;
}

#mainNav {
clear:both;
}

#mainNav li {
height:71px;
list-style:none;
float:left;
background-color:#EBEBEB;
background-image:url(images/navBtn.gif);
background-repeat:no-repeat;
background-position:right top;
}

#mainNav li.current {
background-color:#C36615;
background-image:url(images/navCurrentBtn.gif);
}

#mainNav li.lastDone {
background-color:#7C8437;
background-image:url(images/navLastDoneBtn.gif);
}

#mainNav li.done {
background-color:#7C8437;
background-image:url(images/navDoneBtn.gif);
}

#mainNav li a,#mainNav li a:link,#mainNav li a:visited,#mainNav li a:hover,#mainNav li a:active {
color:#ccc;
}

#mainNav li.lastDone a,#mainNav li.lastDone a:link,#mainNav li.lastDone a:visited,#mainNav li.lastDone a:hover,#mainNav li.lastDone a:active,#mainNav li.current a,#mainNav li.current a:link,#mainNav li.current a:visited,#mainNav li.current a:hover,#mainNav li.current a:active,#mainNav li.done a,#mainNav li.done a:link,#mainNav li.done a:visited,#mainNav li.done a:hover,#mainNav li.done a:active {
color:#fff;
}

#mainNav li.done a:hover,#mainNav li.lastDone a:hover {
color:#FF9;
cursor:hand;
}

#mainNav li a em {
width:150px;
display:block;
font-style:normal;
font-weight:700;
margin:6px 0 0 10px;
}

#mainNav li a span {
width:140px;
display:block;
margin-left:10px;
font-weight:400;
}

#mainNav li.mainNavNoBg {
background-image:none;
}

#mainNav li a {
height:71px;
display:block;
}

#mainNav.fourStep li.mainNavNoBg {
width:229px;
}

#mainNav.threeStep li.mainNavNoBg {
width:304px;
}

#wizardpanel {
background-color:#F5F5F5;
display:none;
margin:5px;
}

#wizardcontentwrap {
height:300px;
}

#wizard {
width:920px;
}

.buttons {
clear:both;
margin:10px;
}

#next {
float:right;
}

#previous {
float:left;
}

.map-container-1 {
position:relative;
border:1px solid red;
width:671px;
height:440px;
z-index:1000;
}

.map-container-2...

JavaScript

$('area').hover(
    function(e){
        $('#'+ this.alt).addClass('hover');
    },
    function(e){
        $('#'+ this.alt).removeClass('hover');
    })
    .click(function(e){
        $('img.selected-region').removeClass('selected-region');
        $('#'+ this.alt).addClass('selected-region');
        
        $('#debug').append($("img.selected-region").attr('rel'));
        
    });



/*--
#    Name    : wizard.js
#    Author  : Jerod Santo
#    Contact : "moc.liamg@otnas.dorej".reverse
#    Date    : 2008 August  9
#    About   : Provides wizard-esque web page for forms or whatever
#                                To be used in conjunction with Cody Lindley's CSS Step Menu:
#                                http://codylindley.com/CSS/325/css-step-menu
#                             Insipered by a similar implementation at:
#                                http://worcesterwideweb.com/2007/06/04/jquery-wizard-plugin/
#--*/
$(document).ready(function(){

  // all content starts hidden
  $('.wizardcontent').hide();
    $('#wizardcontent').hide();
  // initialize the wizard state
  load_state(1);
  
  // loads new state based on button clicked
  $(':submit').click(function(){
        //reset the wizardcontent to hidden
        $('#wizardcontent').hide();
    var current_state = $('#wizard').attr('class');
    //we only want the number, converted to an int
    current_state = parseInt(current_state.replace(/(step_)/, ""));
        //figure out if 'next' or 'previous' was clicked and load appropriate state
    if ($(this).attr('id') == 'next'){ load_state(++current_state); }
    else if ($(this).attr('id') == 'previous'){ load_state(--current_state); }
  });
});

function load_state(current_state){
    //disable all buttons while loading the state
    $('#previous').attr("disabled","disabled");
    $('#next').attr("disabled","disabled")
  //load the content for this state into the wizard content div and fade in
  var content = $('#step_' + current_state).html();
 ...