Tab Control using hotmap

It is very simple to implement tab control using hotmap.It is all with html and a bit of javascript. Refer to the images shown in Tab control without postback.
, where on clicking each tab the color of that tab had to change.

The image map was something like this,

<img id="imgHotmap" src="images/arrows_step_1.gif" width="342" height="34" border="0" usemap="#steps" />

<map name="steps" id="steps">

<area shape="poly" coords="253,1,330,1,342,17,331,34,252,34,264,17,254,3" href="#" alt="step4" onclick="changeImage(4);" />

<area shape="poly" coords="168,1,245,1,257,17,246,34,167,34,179,17,169,3" href="#" alt="step3" onclick="changeImage(3);" />

<area shape="poly" coords="0,0,77,0,88,16,77,32,0,32,1,1" href="#" alt="step1" onclick="changeImage(1);" />

<area shape="poly" coords="84,0,161,0,173,16,162,33,83,33,95,16,85,2" href="#" alt="step2" onclick="changeImage(2);" />

</map>

All, we did was to invoke a javascript for each area of the map i.e for each tab.
The job of the javascript was simple, it changed the image of “imgHotmap”.

function changeImage(opt)
{
if(opt == 1)
{
document.getElementById(‘imgHotmap’).src = ‘/_layouts/images/novartis/arrows_step_1.gif’;

}
if(opt == 2)
{
document.getElementById(‘imgHotmap’).src = ‘/_layouts/images/novartis/arrows_step_2.gif’;
}
if(opt == 3)
{
document.getElementById(‘imgHotmap’).src = ‘/_layouts/images/novartis/arrows_step_3.gif’;
}
if(opt == 4)
{
document.getElementById(‘imgHotmap’).src = ‘/_layouts/images/novartis/arrows_step_4.gif’;

}
}