How do I make part of an img clickable, and then part of the NEXT one clickable too (the click changes the img), all without reloading the page?

Question

I learned how to make something clickable using coordinates (see JSFiddle). And I have been told how to replace the image after clicking a certain part of it.

HTML:

<img src="http://www.w3schools.com/tags/planets.gif" id="yellow" width="145" height="126" alt="Planets" usemap="#planetmap"/>

<map name="planetmap">
    <area class="yellow" shape="rect" coords="0,0,82,126" href="" />
    <area shape="circle" coords="90,58,3" href="" />
    <area shape="circle" coords="124,58,8" href="" />
</map>

JavaScript:

$(".yellow").on("click", function(e) {
  e.preventDefault();
  document.getElementById("yellow").src="https://www.americasfinestlabels.com/includes/work/image_cache/30c33cf1a4b56c772fe883096b782da4.thumb.jpg";
});

My issue now is that I want the new image (say, the red example in JSFiddle) to have its OWN clickable areas, separate from the first image. And I want those clicks to go somewhere else I define, (say, for the right half to go to a blue image).

Clearly, I have a base structure, but I want to use this with multiple images and multiple click points. At no point should the page reload while changing images.

Is this even possible? Can anyone point me in the right direction?