netscape-hover

LevSelector.com

New York

home > Netscape Hover

FNetscape Hover Effect
Look also at Javascript and Graphics pages.

• www.teaink.com/netscapehover.htm - how to make HOVER links in Netscape (using Javascript)

Here are the details (as of December, 2000):

The script operates on the groups of links. To create a group add

onMouseOver="hoverStyle('internal style name')"

to the links and create group style definition in the styleHr array. Array format:

['internal style name', 'CSS class name', y-correction, true/false]

First line must be kept intact.
Style of the "all unmarked" links must be defined on the second line.
New groups must be defined on the lines three and below.
To enable/disable hovering on the group of links set it's style true/false switch.
To upgrade the old naming scheme either replace the numbers with the strings or set the internal style names to the numbers in quotes.

1) Paste this into the somename.js file

// Netscape Hover v1.3
// Copyright © 2000 Dmitry Kirillov. All rights reserved
// http://www.teaink.com/netscapehover.htm
function HoverBoxObject() {
this.srcX=1;
this.srcY=1;
this.srcX2=0;
this.srcY2=0;
this.styleHr= [
[,,,],
['all', 'CSS class for all', 0, true],
['menu', 'CSS class for menus', 0, true]
];
}
var hrBox = new HoverBoxObject();
function overHover(e) {
var i, tx, ty, ttext, thref, linkHr, layerHr, tstyle, temp, tstrstyle; var styler=/hoverStyle[\x28]"*([\w]+)"*[\x29]/i;
if (e.target.href && e.target.text!=null && document.linkhover) {
tstyle=0; tstrstyle=''; if (hrBox.styleHr[1][0]=='all' && hrBox.styleHr[1][3]) tstyle=1;
if (e.target.onmouseover) {
temp=String(e.target.onmouseover); temp=temp.match(styler);
if (temp!=null) {
tstrstyle=temp[1];
for (i=1;i<hrBox.styleHr.length;i+=1) {
if (hrBox.styleHr[i][0]==tstrstyle && hrBox.styleHr[i][3]) tstyle=i;
}
if (tstyle==1) tstyle=0;
}}
layerHr=document.linkhover;
if ((e.target.y!=0 || (e.target.y==0 && layerHr.visibility=="hide")) && tstyle) {
tx=e.target.x+(e.pageX-e.layerX); ty=e.target.y+(e.pageY-e.layerY)+hrBox.styleHr[tstyle][2];
ttext=e.target.text; ttext=ttext.replace(/\s/g, " "); thref=e.target.href;
layerHr.left=tx; layerHr.top=ty;
layerHr.document.write('<a href="'+thref+'" class="'+hrBox.styleHr[tstyle][1]+'">'+ttext+'</a>');
layerHr.document.close();
linkHr=layerHr.document.links[0];
if(e.target.target!=null) linkHr.target=e.target.target;
linkHr.onmouseout=e.target.onmouseout; linkHr.onmousedown=e.target.onmousedown;
linkHr.onmouseup=e.target.onmouseup; linkHr.onclick=e.target.onclick;
linkHr.ondblclick=e.target.ondblclick;
linkHr.lid='hover';
hrBox.srcX=tx; hrBox.srcY=ty;
hrBox.srcX2=tx+layerHr.clip.width-1; hrBox.srcY2=ty+layerHr.clip.height-1;
layerHr.visibility="show";
}}
routeEvent(e);
return;
}
function outHover(e) {
var tx, ty, layerHr;
if (e.target.href && e.target.text!=null && document.linkhover) {
layerHr=document.linkhover;
if (e.target.lid && e.target.lid=='hover') {
layerHr.visibility="hide";
routeEvent(e);
}
else {
tx=e.pageX; ty=e.pageY;
if ((tx<hrBox.srcX) || (ty<hrBox.srcY) || (hrBox.srcX2<tx) || (hrBox.srcY2<ty)) {
layerHr.visibility="hide";
routeEvent(e);
}}
}
else routeEvent(e);
return;
}
if (ns4) {
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
document.onMouseOver=overHover;
document.onMouseOut=outHover;
}

2) Paste the following just below the <body> tag


<layer id='linkhover' z-index=100 visibility='hide'></layer>
<SCRIPT LANGUAGE="JavaScript1.2" TYPE="text/javascript">

</SCRIPT>