WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Image Map In Widget (3 posts)

  1. ZachKokoon
    Member
    Posted 1 year ago #

    I would like use an image map on the front page of the website I run. Currently there is a slideshow.

    My Website

    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.

  2. ZachKokoon
    Member
    Posted 1 year ago #

    I also realize I don't need to use a <div> container. The image and style load the same if I were to get rid of the <div> and place the "margin-left" style within <img>.

  3. ZachKokoon
    Member
    Posted 1 year ago #

    Fixed. While I wasn't able to figure it out within' a widget, I found a different work around that worked just as well.

Topic Closed

This topic has been closed to new replies.

About this Topic