Tooltips are small boxes that appear when you roll over an icon or text that contains a brief text message identifying the object. Below are examples.
Roll over your mouse on the text.
Rollover me!
This is an image that shows tooltip.
With Nate's Nicer Titles, you can easily customize the default tooltips on your blog. His version of tooltip is pretty nice to look at. Moreover, this is by far, the easiest to install in blogger.
How It Works.
Hide Sidenotes
Nate's Nicer Titles are automatically shown in all HTML elements that have TITLE attributes. These TITLE attributes can be applied to links, images and other kinds of elements.
Example code:
<a href='http://technicaldotcom.blogspot.com/' title='Home: The Technical Thought Of You'><img alt='home' height='64' src='http://lh5.ggpht.com/techniquealtechie/SMwVx4qtIwI/AAAAAAAAASg/K7uXHWd-ER0/cssdockmenublack-home3.jpg' width='64'/></a>
Result:
What's great about Nate's Nicer Titles, it also works on image maps!
Example code:
<img border="0" usemap="#imap_35" alt="subscribe" width="223" src="http://lh4.ggpht.com/techniquealtechie/SMaR8GEFL_I/AAAAAAAAALc/NSL311-zAD8/subscribe7.jpg" height="160"/>
<map id="imap_35" name="imap_35">
<area shape="rect" coords="141,34,219,100" alt="Subscribe to RSS" href="http://feeds.feedburner.com/technicaldotcom" target="_blank" title="Subscribe to RSS"/>
</map>
Result:
How To Add Nicer Titles in Blogger.
Part One.
(1) DOWNLOAD this zipped file (right click and choose "Save As")
(2) uncompress or unzip.
(3) upload "nicetitle.js" and "nicetitle.css" to your site (e.g. Google Pages if you have one).
Part Two.
NOTE: BACKUP YOUR TEMPLATE!
(1) Go to Layout. Edit HTML.
(2) Before the closing tag of
</head>
insert the following code:
<src="http://yourgooglepageusername.googlepages.com/nicetitle.js" type='text/javascript'></script>
<link rel="stylesheet" href="http://yourgooglepageusername.googlepages.com/nicetitle.css">
(3) Save template.
(4) Create a new post.
(5) To use the customized tooltip on texts, type a text link.
Example:
<a href="URL here" title="put your tooltip message here">Read Me!</a>
(6) To use the customized tooltip on images, insert an image link.
Example:
<a href="URL here" title="put your tooltip message here"><img src="URL of the image here"></a>
(7) Publish Post.
(8) View Blog.
How To Make Nice Titles Work On Image Maps.
If you would like to make it work on image maps just like how it worked on my SUBSCRIBE section, we just need to make a little tweak.
(1) make a backup copy of "nicetitles.js". keep it somewhere safe. ^_^
(2) open the original "nicetitles.js" in notepad or textpad.
(3) before this code:
addEvent(window, "load", NiceTitles.autoCreation);
insert this line of script:
function niceTitlesOnAreaElements(){
var niceTitle = new NiceTitles("<p class=\"titletext\">attr(nicetitle)? <span class=\"accesskey\">[attr(accesskey)]</span>?</p><p class=\"destination\">attr(href)</p>", 600);
niceTitle.addElements(document.getElementsByTagName("area"), "title");
}
addEvent(window, "load", niceTitlesOnAreaElements);
(4) Save.
(5) Upload the edited "nicetitles.js" to your site.
To learn more on how to create image maps, kindly check out my post:
Image Mapping and Online Image Mappers
Enjoy tweaking!
Resources:
http://neo.dzygn.com/archive/2003/12/nicer-titles
http://neo.dzygn.com/downloads/code/nicetitle.zip
http://www.web-graphics.com/mtarchive/000778.php#chatty001219
http://htmlhelp.com/reference/html40/attrs.html
http://www.kryogenix.org/code/browser/nicetitle/
http://htmlescape.compender.com/2008/01/raymonds-html-escaper.html
Digg this! | Save to del.ico.us | Save to technorati | Stumble it! | Print
