You are here: irt.org | FAQ | JavaScript | Link | Q120 [ previous next ]
The following works in Netscape 4 and Explorer 4:
<html>
<head>
<script language="JavaScript"><!--
var dhtml = '', no = 0;
if (navigator.appVersion.charAt(0) == "4") {
if (navigator.appVersion.indexOf("MSIE") != -1)
dhtml = 'IE';
else
dhtml = 'NN';
}
function mover(object) {
if (dhtml == 'IE') {
eval(object + '.style.color = "orange"');
eval(object + '.style.fontSize = "110%"');
}
else if (dhtml == 'NN') {
eval('document.layers["' + object + 'b"].moveBelow(document.layers["' + object + 'a"])');
eval('document.layers["' + object + 'b"].visibility="hide"');
eval('document.layers["' + object + 'a"].visibility="show"');
}
}
function mout(object) {
if (dhtml == 'IE') {
eval(object + '.style.color = "blue"');
eval(object + '.style.fontSize = "100%"');
}
else if (dhtml == 'NN') {
eval('document.layers["' + object + 'a"].moveBelow(document.layers["' + object + 'b"])');
eval('document.layers["' + object + 'a"].visibility="hide"');
eval('document.layers["' + object + 'b"].visibility="show"');
}
}
function dLink(href,text) {
if (dhtml == 'IE')
document.write('<a href="'+href+'" onMouseOut="mout(\'link'+no+'\')" onMouseOver="mover(\'link'+no+'\')" id="link'+no+'">'+text+'<\/a>');
else if (dhtml == 'NN')
document.write('<layer name="link'+no+'a" visibility="hide"><a href="'+href+'" onMouseOut="mout(\'link'+no+'\')" class="different">'+text+'<\/a><\/layer><layer name="link'+no+'b"><a href="'+href+'" onMouseOver="mover(\'link'+no+'\')" class="normal">'+text+'<\/a><\/layer>');
else
document.write('<a href="'+href+'">'+text+'<\/a>');
document.write('<br>');
no+=1;
}
//--></script>
<style type="text/javascript"><!--
classes.different.A.color = "orange";
classes.different.A.fontSize = "110%";
classes.normal.A.color = "blue";
//--></style>
</head>
<body>
<script>
dLink('who.html','Dynamic Generic HTML');
dLink('what.html','Another Dynamic Generic HTML');
dLink('where.html','Yet Another');
dLink('when.htm','The Last');
</script>
</body>
</html>m.chung writes:
Doesn't work too well, sometimes it leaves items highlighted when you move over them real quick. However, using zIndex rather than hide and show works :
function mover(object) {
if (ie4) {
eval(object + '.className = "highlight"');
} else if (ns4) {
eval('document.layers["' + object + 'b"].zIndex=0');
eval('document.layers["' + object + 'a"].zIndex=1');
}
}
function mout(object) {
if (ie4) {
eval(object + '.className = "normal"');
} else if (ns4) {
eval('document.layers["' + object + 'a"].zIndex=0');
eval('document.layers["' + object + 'b"].zIndex=1');
}
}
function dLink(href, text, oname) {
if (ie4) {
document.write('<a href="'+href+'" onMouseOut="mout(\'' + oname + '\')" onMouseOver="mover(\''+ oname +'\')" id="' + oname + '" class="normal">'+text+'</a>');
} else if (ns4) {
document.write('<layer left="5" name="' + oname + 'a" z-index=0><a href="'+href+'" onMouseOut="mout(\'' + oname + '\')" onMouseOver="mover(\'' + oname + '\')" class="highlight">'+text+'</a></layer><layer left="5" name="' + oname + 'b" z-index=1><a href="'+href+'" onMouseOut="mout(\'' + oname + '\')" onMouseOver="mover(\'' + oname + '\')" class="normal">'+text+'<\a></layer>');
} else {
document.write('<a href="'+href+'">'+text+'</a>');
}
document.write('<br>');
}