Creating Pop-up Notes with CSS and JavaScript Part II
A pop-up note contains information and can be made to appear when a visitor to your website moves the mouse over the appropriate area. In our second of two articles about pop-up notes, Alejandro Gervasio explains how to create multiple pop-up notes on a Web page using CSS and JavaScript.
As we can see, we’ve assigned an ID to each <a> element with class attribute "special" in the form "a1," "a2," "a3" and so on. Similarly, IDs for each <div> element containing pop-up notes have been assigned in the form "note1," "note2," "note3" and the like. Now the relationship between the links and the notes becomes very clear. Our next task is to define the script to make pop-up notes work properly, so let’s define the JavaScript code:
<script language="javascript">
createNotes=function(){
showNote=function(){ // gets corresponding id for note element 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].onmouseover=showNote; // hides note element when mouse is out as[i].onmouseout=hideNote; } } }
// execute code once page is loaded window.onload=createNotes; </script>
The script looks rather complex, but it’s really simple and straightforward. Let’s break down the code to understand how it works.
First off, we define the showNote() function, which is very similar to the above previously defined, presenting an additional line:
var id=this.id.replace(/a/,'note');
Each time visitors pass a mouse over the link, the function is called, and within it we catch the ID corresponding to that link. Then, in order to obtain the ID for the <div> element containing the pop-up note, we only replace the part starting with "a" with the string "note" thus getting the ID that corresponds to the note. A few examples will help to clarify this concept:
Given an id "a1" for the link element, the expression evaluates in the following manner:
a1.replace(/a/,'note');
and results in the following ID: "note1".
For the subsequent IDs "a2" and "a3" the resulting IDs will be "note2" and "note3," and so on. Once we’ve obtained the ID that belongs to the containing <div> element for the pop-up note, it’s just matter of setting its visibility property to "visible," making the note visible to visitors.
In a similar way, the hideNote() function gets the corresponding note id and set its visibility property to "hidden," hiding the note to users.
The rest of the script is pretty easy to follow. First, we get all of the <a> elements present on the Web document. Next we check which ones have the class name attribute "special," and then assign them the "onmouseover" and "onmouseout" event handlers. The full code is wrapped into the createNotes() function, which will be executed once the page finishes loading.
Finally, all the "special" links will display a pop-up note when the visitor hovers over the links. That’s pretty good, right? We’ve got a working script that allows displaying multiple notes on a Web page.
JavaScript 
/ 25 
Creating Pop-Up Notes with CSS and JavaScript Part I
