Creating Pop-Up Notes with CSS and JavaScript Part I - The HTML markup
(Page 4 of 4 )
The HTML markup is almost identical, and is shown here:
<p>For web development, <a href="#" id="a1" class="special">PHP</a> is just great.</p>
<div id="note1">PHP: PHP Hypertext Preprocessor</div>
The full code for the page is as follows:
<html>
<head>
<title>DYNAMIC POP-UP NOTE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="javascript">
createNotes=function(){
showNote=function(){
// gets note1 element
var note1=document.getElementById('note1');
// assigns X,Y mouse coordinates to 'note1' element
note1.style.left=event.clientX;
note1.style.top=event.clientY;
// makes note1 element visible
note1.style.visibility='visible';
}
hideNote=function(){
// gets note1 element
var note1=document.getElementById('note1');
// hides note1 element
note1.style.visibility='hidden';
}
var a1=document.getElementById('a1');
// shows note1 element when mouse is over
a1.onmouseover=showNote;
// hides note element when mouse is out
a1.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;
}
#note1 {
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">PHP: PHP Hypertext Preprocessor</div>
</body>
</html>
The visual output is illustrated in the following images, indicating X - Y mouse coordinates:
As we can appreciate from these screenshots, the pop-up note appears at the mouse coordinates, expanding the limits of the previous static example, and displaying a more polished look.
If we wish improve the script even more, we might replace the "onmouseover" event handler with the "onmousemove" event handler within the code. Doing so, the note will be displayed "chasing" the mouse pointer, implementing an additional effect that can be potentially more appealing to visitors. All we have to do is replace the following line:
a1.onmouseover=showNote;
with this:
a1.onmousemove=showNote;
and that's all. We have a fully functional pop-up note that is very useful to include in our pages. Are we done? Not quite.
Note that in its current from, this script doesn't scale very well, since we're manipulating a single pop-up note. We did this to simplify the script, just so it's easier to understand how the JavaScript code is manipulating CSS. The next logical step would be expanding out the limits of the script to handle any number of notes across the Web document, which is the goal initially intended. In Part 2, we'll cover the creation of multiple pop-up notes.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
|
| · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | | |
|
