Creating Pop-up Notes with CSS and JavaScript Part II
(Page 1 of 4 )
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 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;
}
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>
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.
Next: The HTML markup >>
More JavaScript Articles
More By Alejandro Gervasio
|
| · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | | |
|
/ 24 
