Last updated on February 22nd, 2022 at 09:26 am
Change hyperlink color using Javascript [Dancing Links]
This tutorial will show you how to Dynamically Change hyperlink colors on a website using javascript. This script will create links with different colors [dancing links] once the page is loaded.
<title>Dancing links using Javascript</title>
<body onload="changeColor()">
<script LANGUAGE="JavaScript">
function initArray() {
for (var i = 0; i < initArray.arguments.length; i++) {
this[i] = initArray.arguments[i];
}
this.length = initArray.arguments.length;
}
var colors = new initArray(
"red",
"blue",
"green",
"purple",
"black",
"tan",
"orange");
delay = .7;
link = 1;
vlink = 3;
function changeColor() {
link = (link+1)%colors.length;
vlink = (vlink+1)%colors.length;
document.getElementById("first").style.color=colors[link];
document.getElementById("second").style.color=colors[vlink];
setTimeout("changeColor()",delay*1000);
}
// End -->
</script>
<h1><a id='first' href="https://mistonline.in">This is a first link</a></h1>
<h1><a id='second' href="https://mistonline.in">This is a second link</a></h1>
As shown above I have created two hyperlinks with id first and second, all the magic happens there.
document.getElementById("first").style.color=colors[link];
document.getElementById("second").style.color=colors[vlink];
Note: Some chrome versions won’t support this script. Fixed and now it is working fine on all major web browsers.
admin