Colored Links Demo

In reponse to a post on the Webmaster Talk Forum requesting information on generating a random link with random colored letters.

This is a variation on the post by Chris Hirst. I decided to take an object based approach.

Show Coloured Link

Click to show a random link

The Javascript

The Javascript consists of three components, the definition of a Link object, the RandomColouredLinks object to do all the work, and the initialization.

The Link object simply defines an object to hold a url and the link text. The initialization bit (at the bottom) creates an array of Link objects and passes them to the init routine of the RandomColouredLinks object.

TODO: // Finish the description of the code

Source


var Link = function(text,url){
    this.text = text;
    this.url = url;
}

var RandomColouredLinks = {
    colours : new Array("000000","666633","FF0000","CC0099","3300FF",
            "CCFF00","00FF33","FF9900","CC99FF","0000FF","FF33FF",
            "333399","FF99CC","66FFFF","3366FF","CCCC99","009999"),
    links : new Array(
    ),
    init : function (links){
        this.links = links;
    },
    getRandomColour : function(){
        var n = this.colours.length;
        return "#" + this.colours[( Math.floor ( Math.random ( ) * n) )];
    },
    getRandomLink : function () {
        var n = this.links.length;
        return this.links[( Math.floor ( Math.random ( ) * n ))];
    },
    showLink : function(nodeId) {
        var element = document.getElementById(nodeId);
        var link = this.getRandomLink();
        var anchor = document.createElement("a");
        anchor.setAttribute("href", "http://"+link.url);
        for(var i = 0; i < link.text.length; i++){
            anchor.appendChild(this.colourLetter(link.text.charAt(i)));
        }
        if(element.childNodes[0]){
            element.replaceChild(anchor,element.childNodes[0]);
        }else{
            element.appendChild(anchor);
        }
    },
    colourLetter : function (letter){
        var span = document.createElement("span");
        span.appendChild(document.createTextNode(letter));
        span.style.cssText = "color:"+this.getRandomColour();
        span.setAttribute("style","color:"+this.getRandomColour());
        return span;
    }
};
RandomColouredLinks.init( new Array(
    new Link("Google" , "www.google.com"),
    new Link("C and S Design" , "www.candsdesign.co.uk"),
    new Link("W3Schools" , "www.w3schools.com"),
    new Link("Webmaster Talk" , "www.webmaster-talk.com"),
    new Link("DevGuru" , "www.devguru.com"),
    new Link("We Love CSS" , "www.welovecss.com"),
    new Link("ASP 101" , "www.asp101.com"),
    new Link("CSS ZenGarden" , "www.csszengarden.com"),
    new Link("CSS Play","www.cssplay.co.uk")
));

HTML to activate link

Source

 
<h2 id="text" class="italic">Show Coloured Link</h2>
<div id="colouredlink" > </div>
<form action="#">
<label for="lkbtn">Click to show a random link</label>
<input type="button" id="lkbtn" value="Show Link"
	onclick="RandomColouredLinks.showLink('colouredlink');" />
</form>

Questions, comments, insults? Post a reply to the original posting or send an email to feedback@willcode4beer.com.



Sponsors:

About willCode4Beer