Adding Image Map to Pilcrow Header

  • Unknown's avatar
    connoragriffin · Member ·

    Hi there,

    I just purchased the CSS Custom Design feature and am trying to figure out what coding I need to put into the CSS Customizer in order to make my header an image map I have created. Here is the HTML coding for the image map:

    <div style=”text-align:center; width:1114px; margin-left:auto; margin-right:auto;”>
    ””
    <map id=”_Image-Maps_2201310241127081″ name=”Image-Maps_2201310241127081″>
    <area shape=”rect” coords=”0,76,266,358″ href=”http://wanna-bewriter.com/about/” alt=”” title=”” />
    <area shape=”rect” coords=”278,77,544,373″ href=”http://wanna-bewriter.com/category/words-on-writing/” alt=”” title=”” />
    <area shape=”rect” coords=”566,75,832,371″ href=”http://wanna-bewriter.com/category/mountain-division/” alt=”” title=”” />
    <area shape=”rect” coords=”843,76,1109,372″ href=”http://www.wanna-bewriter.com/category/miscellaneous-musings/” alt=”” title=”” />
    <area shape=”rect” coords=”269,385,332,449″ href=”https://www.facebook.com/connor.griffin.5″ alt=”” title=”” />
    <area shape=”rect” coords=”371,387,434,451″ href=”https://twitter.com/connoragriffin” alt=”” title=”” />
    <area shape=”rect” coords=”476,386,539,450″ href=”https://plus.google.com/u/0/104381226532869749356/posts” alt=”” title=”” />
    <area shape=”rect” coords=”576,388,639,452″ href=”http://instagram.com/connoragriffin” alt=”” title=”” />
    <area shape=”rect” coords=”675,388,738,452″ href=”http://www.pinterest.com/connoragriffin/boards/” alt=”” title=”” />
    <area shape=”rect” coords=”775,388,838,452″ href=”mailto:connor.griffin91%40gmail.com” alt=”” title=”” />
    <area shape=”rect” coords=”229,0,886,64″ href=”http://www.wanna-bewriter.com” alt=”” title=”” />
    <area shape=”rect” coords=”1112,455,1114,457″ href=”http://www.image-maps.com/index.php?aff=mapped_users_2201310241127081″ alt=”Image Map” title=”Image Map” />
    </map>
    <!– Image map text links – Start – If you do not wish to have text links under your image map, you can move or delete this DIV –>
    <div style=”text-align:center; font-size:12px; font-family:verdana; margin-left:auto; margin-right:auto; width:1114px;”>
    Untitled
    | Untitled
    | Untitled
    | Untitled
    | Untitled
    | Untitled
    | Untitled
    | Untitled
    | Untitled
    | Untitled
    | Untitled
    | Image Map
    </div>

    What do I need to add to this in order for this image map to become my “interactive header”? Any help would be appreciated.
    -C

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, what you will have to do is to place the image map code into a text widget and then reposition the text widget up and into the header area using CSS. If you get the code into a text widget, we can help with the positioning. One thing to note though is that with a responsive width theme, such as you are using, this can be quite tricky since the header shrinks as the page narrows, and getting that top happen correctly, and keeping the image mapped areas correctly aligned can get complex.

  • The topic ‘Adding Image Map to Pilcrow Header’ is closed to new replies.