JSFiddle - React, Tailwind, and code Playground

HTML

<fieldset>
    <label for="allCardsChk">All cards</label>
    <input type="radio" rel="allCards" id="allCardsChk" val="0" name="cards" checked="checked" />
    
    <label for="aCardChk">A card</label>
    <input type="radio" rel="aCard" id="aCardChk" val="0" name="cards" />
    
    <label for="kCardChk">K card</label>
    <input type="radio" rel="kCard" id="kCardChk" val="1" name="cards" />
    
    <label for="qCardChk">Q card</label>
    <input type="radio" rel="qCard" id="qCardChk" val="2" name="cards" />
    
    <label for="jCardChk">J card</label>
    <input type="radio" rel="jCard" id="jCardChk" val="3" name="cards" />
</fieldset >

<div id="allCards">
    <img src="http://www.ultra-fitmagazine.co.uk/wp-content/uploads/Deck-of-cards3.jpg" width="300" height="283" border="0" usemap="#Map" id="allCards" />
    <map name="Map" id="Map">
      <area class="aCard" shape="poly" coords="188,256,80,196,75,190,75,184,170,12,174,4,189,4,196,7,296,63,299,75,204,252,197,257" href="#" />
      <area class="kCard" shape="poly" coords="77,180,163,26,103,17,94,20,63,217,68,230,84,236,168,247,76,192,75,185" href="#" />
      <area class="qCard" shape="poly" coords="90,36,45,40,38,47,38,62,57,250,62,259,83,259,159,247,79,235,69,231,64,219,63,212,90,36" href="#" />
      <area class="jCard" shape="poly" coords="39,62,56,246,59,256,71,260,168,246,179,251,84,281,71,282,64,278,4,102,1,88,2,78,9,72" href="#" />
    </map>
</div>
<div id="aCard" class="singleCard" style="display: none">
    <img src="http://s2.hubimg.com/u/718457_f260.jpg" />
</div>

<div id="kCard" class="singleCard" style="display: none">
    <img src="http://i.istockimg.com/file_thumbview_approve/5106943/2/stock-illustration-5106943-king-card.jpg" />
</div>

<div id="qCard" class="singleCard" style="display: none">
    <img src="http://www.platinumplay.eu/images/stories/casino-cards/queen_of_spades.jpg">
</div>

<div id="jCard" class="singleCard" style="display: none">
    <img...

CSS

input[type=radio], label { display: block; float: left; }

label { margin: 0 10px 0 0; clear: both; }

JavaScript

$("#Map area")
    .click(function() {
        var $t = $(this),
            id = $t.attr("class");
        
        $("#allCards")
            .hide();
        
        $("#" + id)
            .show();
        
        $("#back")
            .show();
        
        $("#" + id + "Chk")
            .attr("checked", "checked");
        
        return false;
});

$("input[type=radio]")
    .bind("change", function() {
        var $t = $(this),
            id = $t.attr("rel");
        
        $("#allCards")
            .hide();
        
        $(".singleCard")
            .hide();
        
        $("#" + id)
            .show();
        
        $("#back")
            .show();
        
        if (id === "allCards") {
            $("#back")
                .hide();
        }
    });

$("#back")
    .click(function() {
        $("#allCards")
            .show();
        
        $(".singleCard")
            .hide();
        
        $("#allCardsChk").attr("checked", "checked");
        
        return false;
    });