View Full Version : Topdeck Popper Script updated

Philip M
07-31-2012, 09:03 PM
The original of this script was Mike McGrath. The script as published was intended for ancient browsers and is thus no longer useable, but I have updated it to bring it into line with modern standards. It works in IE, FF and GC.



<!-- Original script by Mike McGrath. Updated 2012 by Philip M -->

<style type = "text/css">
body {overflow:scroll;overflow-x:hidden}
.popper { position : absolute; visibility : hidden; }
.generalred {font-family:Arial; color:red; font-size:100%; font-weight:bold }


<body link="#0000FF" alink="#0000FF" vlink="#0000FF">

<div id="topdeck" class="popper">&nbsp;</div>

<script type = "text/javascript">

var skn = topdeck.style;
document.onmousemove = get_mouse;

function pop(msg,bakgrcol) {

var content ="<table style='background-color:#000000;text-align:center;font-family:Arial;font-size:95%;border-collapse:collapse;border:1px solid #000000' width='180'><tr><td>" +
"<table style='border-collapse:collapse' width='100%'><tr><td style='color:#FFFFFF;font-family:Arial;font-size:85%;text-align:center;'><b>Detailed Info</b></td></tr></table>" +
"<table style='border-collapse:collapse;background-color:"+bakgrcol+"' width='100%'><tr><td style='padding:5px;text-align:center;font-family:Arial;font-size:85%;'>"+msg+"</td></tr></table></td></tr></table>";

// font sizes are adjustable to taste

document.getElementById("topdeck").innerHTML = content;
skn.visibility = "visible";


function getMousePosition(e) {
return e.pageX ? {'x':e.pageX, 'y':e.pageY} : {'x':e.clientX + document.documentElement.scrollLeft + document.body.scrollLeft, 'y':e.clientY + document.documentElement.scrollTop + document.body.scrollTop};

function get_mouse(e) {
if (!e) e = event; // make sure we have a reference to the event
var mp = getMousePosition(e);
var xx = mp.x;
var yy = mp.y;
skn.left = (xx - 60) + "px"; // px required
skn.top = (yy + 20) + "px";

function kill() {
skn.visibility = "hidden";


<!-- Fragments from a customer's web page showing example coding/usage -->

<p align="center" class = "generalred">We suggest that you take a look at <b>Slater's</b> exciting range of </b><br><a href="slatcoaches.html" ONMOUSEOVER="pop ('Complete list of <b>Slater\'\s </b> highly detailed injection moulded plastic kits for historic railway passenger carriages including examples from the 19th century to the end of the steam era', '#00CC33')"; ONMOUSEOUT="kill()">carriage kits</a> and <a href="slatwagons.html" ONMOUSEOVER="pop ('Complete list of the extensive range of <b>Slater\'\s</b> highly detailed injection moulded plastic kits for historic railway goods wagons including examples from the 19th century to the end of the steam era', '#00CC33')"; ONMOUSEOUT="kill()">goods wagon kits</a> (click to view the complete lists).</p>

<p align="center" class = "generalred"> We have over 200 different locomotive kits in stock. Click here to view <br><a href="locokits.html" ONMOUSEOVER="pop ('Just a selection from the vast range of steam and diesel locomotive kits from the leading manufacturers which we stock and recommend.', '#00CC33')"; ONMOUSEOUT="kill()">a selection of the most popular models.</a></p>