<html><div style='background-color:'><DIV>
<P>You might want to try it with something like this. (blockquotes are to protect from html mail browser parsing)</P>
<P>Page code:</P>
<P><blockquote></P>
<P><html><BR><head><BR> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"><BR> <title>DHTML for the WWW | Hypertext Pop-Up</title><BR> <script src="findDOM.js"></script><BR> <script><BR>function findLivePageWidth() {<BR> if (window.innerWidth != null)<BR> return window.innerWidth;<BR> if (document.body.clientWidth != null)<BR> return document.body.clientWidth;<BR> return (null);<BR>}<BR> <BR>function popUp(evt,objectID){<BR> if (isDHTML) { // Makes sure this is a DHTML browser<BR> var livePageWidth = findLivePageWidth();<BR> //alert(livePageWidth);<BR> domStyle = findDOM(objectID,1);<BR> dom = findDOM(objectID,0);<BR> state = domStyle.visibility;<BR> if (dom.offsetWidth) elemWidth = dom.offsetWidth;<BR> else { if (dom.clip.width) elemWidth = dom.clip.width; }<BR> if (state == "visible" || state == "show") { domStyle.visibility = "hidden"; }<BR> else {<BR> if (evt.pageY) { //Calculates the position for Navigator 4 <BR> topVal = evt.pageY + 4;<BR> leftVal = evt.pageX - (elemWidth / 2); <BR> }<BR> else { <BR> if (evt.y) { // Calculates the position for IE4<BR> topVal = evt.y + 4 + document.body.scrollTop;<BR> leftVal = evt.x - (elemWidth / 2) + document.body.scrollLeft;<BR> }<BR> }<BR> /*If the element goes off the page to the left, this moves it back */<BR> if(leftVal < 2) { leftVal = 2; }<BR> else { <BR> if ((leftVal + elemWidth) > livePageWidth) { leftVal = leftVal - (elemWidth / 2); }<BR> }<BR> domStyle.top = topVal; // Positions the element from the top<BR> domStyle.left = leftVal; // Positions the element from the left<BR> domStyle.visibility = "visible"; // Makes the element visable <BR> }<BR> }<BR>}<BR> <BR> </script><BR> <style media="screen" type="text/css"><!--<BR>#ht1,#ht2 {<BR>position: absolute;<BR>z-index: 100;<BR>top: 0px;<BR>left: 10px;<BR>visibility: hidden }</P>
<P>.hyperText {<BR> color: #333333;<BR> font: 10px/12px "Trebuchet MS", Arial, Helvetica, Geneva, sans-serif;<BR> background-color: #cccccc;<BR> padding: 5px;<BR> border: solid 2px #ff6666;<BR> width: 250px;<BR> layer-background-color: #CCCCCC <BR> }</P>
<P>--></style><BR> </head></P>
<P><body><BR><!-- The first pop-up element: ht1. This will not display until the visitor <BR>passes the mouse over link 1 --><BR><SPAN ID="ht1" CLASS="hyperText">Too much information is as bad as too <BR>little. All too often designers treat the Web like a hose through which to <BR>force information.</SPAN> </P>
<P><!-- The second pop-up element: ht2. This will not display until the visitor <BR>passes the mouse over tlink 2 --><BR><SPAN ID="ht2" CLASS="hyperText">Hypertext allows you to include &quot;meta-<BR>textual&quot; <BR>information for readers who want to know more.</SPAN> </P>
<P><P>A webbed environment is a Web site that does not frustrate the user with <BR>long download times, or confuse them with <BR><!-- Link 1 --><BR><A HREF="#" ONMOUSEOUT=" popUp(event,'ht1')" <BR>ONMOUSEOVER="popUp(event,'ht1')"><BR>millions of navigation points at once <BR></A><BR>. Instead, a successful webbed environment will appear to have smooth <BR>transitions as content changes and provide easy to use features, <BR><!-- Link 2 --><BR><A HREF="#" ONMOUSEOUT="popUp(event,'ht2')" <BR>ONMOUSEOVER="popUp(event,'ht2')"><BR>hypertext <BR></A><BR>, and navigation that is convenient but not overwhelming. <BR></p><BR><P>A webbed environment is a Web site that does not frustrate the user with <BR>long download times, or confuse them with <BR><!-- Link 1 --><BR><A HREF="#" ONMOUSEOUT=" popUp(event,'ht1')" <BR>ONMOUSEOVER="popUp(event,'ht1')"><BR>millions of navigation points at once <BR></A><BR>. Instead, a successful webbed environment will appear to have smooth <BR>transitions as content changes and provide easy to use features, <BR><!-- Link 2 --><BR><A HREF="#" ONMOUSEOUT="popUp(event,'ht2')" <BR>ONMOUSEOVER="popUp(event,'ht2')"><BR>hypertext <BR></A><BR>, and navigation that is convenient but not overwhelming. <BR></p><BR><P>A webbed environment is a Web site that does not frustrate the user with <BR>long download times, or confuse them with <BR><!-- Link 1 --><BR><A HREF="#" ONMOUSEOUT=" popUp(event,'ht1')" <BR>ONMOUSEOVER="popUp(event,'ht1')"><BR>millions of navigation points at once <BR></A><BR>. Instead, a successful webbed environment will appear to have smooth <BR>transitions as content changes and provide easy to use features, <BR><!-- Link 2 --><BR><A HREF="#" ONMOUSEOUT="popUp(event,'ht2')" <BR>ONMOUSEOVER="popUp(event,'ht2')"><BR>hypertext <BR></A><BR>, and navigation that is convenient but not overwhelming. <BR></p><BR><P>A webbed environment is a Web site that does not frustrate the user with <BR>long download times, or confuse them with <BR><!-- Link 1 --><BR><A HREF="#" ONMOUSEOUT=" popUp(event,'ht1')" <BR>ONMOUSEOVER="popUp(event,'ht1')"><BR>millions of navigation points at once <BR></A><BR>. Instead, a successful webbed environment will appear to have smooth <BR>transitions as content changes and provide easy to use features, <BR><!-- Link 2 --><BR><A HREF="#" ONMOUSEOUT="popUp(event,'ht2')" <BR>ONMOUSEOVER="popUp(event,'ht2')"><BR>hypertext <BR></A><BR>, and navigation that is convenient but not overwhelming. <BR></p><BR><P>A webbed environment is a Web site that does not frustrate the user with <BR>long download times, or confuse them with <BR><!-- Link 1 --><BR><A HREF="#" ONMOUSEOUT=" popUp(event,'ht1')" <BR>ONMOUSEOVER="popUp(event,'ht1')"><BR>millions of navigation points at once <BR></A><BR>. Instead, a successful webbed environment will appear to have smooth <BR>transitions as content changes and provide easy to use features, <BR><!-- Link 2 --><BR><A HREF="#" ONMOUSEOUT="popUp(event,'ht2')" <BR>ONMOUSEOVER="popUp(event,'ht2')"><BR>hypertext <BR></A><BR>, and navigation that is convenient but not overwhelming. <BR></p><BR><P>A webbed environment is a Web site that does not frustrate the user with <BR>long download times, or confuse them with <BR><!-- Link 1 --><BR><A HREF="#" ONMOUSEOUT=" popUp(event,'ht1')" <BR>ONMOUSEOVER="popUp(event,'ht1')"><BR>millions of navigation points at once <BR></A><BR>. Instead, a successful webbed environment will appear to have smooth <BR>transitions as content changes and provide easy to use features, <BR><!-- Link 2 --><BR><A HREF="#" ONMOUSEOUT="popUp(event,'ht2')" <BR>ONMOUSEOVER="popUp(event,'ht2')"><BR>hypertext <BR></A><BR>, and navigation that is convenient but not overwhelming. <BR></p><BR><P>A webbed environment is a Web site that does not frustrate the user with <BR>long download times, or confuse them with <BR><!-- Link 1 --><BR><A HREF="#" ONMOUSEOUT=" popUp(event,'ht1')" <BR>ONMOUSEOVER="popUp(event,'ht1')"><BR>millions of navigation points at once <BR></A><BR>. Instead, a successful webbed environment will appear to have smooth <BR>transitions as content changes and provide easy to use features, <BR><!-- Link 2 --><BR><A HREF="#" ONMOUSEOUT="popUp(event,'ht2')" <BR>ONMOUSEOVER="popUp(event,'ht2')"><BR>hypertext <BR></A><BR>, and navigation that is convenient but not overwhelming. <BR></p><BR><P>A webbed environment is a Web site that does not frustrate the user with <BR>long download times, or confuse them with <BR><!-- Link 1 --><BR><A HREF="#" ONMOUSEOUT=" popUp(event,'ht1')" <BR>ONMOUSEOVER="popUp(event,'ht1')"><BR>millions of navigation points at once <BR></A><BR>. Instead, a successful webbed environment will appear to have smooth <BR>transitions as content changes and provide easy to use features, <BR><!-- Link 2 --><BR><A HREF="#" ONMOUSEOUT="popUp(event,'ht2')" <BR>ONMOUSEOVER="popUp(event,'ht2')"><BR>hypertext <BR></A><BR>, and navigation that is convenient but not overwhelming. <BR></p><BR><P>A webbed environment is a Web site that does not frustrate the user with <BR>long download times, or confuse them with <BR><!-- Link 1 --><BR><A HREF="#" ONMOUSEOUT=" popUp(event,'ht1')" <BR>ONMOUSEOVER="popUp(event,'ht1')"><BR>millions of navigation points at once <BR></A><BR>. Instead, a successful webbed environment will appear to have smooth <BR>transitions as content changes and provide easy to use features, <BR><!-- Link 2 --><BR><A HREF="#" ONMOUSEOUT="popUp(event,'ht2')" <BR>ONMOUSEOVER="popUp(event,'ht2')"><BR>hypertext <BR></A><BR>, and navigation that is convenient but not overwhelming. <BR></p><BR><P>A webbed environment is a Web site that does not frustrate the user with <BR>long download times, or confuse them with <BR><!-- Link 1 --><BR><A HREF="#" ONMOUSEOUT=" popUp(event,'ht1')" <BR>ONMOUSEOVER="popUp(event,'ht1')"><BR>millions of navigation points at once <BR></A><BR>. Instead, a successful webbed environment will appear to have smooth <BR>transitions as content changes and provide easy to use features, <BR><!-- Link 2 --><BR><A HREF="#" ONMOUSEOUT="popUp(event,'ht2')" <BR>ONMOUSEOVER="popUp(event,'ht2')"><BR>hypertext <BR></A><BR>, and navigation that is convenient but not overwhelming. <BR></p><BR><P>A webbed environment is a Web site that does not frustrate the user with <BR>long download times, or confuse them with <BR><!-- Link 1 --><BR><A HREF="#" ONMOUSEOUT=" popUp(event,'ht1')" <BR>ONMOUSEOVER="popUp(event,'ht1')"><BR>millions of navigation points at once <BR></A><BR>. Instead, a successful webbed environment will appear to have smooth <BR>transitions as content changes and provide easy to use features, <BR><!-- Link 2 --><BR><A HREF="#" ONMOUSEOUT="popUp(event,'ht2')" <BR>ONMOUSEOVER="popUp(event,'ht2')"><BR>hypertext <BR></A><BR>, and navigation that is convenient but not overwhelming. <BR></p><BR><P>A webbed environment is a Web site that does not frustrate the user with <BR>long download times, or confuse them with <BR><!-- Link 1 --><BR><A HREF="#" ONMOUSEOUT=" popUp(event,'ht1')" <BR>ONMOUSEOVER="popUp(event,'ht1')"><BR>millions of navigation points at once <BR></A><BR>. Instead, a successful webbed environment will appear to have smooth <BR>transitions as content changes and provide easy to use features, <BR><!-- Link 2 --><BR><A HREF="#" ONMOUSEOUT="popUp(event,'ht2')" <BR>ONMOUSEOVER="popUp(event,'ht2')"><BR>hypertext <BR></A><BR>, and navigation that is convenient but not overwhelming. <BR></p></P>
<P> </body></P>
<P></html></P>
<P></blockquote></P>
<P>findDom.js File Code:</P>
<P><blockquote></P>
<P>var isDHTML = 0;<BR>var isID = 0;<BR>var isAll = 0;<BR>var isLayers = 0;</P>
<P><BR>if (document.getElementById) {isID = 1; isDHTML = 1;}<BR>else {<BR>if (document.all) {isAll = 1; isDHTML = 1;}<BR>else {<BR>browserVersion = parseInt(navigator.appVersion);<BR>if ((navigator.appName.indexOf('Netscape') != -1) && (browserVersion == 4)) {isLayers = 1; isDHTML = 1;}<BR>}}</P>
<P>function findDOM(objectID,withStyle) {<BR> if (withStyle == 1) {<BR> if (isID) { return (document.getElementById(objectID).style) ; }<BR> else { <BR> if (isAll) { return (document.all[objectID].style); }<BR> else {<BR> if (isLayers) { return (document.layers[objectID]); }<BR> };}<BR> }<BR> else {<BR> if (isID) { return (document.getElementById(objectID)) ; }<BR> else { <BR> if (isAll) { return (document.all[objectID]); }<BR> else {<BR> if (isLayers) { return (document.layers[objectID]); }<BR> };}<BR> }<BR>}</P>
<P></blockquote><BR></P>
<P>This is an example of CSS usage i pulled from somewhere. Possibly hotscripts.com, or maybe one of the PeachPit press companion web sites.</P>
<P> </P>
<P>Cutter</P></DIV></div><br clear=all><hr>Get your FREE download of MSN Explorer at <a href='http://go.msn.com/bql/hmtag_itl_EN.asp'>http://explorer.msn.com</a><br></html>