Home      Products & Services      Contact Us      Links

WebHatchers will design & develop your site for you.

Website Menu Heaven: menus, buttons, etc.

Send us your questions.

site search by freefind

SEO, Google, Privacy
   and Anonymity
Browser Insanity
Popups and Tooltips
Free Website Search
HTML Form Creator
Buttons and Menus
Image Uploading
Website Poll
IM and Texting
   or Not MySQL
Personal Status Boards
Content Management
Article Content
   Management Systems
Website Directory
   CMS Systems
Photo Gallery CMS
Forum CMS
Blog CMS
Customer Records
   Management CMS
Address Book CMS
Private Messaging CMS
Chat Room CMS
JavaScript Charts
   and Graphs

Free Personal Status Boards (PSB™)

Free Standard Free PSB

Free PSB Pro Version

Free Social PSB

Free Social PSB Plus (with Email)

Free Business PSB

Free Business PSB Plus (with Email)

PSB demo

Social PSB demo

Business PSB demo

So what's all this PSB stuff about?

Chart comparing business status boards

PSB hosting diagram

PSB Licence Agreement

Copyright © 2002 -
MCS Investments, Inc. sitemap

PSBs, social networking, social evolution, microcommunities, personal status boards
PSBs, social networking, business personal status boards
website design, ecommerce solutions
website menus, buttons, image rotators
Ez-Architect, home design software
the magic carpet and the cement wall, children's adventure book
the squirrel valley railroad, model railroad videos, model train dvds
the deep rock railroad, model railroad videos, model train dvds

Popup Div Advertisements Script

Popup div ads don't need to be fancy. But if your cursor is hovering over a name of a product or website, then a popup div ad that shows a product or website photo is a nice change from the plain old text popup. In the test page, the links go to real website URLs. There are links inside the popups, in the last 2 popups. You can actually use the add-to-cart buttons in the third popup to buy a product 2 ways. And the fourth popup contains links to 6 different websites.

The Popup Div Advertisements test page will work on Windows IE 5.5, 6, 7, 8, Safari, Chrome, Firefox, Opera, and . . . that's all we tested. Popups will just pop up, but they will not follow the cursor.

Now—on to the script code:

The first section of code is standard mouse cursor coordinate reading.

Next comes the pic() function that displays the popup. The coordinates of the link text get offsets added to them and the popup div ad styles get their left and top positions adjusted. Then in the picout() function, the left property gets set back offscreen where the popup div ads normally reside in this script.

In the body tag, the onload event runs the mouse cursor coordinate reading script which continues to function for the whole duration the user is on this web page. Next, the popup div ads get offscreen positioning and unique ids. Finally, the links. They get onmouseover and onmouseout events that run the pic() and
picout() functions, respectively. In real use, these links could be website or product names inside sentences or paragraphs or buttons or whatever—anything that will take a link.

The code <a HREF="#" onclick='picout("a4")'><IMG SRC="x.gif" WIDTH=12 HEIGHT=12 BORDER=1></a> is for the which is in the corner of the last 2 popups div ads. This is critical with divs containing links you can click. How will you click them if the popup disappears the moment you onmouseout off the link text to get over to the popup to click a link? It's critical that the popup stays open until you purposely close it by clicking on the x in the upper right corner. There is supposed to be an ASCII character that is a box with an x in it, which we sought to use. It turns out browsers no longer support this as far as we could determine. So we drew our own. We added a link with an onclick event to our x so it would run the picout() function to disappear the popup div ad.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<TITLE>Popup Div Advertisements</TITLE>
<meta name="description" content="Popup Div Advertisements">
<meta name="keywords" content="Popup Div Advertisements,Link popup Script,Popup Div,tooltip ads,popup ads,javascript, dhtml, DHTML">


function startmouse(){document.onmousemove=getCoords;}

var x=0;
var y=0;

function getCoords(e){
if (!e) var e = window.event;
if (e.pageX){
x = e.pageX;
y = e.pageY;
else if (e.clientX){
x = e.clientX + document.body.scrollLeft;
y = e.clientY + document.body.scrollTop;

function pic(q) {var e=document.getElementById(q);s=x+35;u=y-135;e.style.left=s+'px';e.style.top=u+'px';}

function picout(q) {var e=document.getElementById(q);e.style.left='-1999px';}

// -->

<BODY SCROLL="auto" BGCOLOR="#FFFFFF" onLoad="startmouse()">

<p><B><center><h2>Popup Div Advertisements</h2></B></center></p>

<div id='a1' style='border:1px solid black;width:100px;height:63;background-color:#ddd;z-index:99;position:absolute;left:-1999px;top:300px;'><IMG SRC="logo-css.png" WIDTH=98 HEIGHT=53 BORDER=0><br><span style='font-size:15px'>PHP CMS scripts, CMS, JavaScript, PHP, CSS, DHTML, Ajax, tutorials, scripts</span></div>

<div id='a2' style='background-color:#fff;z-index:99;position:absolute;left:-1999px;top:300px'><IMG SRC="carpet.gif" WIDTH=230 HEIGHT=360 BORDER=0></div>

<div id='a3' style='background-color:#fff;z-index:99;position:absolute;left:-1999px;top:300px'><IMG SRC="heaven.gif" WIDTH=230 HEIGHT=360 BORDER=0><div style='z-index:999;position:absolute;left:23px;top:10px'>&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a HREF="#" onclick='picout("a3")'><IMG SRC="x.gif" WIDTH=12 HEIGHT=12 BORDER=1></a><BR><BR><BR><BR><BR><BR><BR><span style="font-size:13px;color:blue"><b>USA & Canadian orders: $19.95</b></span>

<br><A HREF="http://mcsii.biz/cart/cart.php?target=product&action=buynow&product_id=16268&category_id="><IMG SRC="Add_to_Cart__Black.gif" WIDTH=100 HEIGHT=23 BORDER=0></A><BR>

<span style="font-size:13px;color:blue;text-align:center"><b>Non-USA & non-Canadian orders<span style="font-size:23px">&nbsp;</span><BR>or any order if you prefer PayPal:<BR>$19.95</b></span>

<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" style='margin-top:-17px'>
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="6934360">
<input type="image" src="Add_to_Cart__Black.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form><span style='margin-top:-21px;font-size:13px;width:200px'>Get website menus, pushbuttons, light-up buttons, navigation bar buttons, navigation bars, header boxes, image-rotators, and more.</span></div></div></div>

<div id='a4' style='background-color:#fff;z-index:99;position:absolute;left:-1999px;top:300px'><IMG SRC="squirrel.gif" WIDTH=230 HEIGHT=360 BORDER=0><div style='z-index:999;position:absolute;left:20px;top:10px'>&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a HREF="#" onclick='picout("a4")'><IMG SRC="x.gif" WIDTH=12 HEIGHT=12 BORDER=1></a><BR><BR><BR><BR><BR><BR><BR>Also see:<BR><a HREF="http://theliquidateher.com/squirrel-valley/squirrel-valley-railroad-demo.htm">Squirrel Valley Railroad DVD</a><BR><a HREF="http://www.theliquidateher.com/squirrel-valley/deep-rock-railroad/deep-rock-railroad-dvd.html">Deep Rock Railroad</a><br><a HREF="http://www.theliquidateher.com/squirrel-valley/deep-rock-railroad/deep-rock-railroad-dvd.html">Deep Rock Railroad DVD</a><BR><a HREF="http://www.aglasshalffull.org/train-pictures-and-n-scale-model-train-info-and-pictures.html">Train articles and photos</a><BR><a HREF="http://www.theliquidateher.com/railroad-windows.html">Windows model train software</a><BR><a HREF="http://www.theliquidateher.com/railroad-macintosh.html">Mac model train software</a></div></div>

<div style='position:absolute;left:200px;width:540px;top:150px;font-size:16px'>
With this popup, we furnish the logo and a bit of information on <a HREF="http://www.css-resources.com/" onmouseover='pic("a1")' onmouseout='picout("a1")'>css-resources.com</a>. The info is actual text. The link is clickable. The next popup is a bigger style but essentially it has the same features except that the popup and everything in it is a single image, 230 x 360 pixels in size. <a HREF="http://www.thebiganswer.info/magic-carpet/index.html" onmouseover='pic("a2")' onmouseout='picout("a2")'>The Magic Carpet and the Cement Wall</a><BR><BR>

The next popup <a HREF="http://www.aglasshalffull.org/websitemenuheaven.html" onmouseover='pic("a3")'>Website Menu Heaven</a> contains 2 add-to-cart buttons whereby you can actually purchase the product outlined in the popup in 2 different ways. Note the popup closing x in the upper right corner. The reason the last 2 popups discussed had no such popup closing x is that there was nothing to click on in either popup. The popups disappear once you are no longer hovering on the links. Why make people close a popup with a closing x when the popup is so easy to close with a simple little onmouseout event? The final popup <a HREF="http://theliquidateher.com/squirrel-valley/squirrel-valley-railroad-demo.htm" onmouseover='pic("a4")'>Squirrel Valley Railroad</a> contains 6 links to model railroad products or information. Note that since there are links to click, the popup has a closing x in the upper right corner.