image map using svg

by elizabethkmathew

HTML

<div class="wrapper">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="398px" height="561px" viewBox="0 0 398 561" version="1.1">
    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
    <title>Group 3</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <path d="M11.883639,74.116102 C7.28176736,71.1251874 3.26720808,67.3250198 0.0452940122,62.9179124 L0.0452940122,10.6637203 C3.06338503,6.53743576 6.77749403,2.94109119 11.0155038,0.0437842118 L62.2037768,0.0437842118 C66.8977462,3.25060028 70.9455211,7.31498297 74.1176118,12.0074426 L74.1176118,61.5756998 C70.7522667,66.5550216 66.3980023,70.8247371 61.3371513,74.116102 L11.883639,74.116102 Z" id="path-1"/>
        <path d="M46.18944,0 C71.6994324,0 92.37888,20.6813829 92.37888,46.1909674 C92.37888,71.700552 71.6994324,92.37888 46.18944,92.37888 C20.6794476,92.37888 0,71.700552 0,46.1909674 C0,20.6813829 20.6794476,0 46.18944,0 Z" id="path-3"/>
    </defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Group-3" transform="translate(-157.000000, -3.000000)">
            <g id="Diagram">
                <polyline id="path14" fill="#E8E8E8" fill-rule="nonzero" transform="translate(354.568320, 94.279680) scale(-1, 1) rotate(-180.000000) translate(-354.568320, -94.279680) " points="314.08128 56.0736 395.05536 56.0736 395.05536 132.48576 314.08128 132.48576 314.08128 56.0736"/>
                <path d="M554.72256,365.143756 C554.72256,474.740014 465.874999,563.5872 356.278279,563.5872 C246.681559,563.5872 157.83552,474.740014 157.83552,365.143756 C157.83552,255.545976 246.681559,166.70016 356.278279,166.70016 C465.874999,166.70016 554.72256,255.545976 554.72256,365.143756" id="path26" fill="#FFFFFF" fill-rule="nonzero" transform="translate(356.279040, 365.143680) scale(-1, 1) rotate(-180.000000) translate(-356.279040, -365.143680) "/>
                <path d="M196.895827,412.207387...

CSS

#path28,#path32,#path30 {
  cursor: pointer;
}
#path28:hover,#path32:hover,#path30:hover,#path32:hover {
  fill: #ff0000;
}
#path28:hover #path36 {
   stroke: #000;
   fill: #000;
}
.carousel-wrapper {
  display: none;
}
.wrapper {
  display: flex;
  flex-direction: row;
}
.slide-text {
  width: 50%;
}
#text120,#text128,#text98,#text106,#Icon-04,#path38 {
  pointer-events: none;
}

JavaScript

$("path").click(function() {
$('.carousel-wrapper').removeClass("slide-text").hide().filter('#' + $(this).attr('id')).addClass("slide-text").show();

});