I would like use an image map on the front page of the website I run. Currently there is a slideshow.
I am by no means a prolific coder or anything but I work in HTML/CSS with Magento and WP all day so this is starting to become incredibly frustrating for me.
What will happen is that I'll load my code into a widget intended for HTML into the "Home Featured" area of my theme widgets, the image will show up, however the map is not functional.
This is my code.
<div style="margin-left:30px"> <img src="http://www.kokoon.net/wp-content/uploads/2012/11/GiftGuide.jpg" alt="Holiday Gift Guide 2012!" width="850" height="567" usemap="#giftguide"> <map name="giftguide" id="giftguide"> <area shape="rect" coords="0,502,212,567" href="http://www.kokoonshop.net/index.php/the-online-shop/gift-guide-2012/fashionista.html" alt="For The Fasionista!"> <area shape="rect" coords="213,502,424,567" href="http://www.kokoonshop.net/index.php/the-online-shop/gift-guide-2012/the-freeze-baby.html" alt="For The Freeze Baby!"> <area shape="rect" coords="424,502,639,567" href="http://www.kokoonshop.net/index.php/the-online-shop/gift-guide-2012/girl-on-the-go.html" alt="For The Girl On The Go!"> <area shape="rect" coords="639,502,850,567" href="http://www.kokoonshop.net/index.php/the-online-shop/gift-certificates/purchase-gift-certificate.html#.ULaPyOOe8oA" alt="For The Indecisive!"> </map> </div>
I've tested my code in other websites and it works.
I'm beginning to wonder if there are conflicting elements on the page that are rendering the <map> useless or if the widget I'm using is voiding the code somewhere. When I load the code in and look at my website's source, the code will appear, so I know it's not being deleted.
Thoughts? I'm stumped.