|
|
|
|
|
|
| |
The code below will give an idea about how to add cool tool tips.
| <html>
<head>
<style type="text/css">
div#helpbox
{
border: 2px solid #C9C299;
background: #FAF8CC; position: absolute;
display: none; font-size: smaller; padding: 2px;
}
</style>
<script type="text/javascript">
var helptexts = [
//helptextid4 - Interview Questions
'Interview Questions for OOPs, <br>PHP, And more...',
//helptextid5 - Articles
'<b>Simplest and Easiest</b> Articles for .Net'
];
function showbox(e) {
if (!e)
var e = window.event;
var linkID = e.srcElement? e.srcElement.id : this.id;
var helpbox = document.getElementById('helpbox');
helpbox.innerHTML = '<b>Click here...</b><br>' + helptexts[linkID.substr(10) - 1];
helpbox.style.display = 'block';
var posx = (typeof e.pageX!= 'undefined')? e.pageX : e.clientX + (document.documentElement? document.documentElement.scrollLeft
: document.body.scrollLeft);
var posy = (typeof e.pageY!= 'undefined')? e.pageY
: e.clientY + (document.documentElement? document.documentElement.scrollTop
: document.body.scrollTop);
<!-- set x-axis and y-axis position for displaying helpbox/tipbox here -->
helpbox.style.top = posy - 20 + 'px';
helpbox.style.left = posx + 10 + 'px';
}
<!-- code for hidding helpbox -->
function hidebox() {
document.getElementById('helpbox').style.display = 'none';
}
<!-- Code for Initializing helpbox [Attaching Mouseover, Mouseout event for helpbox] -->
function init() {
var hrefs = document.getElementsByTagName('a');
for (var i = 0; i < hrefs.length; i++) {
if (hrefs[i].id.substr(0,10) == 'helptextid') {
if (hrefs[i].attachEvent)
{
hrefs[i].attachEvent('onmouseover', showbox);
hrefs[i].attachEvent('onmouseout', hidebox);
}
else if(hrefs[i].addEventListener)
{
hrefs[i].addEventListener('mouseover', showbox, false);
hrefs[i].addEventListener('mouseout', hidebox, false);
}
}
}
}
</script>
</head>
<body>
<table cellspacing=10>
<tr>
<td><a href="#" id="helptextid1">WeberDev</a></td>
</tr>
<tr>
<td><a href="http://www.techxcel.com" id="helptextid2">Articles</a></td>
</tr>
</table>
<div id="helpbox"></div>
<script type="text/javascript">
init();
</script>
</body>
</html> | |
|
|
| Apply Wave effect to Text using Javascript
Categories : Java Script, HTML, Web Design | | | Higly Customizable Javascript Calendar Script
Categories : Java Script, Calendar, Date Time, HTML, CSS | | | showing Help (assistance) to the user while filling html forms.
Categories : HTML, Java Script, Form Processing | | | Java Script Based Navigation
Categories : HTML, Java Script, Navigation | | | Clock at Status Bar
Categories : Java Script, HTML, Date Time | | | How to create <SELECT> menues that change on the fly according to other <SELECT> menues on the page?
Categories : Java Script, HTML | | | Simple Javascript CSS Digital Clock
Categories : Java Script, Date Time, CSS, Beginner Guides, Web Design | | | Prevent Right Mouse steal your graphics
Categories : HTML, Java Script, Security | | | How to get the Focus (Cursor) into a Form-Element.
Categories : HTML, Java Script | | | Bookmarklets are simple tools that extend the surf and
search capabilities of Netscape and Explorer web browsers.
Categories : Java Script, HTML, General | | | Form Processing : with alert Highlight field name which is not filled by user
Categories : Java Script, Form Processing, Data Validation, Beginner Guides, Web Design | | | Unobtrusive javascript for maintaining scrollable layer state
Categories : DHTML, Java Script, HTML | | | Enchancing dd/mm/yyyy forms with unobtrusive javascript
Categories : Java Script, HTML, User Interface, Date Time | | | Mordern Peroidic Table - Science
Categories : Java Script, HTML, Charts and Graphs | | | Builds JavaScript that updates the contents of one selector based on another.
Categories : HTML, Java Script, PHP, Complete Programs, General | |
|
|
|
