Home arrow JavaScript arrow Page 3 - 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 - The complete code
(Page 3 of 4 )

As seen previously, one possible improvement for the script is to replace the "onmouseover" event handler with "onmousemove," and achieving the "chasing" note effect. Itís up to you decide how the notes will be displayed.

As usual, the complete code is listed below:

<title>MULTIPLE POP-UP NOTES</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script language="javascript">


                        // gets corresponding note element id
                        var id=this.id.replace(/a/,'note');
                        // assigns X,Y mouse coordinates to note element
                        // makes note element visible

                        // gets corresponding id for note element
                        var id=this.id.replace(/a/,'note');
                        // hides note element

            // gets all <a> elements 
            // iterates over all <a> elements
                        // assigns mouse event handlers to <a> elements with class name "special"
                                    // shows note element when mouse is over 
                                    // hides note element when mouse is out

// execute code once page is loaded

<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;


<p>For web development, <a href="#" id="a1" class="special">PHP</a> is just great.</p>

<div id="note1" class="note">PHP: PHP Hypertext Preprocessor</div>

<p><a href="#" id="a2" class="special">SQL</a> is the standard language for querying databases.</p>

<div id="note2" class="note">SQL: Structured Query Language</div>

<p>In fact <a href="#" id="a3" class="special">DHTML</a>, is a fusion of HTML and client-side programming.</p>

<div id="note3" class="note">DHTML: Dynamic Hypertext Markup Language</div>


The visual output for the code is illustrated with the following images:

And thatís it. We now have a script that works the way we want.

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