Q430 How can I highlight text links in table cells?

You are here: irt.org | FAQ | DHTML | Q430 [ previous next ]

In Internet Explorer 4+ and Netscape Navigator 6+ this is easy. In Netscape Navigator 4 it requires two "Layers" for each piece of text within another inline "Layer", e.g.:

<ILAYER>  <LAYER></LAYER>  <LAYER></LAYER>  </ILAYER>

Try:

<html>
<head>

<script language="JavaScript"><!--
var no = 0;

function mover(object,title,item) {
    if (document.getElementById) {
        document.getElementById('object').style.color = "red";
    }
    else if (document.all) {
        eval(object + '.style.color = "red"');
    }
    else if (document.layers) {
        for (var i=0; i<no; i++) mout('link'+i);
        var objecta = object + 'a', objectb = object + 'b', objectc = object + 'c';
        document.layers[objectc].document.layers[objectb].moveBelow(document.layers[objectc].document.layers[objecta]);
        document.layers[objectc].document.layers[objectb].visibility="hide";
        document.layers[objectc].document.layers[objecta].visibility="show";
    }
    status = title;
    return true;
}

function mout(object) {
    if (document.getElementById) {
        document.getElementById('object').style.color = "blue";
    }
    else if (document.all) {
        eval(object + '.style.color = "blue"');
    }
    else if (document.layers) {
        var objecta = object + 'a', objectb = object + 'b', objectc = object + 'c';
        document.layers[objectc].document.layers[objecta].moveBelow(document.layers[objectc].document.layers[objectb]);
        document.layers[objectc].document.layers[objecta].visibility="hide";
        document.layers[objectc].document.layers[objectb].visibility="show";
    }
    status = '';
    return true;
}

function dLink(href,where,text,title) {
    output += '<td><B>';
    if (document.all)
        output += '[<a href="'+href+'" ' + where + ' title="'+title+'" onMouseout="return mout(\'link'+no+'\')" onMouseover="return mover(\'link'+no+'\',\''+title+'\')" id="link'+no+'">'+text+'<\/a>]';
    else if (document.layers) {
        output += '<ilayer name="link'+no+'c"><layer name="link'+no+'a" visibility="hide">[<a href="'+href+'" ' + where + ' onMouseover="status=\''+title+'\';return true" onMouseout="return mout(\'link'+no+'\')" CLASS="different">'+text+'<\/a>]<\/layer>';
        output += '<layer name="link'+no+'b">[<a href="'+href+'" ' + where + ' onMouseover="return mover(\'link'+no+'\',\''+title+'\','+no+')" class="normal">'+text+'<\/a>]<\/layer><\/ilayer>';
    }
    else {
        output += '[<a href="'+href+'" ' + where + ' title="'+title+'" onMouseover="status=\''+title+'\';return true" onMouseout="status=\'\';return true">'+text+'<\/a>]';
    }
    output += '<\/td>'
    no+=1;
}
//--></script>

<style type="text/javascript"><!--
    classes.different.A.color = 'red';
    classes.different.A.textDecoration = 'none';
    classes.normal.A.color = 'blue';
    classes.normal.A.textDecoration = 'none';
//--></style>

<style type="text/css"><!--
A         { font-family: Arial, Helvetica; }
A:link    { font-family: Arial, Helvetica; text-decoration: none; color: blue}
A:visited { font-family: Arial, Helvetica; text-decoration: none; color: blue}
A:active  { font-family: Arial, Helvetica; text-decoration: none; color: red}
//--></style>

</head>

<body bgcolor="white" LINK="blue" VLINK="red" ALINK="red" TEXT="black">

<script language="JavaScript"><!--
var output = '';
output += '<center><table><tr>';
dLink('http://www.irt.org/','target="_top"','irt.org','Homepage at irt.org');
dLink('http://www.irt.org/articles.html','target="_top"','articles','Articles at irt.org');
dLink('http://www.irt.org/search.htm','target="_top"','search','Search irt.org');
dLink('http://www.irt.org/faq.html','target="_top"','faqs','Frequently Asked Questions at irt.org');
output += '<\/tr><\/table><\/center>';
document.write(output);
//--></script>

</body></html>