Using HTML attributes in creative ways with JavaScript.

In HTML, a link could look like this:
<a class="myLink" href="some_page.html">Go to the page </a>

It is well understood that when you click that link, the browser goes out and looks for 'some_page.html', requests it, and loads.

It is also true though, that the link fires a JavaScript 'mouseclick' event when it is clicked. If this event calls a function that returns a false value, the link is not followed at all. If you understand a link as just something to bind a "click handler" to, then you can modify your thinking about the href tag slightly, and use it as an arbitrary attribute.

Here's what I mean: Suppose we have 4 links that are formatted as such:
<a href="blue"></a>

The links are formatted as block level elements with a width and a height, so they appear as boxes. JavaScript is doing two things: first, it's setting the color of the div based on the value of the href attribute. Second, it defines a function that sets the color of the target div to this color when the link is clicked.

When you click on a link, the target div gets the link color. That works because the link href attribute contains the color of the target div.

It's open for discussion whether this is an appropriate technique or not.. Should href's always point to valid resources? I first saw this demo on a lynda.com that used it for an image selector. In that case the href pointed towards a larger source image to load into the target div.

In any case, here's the code:

<script type="text/javascript">
     $ = jQuery.noConflict();
     $(function() {
          $("div#attrDemo a").each(function() {
               var color = $(this).attr('href');
               // first color the source square
               $(this).css({background: color});
               //now set up a click handler so that the link changes the color of the target square
               $(this).click(function() {
                   $("#attrDemoTarget").css({background: color});
                   return false;
               });
           });
       }); 
</script>

<style type="text/css">
    #attrDemo a {
         display: block;
         width:50px;
         height:50px;
         border: solid black 1px;
         float:left;
         margin:5px;
     }
    #attrDemoTarget {
           width:100px;
            height:100px;
            border:solid black 1px;
            margin:20px;
       } 
</style>

<div id="attrDemo" >
<a href="blue"></a>
<a href="red"></a>
<a href="green"<</a>
<a href="yellow"></a>
</div>
<div id="attrDemoTarget"></div>