As seen previously, one possible improvement for the script is to replace the "onmouseover" event handler with "onmousemove," and achieving the "chasing" note effect. It’s up to you decide how the notes will be displayed.
<html>
<head>
<title>MULTIPLE POP-UP NOTES</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="javascript">
createNotes=function(){
showNote=function(){
// gets corresponding note element id
var id=this.id.replace(/a/,'note');
note=document.getElementById(id);
// assigns X,Y mouse coordinates to note element
note.style.left=event.clientX;
note.style.top=event.clientY;
// makes note element visible
note.style.visibility='visible';
}
hideNote=function(){
// gets corresponding id for note element
var id=this.id.replace(/a/,'note');
note=document.getElementById(id);
// hides note element
note.style.visibility='hidden';
}
// gets all <a> elements
as=document.getElementsByTagName('a');
// iterates over all <a> elements
for(i=0;i<as.length;i++){
// assigns mouse event handlers to <a> elements with class name "special"
if(/\bspecial\b/.test(as[i].className)){
// shows note element when mouse is over
as[i].onmousemove=showNote;
// hides note element when mouse is out
as[i].onmouseout=hideNote;
}
}
}
// execute code once page is loaded
window.onload=createNotes;
</script>
<style type="text/css">
p {
font: normal 11px "Verdana", Arial, Helvetica, sans-serif;
color: #000;
}
a.special:link,a.special:visited {
font: bold 11px "Verdana", Arial, Helvetica, sans-serif;
color: #00f;
text-decoration: underline;
}
a.special:hover {
color: #f00;
}
.note {
position: absolute;
top: 0px;
left: 0px;
background: #ffc;
padding: 10px;
border: 1px solid #000;
z-index: 1;
visibility: hidden;
font: bold 11px "Verdana", Arial, Helvetica, sans-serif;
color: #000;
}
</style>
</head>
<body>
<p>For web development, <a href="#" id="a1" class="special">PHP</a> is just great.</p>
<div id="note1" class="note">PHP: PHP Hypertext Preprocessor</div>
<p><a href="#" id="a2" class="special">SQL</a> is the standard language for querying databases.</p>
<div id="note2" class="note">SQL: Structured Query Language</div>
<p>In fact <a href="#" id="a3" class="special">DHTML</a>, is a fusion of HTML and client-side programming.</p>
<div id="note3" class="note">DHTML: Dynamic Hypertext Markup Language</div>
</body>
</html>
And that’s it. We now have a script that works the way we want.
JavaScript 
/ 25 
Creating Pop-Up Notes with CSS and JavaScript Part I
