Q804 How can I highlight text links when using onMouseover and open new windows when the text is clicked?

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

Try:

<HEAD>

<SCRIPT LANGUAGE="JavaScript"><!--
var no = 0;

function mover(object) {
    if (document.all) {
        eval(object + '.style.color = "orange"');
        eval(object + '.style.fontSize = "110%"');
    }
    else if (document.layers) {
        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 (document.all) {
        eval(object + '.style.color = "blue"');
        eval(object + '.style.fontSize = "100%"');
    }
    else if (document.layers) {
        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 (document.all)
        document.write('<A HREF="'+href+'" onMouseOut="mout(\'link'+no+'\')" onMouseOver="mover(\'link'+no+'\')" ID="link'+no+'">'+text+'<\/A>');
    else if (document.layers)
        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;
}
function myOpen(url) {
    myWindowHandle = window.open(url,'myWindowName','width=400,height=400');
}

//--></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('javascript:myOpen(\'who.html\')','Dynamic Generic HTML');
dLink('javascript:myOpen(\'what.html\')','Another Dynamic Generic HTML');
dLink('javascript:myOpen(\'where.html\')','Yet Another');
dLink('javascript:myOpen(\'when.htm\')','The Last');
</SCRIPT>

In Internet Explorer 4+ this can also be done using CSS and a standard href tag.

<head>
<style><!--
a:hover{color:red}
a{text-decoration:none}
//--></style>
</head>

<body>
<a href="#" onclick=window.open("YourUrl","NewWindow")>Open a new Window</a>
</body>