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

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

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

Developer Shed Affiliates

 




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