It's rather easy to use mootools framework power in your Joomla! system. In this article we will describe how to add hints to abbreviations and acronyms on your page. This will help highlight and mark out appropriate words.
First of all to enable mootools hints effect go to Extensions->Template Manager in the administration, select the template and click “Edit”, then click “Edit HTML”. Before the closing “</head>” tag add the following strings: <script type="text/javascript">
window.addEvent( "domready" , function( ){ var acronymHint = new Tips( $$( "acronym" ) );
var abbreviationHint = new Tips( $$( "abbr" ) );
}); </script>
This will add mouseover hint for every <acronym> and <abbr> tag you will use in your article. Then create an article, press HTML button in your editor to switch to code view. Find the word you would like to mark out, say this is 'AJAX' word. Change 'AJAX' to '<acronym title="Asynchronous JavaScript and XML">AJAX</acronym>' That's all! Save your article and verify that the work 'AJAX' has pretty mouse over hint. Example: AJAX You can add hints using your <abbr> tags in the similar way. More than this you can customize your hints for the article. Let us make every element has beautiful tooltip with nice opacity effect. Here is an example: ARI Soft Please see the code below how to do this: var testHint = new Tips($$(".testHint"), {
initialize:function(){
this.fx = new Fx.Style(this.toolTip, "opacity", {duration: 500, wait: false}).set(0);
},
onShow: function(toolTip) {
this.fx.start(1);
},
onHide: function(toolTip) {
this.fx.start(0);
}
}); Joomla Tip of the day articles.
(c) 2008 ARI Soft. This article or quotations from it may be used only by ARI Soft approbation.
|