Deborah's Popup Information Box Example

Popup Information Box Example

Javascript by Mike McGrath
Visit his homepage.

Directions to add images by Deborah V. Gardner

I found the code and instructions for Popup Information Boxes at Dynamic Drive. Be prepared to lose yourself for hours at their site.

Here are the directions to use the Popup code and add images.

First the example. Point to the link below. Click to open the page.

Click here.

Here is a slight modification of the above example. Here, when you click on the item, another page will not open; just the message and the image will appear

Point here.

Step 1: Include the following code within the HEAD section of your page.

Step 2: Include the following code directly after the opening BODY tag. Be sure to include the remarks so that others who view your code will know who wrote it.

<DIV ID="dek"></DIV> <SCRIPT TYPE="text/javascript">  </SCRIPT> //--> </SCRIPT>

Step 3: Decide where you want your hyperlink to be in your page. Place the following code at that spot.

<A HREF="MyPage.html" onMouseOver="popup('<IMG SRC=../Images/AmericanRibbon.gif ALIGN=left> Description','lightblue')"; ONMOUSEOUT="kill()">Click here.</A>

MyPage.html is the page you want to jump to.

If you want the second example where you do not link to another page, change "MyPage.html" to "javascript://".

Images/AmericanRibbon.gif is the image you want to appear in the popup box. You can store it in a different directory than Images if you wish.
Description refers to the text you want to appear in the popup box.
Click Here. is the phrase you want the user to click on to jump to MyPage.html.