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

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 / 25
January 24, 2005
TABLE OF CONTENTS:
  1. · Creating Pop-up Notes with CSS and JavaScript Part II
  2. · The HTML markup
  3. · The complete code
  4. · Summary

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
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:

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

<script language="javascript">

createNotes=function(){

            showNote=function(){
                        // gets corresponding note element id
                        var id=this.id.replace(/a/,'note');
                        note=document.getElementById(id);
                        // assigns X,Y mouse coordinates to note element
                        note.style.left=event.clientX;
                        note.style.top=event.clientY;
                        // makes note element visible
                        note.style.visibility='visible';
            }

            hideNote=function(){ 
                        // gets corresponding id for note element
                        var id=this.id.replace(/a/,'note');
                        note=document.getElementById(id);
                        // hides note element
                        note.style.visibility='hidden';
            }

            // gets all <a> elements 
            as=document.getElementsByTagName('a');
            // iterates over all <a> elements
            for(i=0;i<as.length;i++){
                        // assigns mouse event handlers to <a> elements with class name "special"
                        if(/\bspecial\b/.test(as[i].className)){
                                    // shows note element when mouse is over 
                                    as[i].onmousemove=showNote;
                                    // hides note element when mouse is out
                                    as[i].onmouseout=hideNote;
                        }
            }
}

// execute code once page is loaded
window.onload=createNotes;
</script>

<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>
</head>
<body>

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

</body>
</html>

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
JAVASCRIPT ARTICLES

- More Top jQuery Tutorials for Beginners
- More Top jQuery Plugins for Menus
- Top jQuery Tutorials for Beginners
- New UI Framework and SDK for JavaScript Rele...
- JavaScript OpenPGP Tool, Node.js 0.6.3 Avail...
- Yahoo Releases Cocktails Language and Develo...
- Customizing jQuery Slideshows: Dynamic Contr...
- Customizing jQuery Slideshows: the animate()...
- Customizing jQuery Slideshows: slideUp() and...
- Customizing jQuery Slideshows: hide() and sh...
- Web Workers: Performing Calculations in Para...
- More Top JavaScript Frameworks and Libraries
- More Dynamic jQuery Styling Techniques
- The Top JavaScript Libraries
- The Top JavaScript Frameworks

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



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