another image map after onmouse over

[Kobby]

I am designing a Sharepoint page with script editor. I have an image which I have used area tag on. So with onmouseover another image pops up and it reverts back onmouseout. I further want to use another area tag on this new image onmouseover where I can add area tags on this new image. Something like a nested image map. For description sake. I will use script from w3schools. 

 

<img src="planets.gif" width="145" height="126" alt="Planets" name="myname"
usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" onmouseover=myname.src="C:\Users\Quabynar\Pictures\sun.gif" ; onmouseout=myname.src="C:\Users\Quabynar\Pictures\planets.gif">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

I expect to put another map with area tags on the sun.gif when onmouseover where I can use href to say a link about description the Sun. I don't seem to get around it.