How can I create colorful popup menus that can use any images under the links?
The JavaScript popup menu tutorials below contain the scripts for three separate popup menus. Comments are welcome!
JavaScript popup menus that need to be discarded
Test menu: test-menu-with-popups.html
For the image http://www.css-resources.com/menu.gif do "Save as" with that image's url.
For the image http://www.css-resources.com/t.gif do "Save as" with that image's url (it's invisible but it saves fine).
This menu features popups that have live links that act as pulldown menu selections on a website. Feel free to use any of these scripts on your own websites, modifying the text and links and images as needed. Hover over a navbar item and a menu will pop up underneath. Either click a link or click the top or bottom green area to discard the popup.
The code is pretty simple. The pic() function puts the menu in a visible place onscreen that is underneath the navbar item hovered. And the picout() function removes the menu by giving it a left coordinate that is way offscreen. The navbar items are little rectangles enclosed by divs that have onmouseover event code right in the div tag. But solely because there are live links in the popups, we cannot use onmouseout as a way to dump the popup.
In our opinion, events were built wrong to begin with. They are so limited in their usage because they're so fussy about what layer they are on. When you move across a div and encounter live links, they're seen as a new layer or a new something because any onmouseout will mistakenly fire, even though from the user's point of view he just moved over some links on a popup menu. The events should have been built to ignore layer and simply activated as the cursor hit the border of one of the four edges of the div whose tag contains the onmouseover event, so that any events like onmouseout would still work, regardless of other stuff onscreen that may be on, under, or over that div. Then events would behave like all programmers have always wanted them to rather than being something that are discarded as useless, always-built-wrong commands. The only way the onmouseout could have been successfully employed in this situation is if the popup was simply built as a menu holder with an image built into it (but not superimposed upon it). For an example of this workable case, see the last script on this page where the navbar is the menu and the popups are the content (pretty pictures).
Note the <a HREF="#" onclick='picout("a")'><IMG SRC="t.gif" WIDTH=230 HEIGHT=360 BORDER=0></a> code in the div that lets the user click on the green area of the popup to exit the popup. The t.gif image is an empty one-pixel gif that can take any dimensions to surround an area so that an onclick event can run the picout() function and you exit the popup. The same idea is used in the code in the link that is in the top paragraph: onmouseover='x=390;pic("z",x)' and this allows hovering of the text to fire the event and pop up the popup.
<!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">
<style type="text/css">
a {text-decoration: none;}
body {font: bold 13px arial, sans-serif;}
.divs{
width:100px;
text-align:center;
border:1px solid black;
display: table-cell;
vertical-align:middle;
background-color:#ddd;
z-index:99;
position:absolute;
padding:4px 0px 0px 0px;
top:100px;
height:18px;
width:230px;}
#a {left:10px;}
#b {left:240px;}
#c {left:470px;}
#d {left:700px;}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
var f=0;
function pic(q,x) {if (f==1){return;}else{var e=document.getElementById(q);e.style.left=x+'px';f=1;}}
function picout(q) {var e=document.getElementById(q);e.style.left='-1999px';f=0;}
// -->
</script>
</head>
<BODY SCROLL="auto" BGCOLOR="#FFFFFF">
<div id='z' style='background-color:#fff;z-index:99;position:absolute;left:-1999px;top:220px'><IMG SRC="menu.gif" WIDTH=230 HEIGHT=360 BORDER=0><div style='z-index:995;position:absolute;left:0px;top:0px'><a HREF="#" onclick='picout("z")'><IMG SRC="t.gif" WIDTH=230 HEIGHT=360 BORDER=0></a><div style='z-index:999;position:absolute;left:20px;top:40px'><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><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>
<P>The popup <a HREF="http://theliquidateher.com/squirrel-valley/squirrel-valley-railroad-demo.htm" onmouseover='x=390;pic("z",x)'>Squirrel Valley Railroad</a> contains links to model railroad products or information. Note that since there are links to click, the popup has to be closed--it cannot close itself. The (discard this menu) words at the top and bottom of the popup mean that if you click on the green area above or below the links, the menu closes.</P>
<div class='divs' style='left:10px' onmouseover='x=10;pic("a",x)'>Train pictures1</div>
<div id='a' style='background-color:#fff;z-index:99;position:absolute;left:-1999px;top:124px'><IMG SRC="menu.gif" WIDTH=230 HEIGHT=360 BORDER=0><div style='z-index:995;position:absolute;left:0px;top:0px'><a HREF="#" onclick='picout("a")'><IMG SRC="t.gif" WIDTH=230 HEIGHT=360 BORDER=0></a><div style='z-index:999;position:absolute;left:20px;top:40px'><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><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>
<div class='divs' style='left:240px' onmouseover='x=240;pic("b",x)'>Train pictures2</div>
<div id='b' style='background-color:#fff;z-index:99;position:absolute;left:-1999px;top:124px'><IMG SRC="menu.gif" WIDTH=230 HEIGHT=360 BORDER=0><div style='z-index:995;position:absolute;left:0px;top:0px'><a HREF="#" onclick='picout("b")'><IMG SRC="t.gif" WIDTH=230 HEIGHT=360 BORDER=0></a><div style='z-index:999;position:absolute;left:20px;top:40px'><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><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>
<div class='divs' style='left:470px' onmouseover='x=470;pic("c",x)'>Train pictures3</div>
<div id='c' style='background-color:#fff;z-index:99;position:absolute;left:-1999px;top:124px'><IMG SRC="menu.gif" WIDTH=230 HEIGHT=360 BORDER=0><div style='z-index:995;position:absolute;left:0px;top:0px'><a HREF="#" onclick='picout("c")'><IMG SRC="t.gif" WIDTH=230 HEIGHT=360 BORDER=0></a><div style='z-index:999;position:absolute;left:20px;top:40px'><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><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>
<div class='divs' style='left:700px' onmouseover='x=700;pic("d",x)'>Train pictures4</div>
<div id='d' style='background-color:#fff;z-index:99;position:absolute;left:-1999px;top:124px'><IMG SRC="menu.gif" WIDTH=230 HEIGHT=360 BORDER=0><div style='z-index:995;position:absolute;left:0px;top:0px'><a HREF="#" onclick='picout("d")'><IMG SRC="t.gif" WIDTH=230 HEIGHT=360 BORDER=0></a><div style='z-index:999;position:absolute;left:20px;top:40px'><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><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>
</body>
</html>
JavaScript popup menus won't need to be discarded since they're automatic
Test menu: test-menu-with-popups2.html
For the image http://www.css-resources.com/menu.gif do "Save as" with that image's url unless you already have it saved (above).
For the image http://www.css-resources.com/menu2.gif and do "Save as" with that image's url.
For the image http://www.css-resources.com/t.gif and do "Save as" with that image's url (it's invisible but it saves fine—you won't need to resave it if you already have it saved (above).
This popup script is more elegant. It avoids frustrations with built-wrong events and avoids events altogether (except for the one in the top paragraph that works the same as the one in the previous script and the onmousemove one that detects mouse movement but not position).
The JavaScript contains cross-browser cursor coordinate reading that is used so that we can easily simulate what JavaScript HTML DOM Events should have been able to do, since cursor position is king and layers are rightfully ignored. By knowing exactly where the cursor is onscreen, we can easily detect whether a cursor has left or entered a popup. Then it's a simple matter of parameter comparisons.
A few years back, onmousemove used to work different with different browsers, but these days, the code you see—run by the onLoad in the body tag—works cross-browser. As you can see, every time the mouse moves it runs getCoords which reads the new mouse coordinate and we then have x and y values for our parameter checking lower down in the function.
Perhaps you noticed that our pic() function simply takes a specified popup and changes its left coordinate to onscreen, since it had been hidden offscreen. But then notice that picout() throws all popups offscreen. This is to ensure no popup is left behind if someone whips back and forth on the navbar hoping to get the script to leave behind debris in the form of unwanted popups.
The parameter checking routine—in the getCoords function—is quite capable and concise. Check it out. First we check the value of j where the ascii number of the letter that is the div id lives. If j=122 then it is the z div—the one that is popped from the link in the top paragraph. We cease looking into parameter comparing because it doesn't matter with this popup since the only way to dump the popup popped by that link is to click on either green area of the popup (where there are no links).
The code if(x>10&&x<241&&y>100&&y<484){if(j==97){return;} is looking for the parameters for the 1st popup, whose id is "a", which happens to be ascii 97. If the script finds the cursor is within these parameters, it checks j and if it finds 97, it means the mouse is in an already popped popup which is how the j got the 97. It means this popup is popped already and the mouse is on it, so no action is needed so we return. But the script isn't done.
What if the cursor is there but the popup was never popped? The code else{q=String.fromCharCode(j);j=0;picout(q); uses the String.fromCharCode() method to convert 97 into "a", then we set j to 0 (meaning nothing is popped) and run the picout() function, which actually doesn't need any parameter or string or character code since it dumps ALL popups (except z, the one that the link pops, which only gets dumped if the z is sent to this picout(q) function).
What we've said so far is that when the mouse is in areas where popups go, if the popup that goes in that area is not the one that was popped, ALL popups are dumped (requiring merely four CSS left attribute value updates). This simulates onmouseout. But we are still not done.
The code if(y<124&&y>99){xx=10;j=97;pic("a",xx);} says that—since there's nothing popped now since we dumped all popups—we need to check whether or not the cursor is in the navbar and, if so, pop the popup under that part of the navbar, which to the user is simply one of the navigation menu bar buttons. So we run pic() if the cursor is between 99 and 124, the upper and lower y coordinates of the navbar. Note that earlier in this code block we already determined that the mouse is within x>10&&x<241&&y>100&&y<484 which defines both the popup area and the navbar area. Now we check only for it being in the navbar coordinates and pop the popup as required. This simulates onmouseover.
Before we leave this getCoords() function, we do this: if(y<100){picout(q);} which dumps all popups if the mouse is above the navbar. We didn't check for y coordinates that are above 484 (the bottom of the popups) even though we could have, but there's no point in a user's mouse being below the popups. And in case someone decides to create popups of unequal height, the script will still apply.
<!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">
<style type="text/css">
a {text-decoration: none;}
body {font: bold 13px arial, sans-serif;}
.divs{
text-align:center;
border:1px solid black;
display: table-cell;
vertical-align:middle;
background-color:#ddd;
z-index:99;
position:absolute;
padding:4px 0px 0px 0px;
top:100px;
height:18px;
width:230px;}
#a {left:10px;}
#b {left:240px;}
#c {left:470px;}
#d {left:700px;}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
var j=0;
var x = 0;
var y = 0;
var yy = 0;
var xx = 0;
var q="";
function startmouse() {document.onmousemove=getCoords;}
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;
}
if(j==122){return;}
if(x>10&&x<241&&y>100&&y<484){
if(j==97){return;}
else{q=String.fromCharCode(j);j=0;picout(q);
if(y<124&&y>99){xx=10;j=97;pic("a",xx);}}}
if(x>240&&x<471&&y>100&&y<484){
if(j==98){return;}
else{q=String.fromCharCode(j);j=0;picout(q);
if(y<124&&y>99){xx=240;j=98;pic("b",xx);}}}
if(x>470&&x<701&&y>100&&y<484){
if(j==99){return;}
else{q=String.fromCharCode(j);j=0;picout(q);
if(y<124&&y>99){xx=470;j=99;pic("c",xx);}}}
if(x>700&&x<930&&y>100&&y<484){
if(j==100){return;}
else{q=String.fromCharCode(j);j=0;picout(q);
if(y<124&&y>99){xx=700;j=100;pic("d",xx);}}}
if(y<100){picout(q);}}
function pic(q,xx) {var e=document.getElementById(q);e.style.left=xx+'px';}
function picout(q) {if (q=="z"){var e=document.getElementById('z');e.style.left='-1999px';};var e=document.getElementById('a');e.style.left='-1999px';var e=document.getElementById('b');e.style.left='-1999px';var e=document.getElementById('c');e.style.left='-1999px';var e=document.getElementById('d');e.style.left='-1999px';j=0;}
// -->
</script>
</head>
<BODY SCROLL="auto" BGCOLOR="#FFFFFF" onLoad="startmouse()">
<div id='z' style='background-color:#fff;z-index:99;position:absolute;left:-1999px;top:200px'><IMG SRC="menu.gif" WIDTH=230 HEIGHT=360 BORDER=0><div style='z-index:995;position:absolute;left:0px;top:0px'><a HREF="#" onclick='picout("z")'><IMG SRC="t.gif" WIDTH=230 HEIGHT=360 BORDER=0></a><div style='z-index:999;position:absolute;left:20px;top:40px'><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><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>
<P>The popup <a HREF="http://theliquidateher.com/squirrel-valley/squirrel-valley-railroad-demo.htm" style='text-decoration: underline;color:blue;' onmouseover='f=1;xx=390;j=122;pic("z",xx)'>Squirrel Valley Railroad</a> contains links to model railroad products or information. The link that says Squirrel Valley Railroad loads a popup has to be hand-closed--it cannot close itself. The other popups close automatically once you're off the popup.</P>
<div class='divs' style='left:10px'>Train pictures1</div>
<div id='a' style='background-color:#fff;z-index:99;position:absolute;left:-1999px;top:124px'><IMG SRC="menu2.gif" WIDTH=230 HEIGHT=360 BORDER=0><div style='z-index:995;position:absolute;left:0px;top:0px'><IMG SRC="t.gif" WIDTH=230 HEIGHT=360 BORDER=0><div style='z-index:999;position:absolute;left:20px;top:40px'><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><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>
<div class='divs' style='left:240px'>Train pictures2</div>
<div id='b' style='background-color:#fff;z-index:99;position:absolute;left:-1999px;top:124px'><IMG SRC="menu2.gif" WIDTH=230 HEIGHT=360 BORDER=0><div style='z-index:995;position:absolute;left:0px;top:0px'><IMG SRC="t.gif" WIDTH=230 HEIGHT=360 BORDER=0><div style='z-index:999;position:absolute;left:20px;top:40px'><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><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>
<div class='divs' style='left:470px'>Train pictures3</div>
<div id='c' style='background-color:#fff;z-index:99;position:absolute;left:-1999px;top:124px'><IMG SRC="menu2.gif" WIDTH=230 HEIGHT=360 BORDER=0><div style='z-index:995;position:absolute;left:0px;top:0px'><IMG SRC="t.gif" WIDTH=230 HEIGHT=360 BORDER=0><div style='z-index:999;position:absolute;left:20px;top:40px'><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><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>
<div class='divs' style='left:700px'>Train pictures4</div>
<div id='d' style='background-color:#fff;z-index:99;position:absolute;left:-1999px;top:124px'><IMG SRC="menu2.gif" WIDTH=230 HEIGHT=360 BORDER=0><div style='z-index:995;position:absolute;left:0px;top:0px'><IMG SRC="t.gif" WIDTH=230 HEIGHT=360 BORDER=0><div style='z-index:999;position:absolute;left:20px;top:40px'><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><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>
</body>
</html>
JavaScript popup menus that let you display images
Test menu: test-menu-with-popups3.html
For the image http://www.css-resources.com/menu.gif do "Save picture as" with that image's url unless you already have it saved (above).
For the image http://www.css-resources.com/menu3.gif and do "Save as" with that image's url.
For the image http://www.css-resources.com/t.gif and do "Save as" with that url with that image's url (it's invisible but it saves fine—you won't need to resave it if you already have it saved (above).
This is the simplest script, requiring only onmouseover and onmouseout to run things. The code merely detects mice running in or out of the navbar items and pops up popups when needed. If you move down onto the popup, it disappears. Not rocket science. We assume you'll have 4 different images appear, not the same one, and you'll edit navbar text.
<!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">
<style type="text/css">
a {text-decoration: none;}
body {font: bold 13px arial, sans-serif;}
.divs{
width:100px;
text-align:center;
border:1px solid black;
display: table-cell;
vertical-align:middle;
background-color:#ddd;
z-index:99;
position:absolute;
padding:4px 0px 0px 0px;
top:100px;
height:18px;
width:230px;}
#a {left:10px;}
#b {left:240px;}
#c {left:470px;}
#d {left:700px;}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
var f=0;
function pic(q,x) {if (f==1){return;}else{var e=document.getElementById(q);e.style.left=x+'px';f=1;}}
function picout(q) {var e=document.getElementById(q);e.style.left='-1999px';f=0;}
// -->
</script>
</head>
<BODY SCROLL="auto" BGCOLOR="#FFFFFF">
<div id='z' style='background-color:#fff;z-index:99;position:absolute;left:-1999px;top:220px'><IMG SRC="menu.gif" WIDTH=230 HEIGHT=360 BORDER=0><div style='z-index:995;position:absolute;left:0px;top:0px'><a HREF="#" onclick='picout("z")'><IMG SRC="t.gif" WIDTH=230 HEIGHT=360 BORDER=0></a><div style='z-index:999;position:absolute;left:20px;top:40px'><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><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>
<P>The popup <a HREF="http://theliquidateher.com/squirrel-valley/squirrel-valley-railroad-demo.htm" onmouseover='x=390;pic("z",x)'>Squirrel Valley Railroad</a> contains links to model railroad products or information. Note that since there are links to click, the popup has to be closed--it cannot close itself. The (discard this menu) words at the top and bottom of the popup mean that if you click on the green area above or below the links, the menu closes.</P>
<div class='divs' style='left:10px' onmouseover='x=10;pic("a",x)' onmouseout='picout("a")'>Train pictures1</div>
<div id='a' style='background-color:#fff;z-index:99;position:absolute;left:-1999px;top:124px'><IMG SRC="menu3.gif" WIDTH=230 HEIGHT=360 BORDER=0></div></a>
<div class='divs' style='left:240px' onmouseover='x=240;pic("b",x)' onmouseout='picout("b")'>Train pictures2</div>
<div id='b' style='background-color:#fff;z-index:99;position:absolute;left:-1999px;top:124px'><IMG SRC="menu3.gif" WIDTH=230 HEIGHT=360 BORDER=0></div></a>
<div class='divs' style='left:470px' onmouseover='x=470;pic("c",x)' onmouseout='picout("c")'>Train pictures3</div>
<div id='c' style='background-color:#fff;z-index:99;position:absolute;left:-1999px;top:124px'><IMG SRC="menu3.gif" WIDTH=230 HEIGHT=360 BORDER=0></div></a>
<div class='divs' style='left:700px' onmouseover='x=700;pic("d",x)' onmouseout='picout("d")'>Train pictures4</div>
<div id='d' style='background-color:#fff;z-index:99;position:absolute;left:-1999px;top:124px'><IMG SRC="menu3.gif" WIDTH=230 HEIGHT=360 BORDER=0></div></a>
</body>
</html>