I'm trying to insert Image Mapper html into a wordpress sidebar. I uploaded the jpg and the html to my server, both in the same folder, and the image is broken. I'm using a text widget that is supposed to be able to use html. Here's the html code:

<!-- Beginning of Client Side Image Map -->
<img src="GG Sidebar Collage.jpg" USEMAP="#Popular Posts" BORDER=0>
<map name="Popular Posts">
<area name="Extraordinary Blackberry Ice Cream" shape="rect" coords="3,2,86,78" href="http://wp.me/p3ehn2-dz" alt="Extraordinary Blackberry Ice Cream" title="Extraordinary Blackberry Ice Cream" OnMouseOver="window.status='Extraordinary Blackberry Ice Cream'; return true" OnMouseOut="window.status=''; return true">
<area name="3 Recipes for Shrimp Scampi" shape="rect" coords="93,2,176,76" href="http://wp.me/p3ehn2-nZ" alt="3 Recipes for Shrimp Scampi" title="3 Recipes for Shrimp Scampi" OnMouseOver="window.status='3 Recipes for Shrimp Scampi'; return true" OnMouseOut="window.status=''; return true">
<area name="Rigatoni alla Vodka" shape="rect" coords="3,81,87,154" href="http://wp.me/p3ehn2-pV" alt="Rigatoni alla Vodka" title="Rigatoni alla Vodka" OnMouseOver="window.status='Rigatoni alla Vodka'; return true" OnMouseOut="window.status=''; return true">
<area name="Best Ever Peanut Butter Sheet Cake" shape="rect" coords="90,80,177,154" href="http://wp.me/p3ehn2-7I" alt="Best Ever Peanut Butter Sheet Cake" title="Best Ever Peanut Butter Sheet Cake" OnMouseOver="window.status='Best Ever Peanut Butter Sheet Cake'; return true" OnMouseOut="window.status=''; return true">
<area name="Peach Crumble Pie" shape="rect" coords="2,158,86,237" href="http://wp.me/p3ehn2-mA" alt="Peach Crumble Pie" title="Peach Crumble Pie" OnMouseOver="window.status='Peach Crumble Pie'; return true" OnMouseOut="window.status=''; return true">
<area name="Tomato Cobbler with Cheese Bistuit Topping" shape="rect" coords="92,159,178,236" href="http://wp.me/p3ehn2-p6" alt="Tomato Cobbler with Cheese Biscuit Topping" title="Tomato Cobbler with Cheese Biscuit Topping" OnMouseOver="window.status='Tomato Cobbler with Cheese Biscuit Topping'; return true" OnMouseOut="window.status=''; return true">
<area shape="default" href="http://www.granniegeek.com" target="Page Default (None)">
</map>
<!-- End of Client Side Image Map -->

I've tried rewriting the img src to point to the jpg in the server's folder so there's an updated image address and that didn't work::

<img src="/www.granniegeek.com/Image Maps/GG Sidebar Collage.jpg" USEMAP="#Popular Posts" BORDER=0>

Can you please help me with this problem?

Thanks!

Try this.