Creating Pop-Up Notes with CSS and JavaScript Part I
(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. Alejandro Gervasio explains how to create several different kinds of pop-up notes using CSS and JavaScript.
Within the structure of Web pages, pop-up notes are useful accessibility elements. They are often used to create footnotes, sidebars for articles, or to define an acronym, among other things. They're widely employed by numerous professional websites, fairly expanding their capabilities, in order to make visitors feel a little bit more comfortable during the surfing experience.
However, since pop-up notes rely heavily on JavaScript and CSS to work properly (except for the ones created with Flash), they always present a potential browser compatibility issue. Being applicable to anything on Web pages, we should make sure that any JavaScript code manipulating CSS or HTML objects degrades gracefully if the browser doesn't understand the script. This implies that it's a good idea to use pop-up notes only to provide supplemental information. They should never be used to supply critical information.
With the preliminaries out of the way, we're going to create pop-up notes using CSS and a little JavaScript in a step-by-step process, finally building an efficient script for generating multiple notes. So, let's dive into the code to show how it can work.
Next: Creating static pop-up notes >>
More JavaScript Articles
More By Alejandro Gervasio
|
| · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | | |
|
/ 57 
