Creating Pop-Up Notes with CSS and JavaScript Part I
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. Alejandro Gervasio explains how to create several different kinds of pop-up notes using CSS and JavaScript.
Creating Pop-Up Notes with CSS and JavaScript Part I - Creating static pop-up notes (Page 2 of 4 )
Static pop-up notes are really simple to create. They only appear statically positioned around the page element which we want to be affected by the note. Let's get started generating our first pop-up note by making use of the code below, which generates a simple Web page and the styled elements. Here's the CSS code:
<style type="text/css">
p { font: normal 12px "Verdana", Arial, Helvetica, sans-serif; color: #000; }
Let's explain in detail the CSS declarations and the HTML, respectively.
We've redefined the <p> tag to show the text which the pop-up is applied to. Feel free to include any CSS rule that suits your needs. Next, we've declared our "#note1" contextual selector, which takes care of styling the pop-up note itself accordingly. As we can see, it has been absolutely positioned with top and left coordinates. Also, it presents a yellow background, a border of 1px, and the font family is set to Verdana, Arial, Helvetica, sans-serif. In fact, it's very simple.
Next, within the HTML markup, we have a paragraph containing the text itself. Inside of it we've included the link with an id attribute "a1," which will be triggering the JavaScript functions to show and hide accordingly the pop-up note:
<p>For web development, <a href="#" id="a1">PHP</a> is just great.</p>
Finally, the containing <div> for the pop-up note is properly defined. As we can see, the text included in the <div> element is the descriptive content that will appear when the pop-up note is activated:
So far, we have explained these sections of our Web page, but we need a script to put into action our desirable static pop-up note. The JavaScript functions needed to make the notes work are as follow:
<script language="javascript">
createNotes=function(){
showNote=function(){ // gets note1 element var note1=document.getElementById('note1'); // shows note1 element note1.style.visibility='visible'; }
hideNote=function(){ // gets note1 element var note1=document.getElementById('note1'); // hides note1 element note1.style.visibility='hidden'; } var a1=document.getElementById('a1'); // shows note1 element when mouse is over a1.onmouseover=showNote; // hides note1 element when mouse is out a1.onmouseout=hideNote; } // execute code once page is loaded window.onload=createNotes; </script>
The operation of this JavaScript snippet is really pretty simple. We position a styled paragraph in the appropriate spot using CSS, and then show or hide the containing <div> for the note by changing its CSS visibility property, based on whether the user passes the mouse over the link or positions it outside that area.
The showNote() function, as its name suggest, shows the pop-up note, by setting the visibility property to visible. In a similar fashion, the hideNote() function sets the visibility property to hidden.
As shown below, the showNote() function changes the visibility property to: "visible" for the "note1" element:
showNote=function(){ // gets note1 element var note1=document.getElementById('note1'); // shows note1 element note1.style.visibility='visible'; }
Simililary, the hideNote() function sets the visibility property to "hidden", by reversing the work done by the showNote() function:
hideNote=function(){ // gets note1 element var note1=document.getElementById('note1'); // hides note1 element note1.style.visibility='hidden'; }
By attaching the "mouseover" and "mouseout" event handlers to the link, we achieve the desired result:
var a1=document.getElementById('a1'); // shows note1 element when mouse is over a1.onmouseover=showNote; // hides note1 element when mouse is out a1.onmouseout=hideNote;
The complete code is shown below. Just copy and paste it into your HTML editor, save it and make it work.
showNote=function(){ // gets note1 element var note1=document.getElementById('note1'); // shows note1 element note1.style.visibility='visible'; }
hideNote=function(){ // gets note1 element var note1=document.getElementById('note1'); // hides note1 element note1.style.visibility='hidden'; } var a1=document.getElementById('a1'); // shows note1 element when mouse is over a1.onmouseover=showNote; // hides note1 element when mouse is out a1.onmouseout=hideNote; } // execute code once page is loaded window.onload=createNotes; </script>
<style type="text/css">
p { font: normal 12px "Verdana", Arial, Helvetica, sans-serif; color: #000; }
The visual output for this static pop-up note is illustrated below:
Now the static pop-up works the way we want. But it's still not good enough for our purposes. Let's expand our JavaScript code to create dynamic notes, which look a lot more professional. By manipulating mouse events, we'll be able to generate more appealing pop-ups, well suited for most websites. That's the subject of the next section.
JavaScript 
/ 71 
Creating Pop-up Notes with CSS and JavaScript Part II
