Creating Pop-up Notes with CSS and JavaScript Part II - The HTML markup
(Page 2 of 4 )
Having defined our CSS code, it’s time to list the corresponding HTML markup:
<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>
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.
Next: The complete code >>
More JavaScript Articles
More By Alejandro Gervasio
|
| · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | | |
|
/ 22 
