Forum Moderators: open
<script language="javascript">
function initalt()
{
altback="white"
altborder="CEDEE7"
altfont="tahoma" // Alt-Message Font
altfontcolor="203C70"// Alt-Message Font color
altfontsize="1" // Alt-Message Font Size
altoffx=10 // Alt-Message horizontal offset from mouse-position
altoffy=15 // Alt-Message vertical offset from mouse-position
altwidth=120 // Alt-Message width, will be expanded by your message
altheight=0 // Alt-Message height, will be expanded by your message
// end of Variables
document.onmousedown = sniff
document.onmousemove = sniff
document.onmouseup = sniff
if (document.layers)
{ //NS
document.captureEvents(Event.MOUSEDOWN ¦ Event.MOUSEMOVE ¦ Event.MOUSEUP)
document.layers['altmessage'] = new Layer(altwidth)
document.layers['altmessage'].left = 0
document.layers['altmessage'].top = 0
document.layers['altmessage'].height = altheight
document.layers['altmessage'].bgColor = altback
document.layers['altmessage'].visibility = "hidden"
document.layers['altmessage'].borderStyle = "solid"
document.layers['altmessage'].borderColor = altborder
document.layers['altmessage'].borderWidth = 1
}
else if (document.all)
{ //IE
document.body.insertAdjacentHTML("BeforeEnd",'<DIV ID="altmessage" STYLE="z-index:200;position:absolute;width:'+altwidth+';height:'+altheight+';left:0;top:0;visibility:hidden;background:'+altback+';border-style:solid;border-width:1;border-color:'+altborder+'"></DIV>')
}
}
function sniff(e)
{
// GETS Mouseposition
if (document.layers)
{
var mousex=e.pageX; var mousey=e.pageY;document.layers['altmessage'].left = mousex+altoffx;document.layers['altmessage'].top = mousey+altoffy
}
else if (document.all)
{
var mousex=event.x; var mousey=event.y+document.body.scrollTop;altmessage.style.top=mousey+altoffy;altmessage.style.left=mousex+altoffx
}
}
function doalt(message)
{
//The main routine
content='<font face="'+altfont+'" size="'+altfontsize+'" color="'+altfontcolor+'">'+message+'</FONT>'
if (document.layers)
{
with (document.layers['altmessage'].document)
{
open()
write(content)
close()
}
document.layers['altmessage'].visibility = "show"
}
else if (document.all)
{
document.all['altmessage'].innerHTML = content
document.all['altmessage'].style.visibility = "visible"
}
}
function realt()
{
if (document.layers)document.layers['altmessage'].visibility = "hidden";
else if (document.all) document.all['altmessage'].style.visibility = "hidden";
}
</script>
<!-- END OF HEAD -->
</head>
<!-- NOTE THE ONLOAD COMMAND IN THE BODY TAG -->
<BODY onload="initalt()">
The URL below to be placed as required with in body tags.<br /> You can use it for image links also.
<!-- THE NEXT LINE SHOWS THE WAY A LINK SHOULD BE FORMATTED BOTH FOR TEXT OR FOR AN IMAGE -->
<a href="http://www.yoursite.html" onmouseover="doalt('your message')" onmouseout="realt()">This is a text Link example</A><br />
<br />
<a href="http://www.yoursite.html" onmouseover="doalt('So this can be a massive long message')" onmouseout="realt()"><img src="http://www.yoursite.com/pics/logo.gif" border="0"></A>
</body>
</html>
Thank you for your help.
Reference the objects you want to control using standard DOM syntax, instead of MSIE/NN-specific syntax.
Position your containers using stylesheet rules, so NN/IE/Moz/Opera can relate to them as objects, and stick with DIVs and SPANs, instead of layers.
<div id="layer1" name="layer1" style="position:relative;visibility:hidden">Text goes here</div>
...
document["layer1"].visibility=visible;
...
etc.
