Adding Pop-Up Layers

Hypertext is a great way to link the information on your page to information on other pages. But to access that information, visitors have to click a link, which opens a new document and replaces what they were reading with the new material. This setup can be highly distracting, not to mention confusing, when trying to return to the originating page.

Wouldn't it be better if that information written or visualsimply appeared below the link when the visitor passes the mouse cursor over it? That arrangement would truly be hypertext.

In this example (Figure 22.6), each link on the page includes a pop-up hypertext that displays additional information relevant to the link and page (Figures 22.7 and 22.8).

Figure 22.6. A normal-looking page of hypertext links.

Figure 22.7. Placing your mouse over the link reveals more text.

Figure 22.8. It may even reveal an image.

To add pop-up layers:



Start a new JavaScript file and save it as popUpHypertext.js (Code 22.8). Steps 2 through 5 apply to this file.

Code 22.8. popUpHypertext.js: Functions used to create pop-ups with content imported using Ajax.

[View full width]

var objPopUp = null; function popUp(whichLink) {      fetchData('dataPage.php',whichLink,'popUpMessage');      objPopTrig = document.getElementById(whichLink);      objPopUp = document.getElementById('popUpMessage');      objPopUp.innerHTML='<b>Loading</b>';      xPos = objPopTrig.offsetLeft;      yPos = (objPopTrig.offsetTop + objPopTrig.offsetHeight);      if (xPos + objPopUp.offsetWidth > document.body.clientWidth) xPos = xPos - objPopUp. offsetWidth;      if (yPos + objPopUp.offsetHeight > document.body.clientHeight) yPos = yPos - objPopUp .offsetHeight - objPopTrig.offsetHeight; = xPos + 'px'; = yPos + 'px'; = 'visible'; } function popHide() { = 'hidden';      objPopUp = null; } function filterData(pageRequest, objectID){      if (pageRequest.readyState == 4 && (pageRequest.status==200 || window.location.href. indexOf("http")==-1))            document.getElementById(objectID).innerHTML=pageRequest.responseText; }


var objPopUp = null;

Initialize the variable objPopUp, which will keep track of which pop-up message is being displayed.


function popUp(whichLink) {…}

Add the function popUp() to the JavaScript.

This function identifies which object triggered the function (whichLink), triggers the fetchData() function to get the data that will be placed into the pop-up, and finally positions and displays the pop-up layer. At this point, there is no content (other than the default message "Loading") in the pop-up. The filterData() (Step 5) function will place the data into the pop-up.


function popHide() {…}

Add the function popHide() to the JavaScript. This function hides the pop-up object and sets the variable objPopUp back to null.


function filterData(pageRequest, objectID) {…}

Add the function filterData() to the JavaScript, which will replace the default version of the function included in the ajaxBasics.js file you will be linking to in Step 9.

This function receives the data back from the Ajax request in the variable pageRequest and places it in the layer identified using the objectID variable.



Set up a page on your server that holds and processes the data you will be using for your pop-up hypertext (Code 22.9).

Code 22.9. dataPage.php: A server page using PHP to find the right message for the triggering link.

[View full width]

<?php $needMessage = $_POST['dataRequest']; if ($needMessage == "pop1") $dataResponse = '<i>Alice\'s Adventures in Wonderland</i>was  published in 1865.'; if ($needMessage == "pop2") $dataResponse = '<div > <img src="alice02a. gif" alt="The White Rabbit" height="270" width="180" /><p>John Tenniel did the original  illustrations</p></div>'; if ($needMessage == "pop3") $dataResponse = 'The book was writen by Reverend Charles  Lutwidge Dodgson (A.K.A Lewis Carroll'; if ($needMessage == "pop4") $dataResponse = 'The sequal was called <i>Through the  Looking-Glass, and What Alice Found There</i> and was published in 1871. Tenniel did the  illustrations for that one as well.'; if ($dataResponse) echo ($dataResponse); else echo ('Sorry! There was an error'); ?>

In this example, I'm using a PHP file that checks the value of the variable dataRequest that's sent in the HTTP header and then returns a string (which can include HTML code) to the originating function.



Create a new external CSS file ad save it as popUpHypertext.css (Code 22.10). This file will include the styles you need for your pop-uphypertext layer. Make sure to include the class:

Code 22.10. popUpHypertext.css: The style used to create a pop-up layer.

.popUp {      font-size: .9em;      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;      background-color: #fff;      visibility: hidden;      margin: 0 10px;      padding: 5px;      position: absolute;      width: 200px;      opacity: .8;      border: 1px solid black; }

.popUp {…}

This class will be applied to all pop-up objects and sets their basic appearance.



Set up an HTML file and save it as index.html (Code 22.11). Steps 8 through 12 apply to this file.

Code 22.11. index.html: The Web page with the links triggering the hypertext pop-ups.

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " xhtml1-strict.dtd"> <html xmlns=""> <head> <meta http-equiv="Content-Type" ="text/html; charset=utf-8" /> <title>CSS, DHTML &amp; Ajax | Adding Pop-up Hypertext</title> <script src="/books/3/292/1/html/2/ajaxBasics.js" type="text/javascript"></script> <script src="/books/3/292/1/html/2/popUpHypertext.js" type="text/javascript"></script> <link href="popUpHypertext.css" rel="stylesheet" type="text/css" /> </head> <body> <div  >         <div >         <h2>Chapter I <span >Down the Rabbit-Hole</span> </h2> <div >         <p>Alice was beginning to <a href="#1"  onmouseover="popUp(;"  onmouseout="popHide();">get very tired</a> of sitting by her sister on the bank, and of  having nothing to do: once or twice she had peeped into the book her sister was reading,  but it had <a href="#2"  onmouseover="popUp(;" onmouseout="popHide();">  no pictures </a> or conversations in it, 'and what is the use of a book,' thought Alice  'without pictures or conversation?'</p> </div></div></div> <div  > Loading </div> </body></html>



Add a call to the ajaxBasics.js file created in Chapter 20 (Code 22.6). You will need to add a copy of this file to the directory or change the src value to the path where your Ajax basics file is located. This file includes the fetchData() and filterData() functions.


In a container element such as a <div>, add an ID to define the tooltip object. Remember that each object needs a unique ID. The container element can be anything you want that can use the onmouseover and onmouseout event handlers; however, the link tag (<a>) is most commonly used.



In the container you created in the last step, add an onmouseover event handler that triggers the popUp() function, passing it the ID for "this" object, which is also the ID for the pop-up message you want displayed.



After the onmouseover event handler, add an onmouseout event handler to trigger the popHide() function, which hides the pop-up object.


<div  >…</div>

Create an object with the class set to popUp and a unique ID, which will then be used by the popUp() function you created in Step 3.


  • Notice that the links associated with the pop-up text go nowhere (actually, they link to the top of the page using #). You could, however, link to documents that elaborate on the concepts presented in the pop-up text or to anything else you want to use. Or you could use a simple function that returns no value, to have the links do nothing when clicked. You decide.

  • You can use pop-up text as tooltips that explain the purpose of a particular link in the navigation.

  • You can include pop-up text in an image map. This technique is nice if you have a large graphic with areas that need explanation.

CSS, DHTML and Ajax. Visual QuickStart Guide
CSS, DHTML, and Ajax, Fourth Edition
ISBN: 032144325X
EAN: 2147483647
Year: 2006
Pages: 230

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: