JSFiddle - React, Tailwind, and code Playground

by Thomas Jackson

HTML

<img id="keyLinkImg" src="https://cdn11.bigcommerce.com/s-e2nupsxogj/images/stencil/1200x1200/products/5902/28360/apipg4qrj__98785.1623504003.jpg" usemap=#imgmap >
<map name="imgmap">
  <area shape="rect" coords="0,0,200,200" onmouseover="doSwitch('1')" onmouseout="doSwitch('0')" href="#">
  <area shape="rect" coords="200,0,400,200" onmouseover="doSwitch('2')" onmouseout="doSwitch('0')" href="#">
</map>

CSS

.hand {
  cursor: pointer;
}

JavaScript

function doSwitch(swImg) {
    var bkImg = ""
    switch (swImg) {
        case '0':
        	bkImg = "https://cdn11.bigcommerce.com/s-e2nupsxogj/images/stencil/1200x1200/products/5902/28360/apipg4qrj__98785.1623504003.jpg";
        	break;
        case '1':
        	bkImg = "https://thumbs.dreamstime.com/z/usa-hiker-woman-bryce-canyon-hiking-relaxing-looking-view-hike-wearing-backpack-summer-travel-national-park-221264168.jpg;"
        	break;
        case '2':
        bkImg = "https://secure.img1-fg.wfcdn.com/im/60557300/resize-h800%5Ecompr-r85/3767/37677290/%2527USA+Waving+Flag%2527+Graphic+Art+Print+on+Wrapped+Canvas.jpg";
        	break;
        default:
        	bkImg = "https://cdn11.bigcommerce.com/s-e2nupsxogj/images/stencil/1200x1200/products/5902/28360/apipg4qrj__98785.1623504003.jpg";
        	break;
    }
    //$('[id="keyLinkImg"]')
    $('[id="keyLinkImg"]').attr('src',bkImg);
}