Need help? Check out our Support site, then


Image map for my header

  1. Hello, I would like to map the email portion of my header to a mailto: link. I see people mentioning text widget, but how do I hide the widget from view? Can someone give me an example? I think my code would be

    <map name="header4">
    <area shape="rect" coords="406,10,736,77" href="mailto:[email redacted]" target="_blank" alt="Email HLA of Central Massachusetts">
    </map>

    But how do I get usemap="#header4" to be connected to my header which is (I think) at

    http://hearinglosscentralma.files.wordpress.com/2012/04/header4.jpg

    thank you, Margaret

    The blog I need help with is hearinglosscentralma.wordpress.com.

  2. well, I got the map code, but how do I 'attach' the usemap statement to the image. ?
    I upload the custom header, but I need to attach

    usemap="#imap_75"

    <map id="imap_75" name="imap_75" >
    <area shape="rect" coords="387,10,736,64" alt="Email HLA Central Mass" title="Email HLA Central Mass" href="mailto:[email redacted]">
    </map>

    thank you in advance...Margaret

  3. I have flagged this thread fo Staff help.

  4. That level of customization is a bit beyond what can be done on a WordPress.com blog.

  5. Thanks for answering macmanx - bookmarked.

  6. You're welcome!

  7. It looks like they were using a static front page and pasted the code into the page. That would work, but it would only function when viewing that page specifically.

  8. Okay, thanks. I was hopeful :) Margaret

  9. @Margaret: That thread is about mapped images in a post or a page, not in the header.
    However, macmanx's reply is not correct: what you're looking for would be possible if you had the Custom Design upgrade, and it's also possible in several themes without the upgrade. Would you consider switching to a different theme?

  10. yes, I am willing to change. but all seemed to have times New Roman and I try avoid that. Should I look for a theme that has...what feature? thanks, Margaret

  11. a) Times New Roman is very rare: you're either confusing the font with a different one, or you were looking at themes whose fonts aren't installed in your computer (that's also rare, because most themes use common fonts). See list here:
    http://wpbtips.wordpress.com/2010/09/07/theme-fonts/

    b) Apparently WP has changed something, so what I was thinking of is also possible in the theme you're using. Paste this code in a text widget:

    <div align="center" style="width:100%;top:0;left:0;position:absolute;z-index:11;">
    <a style="border:none;" href="mailto:EMAIL ADDRESS HERE">
    <div style="position:relative;top:135px;left:194px;width:284px;height:12px;">
</div></a>
    </div>

    This code will create an invisible linking rectangle in front of your header e-mail address.

    c) If you decide to change theme, this sort of code (with different numbers) will work well in the first two groups of themes listed here:
    http://wpbtips.wordpress.com/2009/12/15/position-absolute-pt-2/
    Combine it with the list in the following post, to exclude themes with no header image:
    http://wpbtips.wordpress.com/2009/03/24/header-images/

    In the same list you'll notice that many themes allow you to hide the regular blog title and tagline. So if I were you I would switch to one of those themes, create a new header image (with the logo, the tagline and all the rest), and take advantage of the hide-text option to avoid the redundancy you've got now.

  12. this worked! Thank you so much - I really appreciate it. And a good idea on 'hiding blog title.' I will play around with that.

    Thanks again - enjoy the weekend! Margaret

  13. You're welcome!

Topic Closed

This topic has been closed to new replies.

About this Topic