How can I add an email link to my header image?

  • Resolved coffee_king

    (@coffee_king)


    13 years, 1 month ago

    Hi there
    I have my email address as a part of the image on my header image.
    Is there anyway I can make it so that when someone clicks on the email image in the header it opens the persons email client and automatically fills in my the email address where to send it?
    I believe this is called Mapping.

    I dont want it to do this all over the image header, just when you hover over the email address. The rest of the area I want to still revert to homepage when clicked.

    Thanks

    WordPress Theme TwentyEleven

Viewing 10 replies - 31 through 40 (of 40 total)

  • That’s great. Start by adding something like:

    #email-block {
    height: 12px;
    left: 665px;
    position: absolute;
    top: 4px;
    width: 196px;
}

    to the child’s style.css file.

    Thread Starter coffee_king

    (@coffee_king)

    Done, so that space is now not clickable right?

    Not yet…

    Now go back to header.php in the child theme and change:

    <div id="email-block"></div>

    to:

    <div id="email-block"><a href="mailto:[email protected]"><span>[email protected]</span></a></div>

    Bear in mind, there’s still some more CSS tweaking to do.

    Thread Starter coffee_king

    (@coffee_king)

    OK, done.
    Now I have a link up there (which would actually look quiet cool if it didnt cover the text on my image ??

    Next?

    We’re going to pull that text off the page next. add:

    #email-block a {
    display: block;
    height: 12px;
    width: 196px;
}
#email-block span {
    display: inline-block;
    left: -9999px;
    position: absolute;
    top: -9999px;
}
    Thread Starter coffee_king

    (@coffee_king)

    Done, and it works.
    Is that it or do I need to add anything else now to tidy up etc?
    Thanks for your help!

    Nope. That should be it.

    Thread Starter coffee_king

    (@coffee_king)

    Fantastic!
    Thanks Esmi

    Glad I could help. It was an interesting situation. ??

    Thread Starter coffee_king

    (@coffee_king)

    Sure was, I have a couple of other issues to address this weekend, but I’ll do some research first.
    Have a good one!

Viewing 10 replies - 31 through 40 (of 40 total)
  • The topic ‘How can I add an email link to my header image?’ is closed to new replies.