Translate This Blog
Always Remember To Back Up Your Template Before Attempting Any Of The Tweaks On This Site

Do to error codes you should use the old interface when attempting many of these tweaks to your template

Hover Description forText, Links & Images

Sometimes when visitors are unfamiliar with your site they may need a little extra guidance in finding what they want.  With this tweak you can add a description or message to display when a user hovers over the item.

  • Adding Hover Description To Text:
    Example:
    Hover Over This Text

    Here is the HTML syntax.
    <span title="My Hover Description">Hover Over This Text</span>
    Orange it the description message to display when hovering.
    Red is the text that will display on site.


    • Adding Hover Description To Links
    Exmple:
    Hover Over This Link

    Here is the HTML syntax.
    <a href="URL" title="My Hover Description">Hover Over This Link</a>
    Blue text is the link URL.
    Orange text is the description message to display when hovering.
    Red text is the link text to display on site.

    • Adding Hover Description To Images:
    Example:

    Here is the HTML syntax.
    <span title="My Hover Description"><img src="DIRECT IMAGE URL" /></span>
    Orange is the description message to display while hovering.
    Green is the direct image URL.
    Labels: ,

    4 comments:

    1. should i paste this next to the word to which i want to add a description or before the word or how...please help the novice..

      ReplyDelete

    2. Hi I replaced the text with your code but the word comes in the next line and after there is a gap of one mor eline...how to eliminate this unwanted space

      ReplyDelete

    3. Sorry to inform you i tried many alterations of your code but everytime i replace the word with your tag the word for which i want the hovering text appears in the next line
      http://rockmine.blogspot.com/2011/02/beyond-beautiful-poem.html
      in this post i have a poem and for some words i want to include hovering text with meaning inside it...

      ReplyDelete

    4. Sorry about that I forgot how Blogger interprets div elements in a block form. In other words it will add a line break every time it renders a div tag. I have edited the tutorial to use span tags instead. This will eliminate the line break issue.

      ReplyDelete

    Subscribe to: Post Comments (Atom)
    Web Design Blogs PageRank