trying to create multiple rollover image links in my sidebar

Hello all. My site is https://www.megandowntherabbithole.com and I’m trying to create rollover image links in the sidebar of my webpage, but only the first one is working.

Here’s the code for the working one (button #1):

<div style="text-align:center; width:155px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_1201111021648311" src="https://www.megandowntherabbithole.com/wp-content/uploads/2011/11/portfolio-e1320265724487.jpg" usemap="#Image-Maps_1201111021648311" border="0" width="155" height="120" alt="" />
<map id="_Image-Maps_1201111021648311" name="Image-Maps_1201111021648311">
<area shape="rect" coords="28,12,128,100" href="https://www.megandowntherabbithole.com" alt="portfolio" title="portfolio" onMouseOver="if(document.images) document.getElementById('Image-Maps_1201111021648311').src= 'https://www.megandowntherabbithole.com/wp-content/uploads/2011/11/portfolio-rollover-e1320265796480.jpg';" onMouseOut="if(document.images) document.getElementById('Image-Maps_1201111021648311').src= 'https://www.megandowntherabbithole.com/wp-content/uploads/2011/11/portfolio-e1320265724487.jpg';"  />
</map>
</div>

And here is the code for non-working button #2

<div style="text-align:center; width:155px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_1201111021648311" src="https://www.megandowntherabbithole.com/wp-content/uploads/2011/11/blog-e1320265849122.jpg" usemap="#Image-Maps_1201111021648311" border="0" width="155" height="120" alt="blog" />
<map id="_Image-Maps_1201111021648311" name="Image-Maps_1201111021648311">
<area shape="rect" coords="27,7,129,107" href="https://www.megandowntherabbithole.com/blog" alt="blog" onMouseOver="if(document.images) document.getElementById('Image-Maps_1201111021648311').src= 'https://www.megandowntherabbithole.com/wp-content/uploads/2011/11/blog-rollover-e1320265609172.jpg';" onMouseOut="if(document.images) document.getElementById('Image-Maps_1201111021648311').src= 'https://www.megandowntherabbithole.com/wp-content/uploads/2011/11/blog-e1320265849122.jpg';"  />
</map>
</div>

Here’s the code for non-working button #3

<div style="text-align:center; width:155px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_1201111021648311" src="https://www.megandowntherabbithole.com/wp-content/uploads/2011/11/purchase-e1320265654607.jpg" usemap="#Image-Maps_1201111021648311" border="0" width="155" height="120" alt="purchase" />
<map id="_Image-Maps_1201111021648311" name="Image-Maps_1201111021648311">
<area shape="rect" coords="23,7,132,109" href="https://www.megandowntherabbithole.com/purchase/" alt="purchase" onMouseOver="if(document.images) document.getElementById('Image-Maps_1201111021648311').src= 'https://www.megandowntherabbithole.com/wp-content/uploads/2011/11/purchase-rollover-e1320267583728.jpg';" onMouseOut="if(document.images) document.getElementById('Image-Maps_1201111021648311').src= 'https://www.megandowntherabbithole.com/wp-content/uploads/2011/11/purchase-e1320265654607.jpg';"  />
</map>
</div>

And finally, the code for non-workin button #4

<div style="text-align:center; width:155px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_1201111021648311" src="https://www.megandowntherabbithole.com/wp-content/uploads/2011/11/contact-e1320265766172.jpg" usemap="#Image-Maps_1201111021648311" border="0" width="155" height="120" alt="contact" />
<map id="_Image-Maps_1201111021648311" name="Image-Maps_1201111021648311">
<area shape="rect" coords="24,2,127,109" href="https://www.megandowntherabbithole.com/contact-2/" alt="contact" onMouseOver="if(document.images) document.getElementById('Image-Maps_1201111021648311').src= 'https://www.megandowntherabbithole.com/wp-content/uploads/2011/11/contact-rollover-e1320265818388.jpg';" onMouseOut="if(document.images) document.getElementById('Image-Maps_1201111021648311').src= 'https://www.megandowntherabbithole.com/wp-content/uploads/2011/11/contact-e1320265766172.jpg';"  />
</map>
</div>

I’ve checked out a couple of online tutorials, and I understand that I need to do something different for multiple rollover images, but I’m confused. A lot of the tutorials talk about entering stuff into your page html, but I’m using the text widget to enter my code. Any advice you can give me is much appreciated.

Thanks in advance!