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">
<HTML>
<HEAD>
<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">
<SCRIPT LANGUAGE="JavaScript">
<!--
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';}
// -->
</script>
</head>
<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'>
<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"> </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'>
<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.
</div>
</body>
</html>