Home arrow JavaScript arrow Creating Pop-up Notes with CSS and JavaScript Part II

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.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 30
January 24, 2005
  1. · Creating Pop-up Notes with CSS and JavaScript Part II
  2. · The HTML markup
  3. · The complete code
  4. · Summary

print this article

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;

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;


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.

blog comments powered by Disqus

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials