Aprendí cómo hacer que se pueda hacer clic en algo usando coordenadas ( ver JSFiddle ). Y me dijeron cómo reemplazar la imagen después de hacer clic en cierta parte de ella.

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"; });

Mi problema ahora es que quiero que la nueva imagen (digamos, el ejemplo rojo en JSFiddle) tenga sus PROPIAS áreas en las que se puede hacer clic, separadas de la primera imagen. Y quiero que esos clics vayan a otro lugar que yo defina (digamos, que la mitad derecha vaya a una imagen azul).

Claramente, tengo una estructura base, pero quiero usarla con múltiples imágenes y múltiples puntos de clic. En ningún momento se debe recargar la página mientras se cambian las imágenes.

¿Es esto posible? ¿Alguien puede señalarme en la dirección correcta?