If Isaac's jQuery info works for you, that's fine. Considering you have an image map, here's some simplified skeleton code:
Code:
<img id="navigation" src="first.gif" alt="FIRST" usemap="#map">
<map name="map">
<area shape="rect" coords="0,0,50,50" href="javascript:openLink(link1);" alt="link1">
<area shape="rect" coords="50,50,100,100" href="javascript:openLink(link2);" alt="link2">
<area shape="rect" coords="100,100,150,150" href="javascript:openLink(link3);" alt="link3">
</map>
<script>
function openLink (link) {
document.getElementbyId("navigation").animate(height:>enter small height<px, width:>enter small width<px);
window.open("www.example.com/"+link,"_self")
}
</script>
I may not be the best coder, but you may want to try that. There's probably bugs all through this, but if you can find the small mistakes you can fix them.
This code uses the .animate() function from jquery's libraries, so you will need to download the libraries for use: jquery.com .
If there's still confusion or there's a mistake (which I make a lot), again, please clarify. Good luck on your website.