How to change the color of all links on mouseover.

[hendsome]

The link and visited properties of the links on my web pages are the same color as text (black), while hover and active properties are green.

In order to help the user get the overall picture of the page links, I need JavaScript that will use an area or text (e.g. "Show all the links on this page.") to colorize (e.g. in blue) all the links on the page on mouseover, and return the regular link properties on mouse-out.

[hsriat]

document.getElementById('show_all_links').onmouseover = function() {
    var a = document.getElementsByTagName('a');
    for (var i = 0; i <a.length; i++) if (a[i].href != "") a[i].style.color = 'blue';
}

.... similarly for onmouseout.

[Dormilich]

a more CSS oriented solution could work like the following:
prepare the highlight of all <a> by a container class (which you don’t set by default).

.highlight a {
    /* your highlight CSS */
}

with onmouseover, you set this class name to the document body, so that the CSS kicks in.

// execute on mouseover
function enlighten()
{
    document.body.className = "highlight";
}

undo this on mouseout.

[hendsome]

document.getElementById('show_all_links').onmouseover = function() {
    var a = document.getElementsByTagName('a');
    for (var i = 0; i <a.length; i++) if (a[i].href != "") a[i].style.color = 'blue';
}

.... similarly for onmouseout.

Hi hsriat,

Thanks!
This works fine.

In case there are some pre-styled links on the web page besides the black links, would it be possible to make the function scan the page, pick up and store all of the original link styles (for link, visited, hover, active states), highlight all the links on the page in a desired color (e.g. blue), and restore all the original link styles on mouseout?

Regards,

Hendsome

[hendsome]

a more CSS oriented solution could work like the following:
prepare the highlight of all <a> by a container class (which you don’t set by default).

.highlight a {
    /* your highlight CSS */
}

with onmouseover, you set this class name to the document body, so that the CSS kicks in.

// execute on mouseover
function enlighten()
{
    document.body.className = "highlight";
}

undo this on mouseout.

Hi Dormilich,

Your suggestion looks cool, and I suppose it would preserve the pre-styled links on the page, but it only highlights the line that is used for mouseover.

Regards,

Hendsome

[Dormilich]

but it only highlights the line that is used for mouseover.

where did you apply the class to?

[hendsome]

where did you apply the class to?

<style type="text/css">
.highlight a {
	color: #039;
}
</style>
<body>
<script language="JavaScript">
function enlighten()
{
    document.body.className = "highlight";
}
function normal()
{
    document.body.className = "";
}
</script>
<a href="#" onMouseOver="enlighten();" onMouseOut="normal()">Mouseover to see the links on this page.</a>
...
</body>

[Dormilich]

well, it works for me …

[hendsome]

well, it works for me …

I tested it again. It works all right.
Thanks.