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.
Creating Pop-up Notes with CSS and JavaScript Part II (Page 1 of 4 )
Creating multiple pop-up notes
Once we’ve taken an in-depth look at our previous example, it’s easy to generate multiple pop-up notes with JavaScript. The basic idea rests on tying each link displaying a note to the corresponding <div> element that includes the pop-up note content. When we set up the relationship between the elements, all we need to do is write the JavaScript code for programmatically manipulating the visual display of the pop-up notes. So, let’s begin defining our CSS code:
<style type="text/css">
p { font: normal 11px "Verdana", Arial, Helvetica, sans-serif; color: #000; }
The CSS declarations are almost identical to those corresponding to the single pop-up note. We’ve redefined the <p> tag, for this example, and then we’ve declared the "special" class to get the links a little styled. Finally, we define a class named "note," which will apply the style to all of the pop-up notes present on the Web page. Since all the notes will be hidden from view, they’re absolutely positioned to X-Y coordinates: 0px 0px. Their visibility property is set to "hidden" initially, but, as we know, will be changed accordingly.