Surely lots and lots of other ways to do this, but this scheme is actually very efficient. Ensures that the images will all be there when the mouse is used, for example.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<style>
div#GHOLD { position: relative; width: 325px; height: 204px;
background-color: black; font-family: arial, helvetica, sans-serif; font-size: 16px; font-weight: bold;
}
div.gname { position: absolute; top: 7px; left: 0px; height: 23px; text-align: center;
background-color: blue; color: orange; border: solid white 1px; padding-top: 4px;
z-index: 20;
}
div.bname { position: absolute; top: 3px; left: 0px; height: 27px; text-align: center;
background-color: black; color: white; border: solid white 1px; padding-top: 4px;
border-bottom: solid black 1px;
z-index: 25;
}
div.ihold { position: absolute; top: 36px; left: 0px;
width: 325px; height: 168px; z-index: 10;
}
img.bgraph { border: none; width: 325px; height: 168px; z-index: 10; }
</style>
<script>
function graphShow(which)
{
var ghold = document.getElementById("GHOLD");
var gdivs = ghold.getElementsByTagName("DIV");
gdivs[0].className = gdivs[1].className = gdivs[2].className = "gname";
gdivs[which].className = "bname";
gdivs[3].style.zIndex = gdivs[4].style.zIndex = gdivs[5].style.zIndex = 10;
gdivs[which+3].style.zIndex = 15;
}
</script>
</head>
<body>
<div id="GHOLD">
<div class="bname" style="width: 135px;" onmouseover="graphShow(0);">
AMERICAS
</div>
<div class="gname" style="left: 135px; width: 75px;" onmouseover="graphShow(1);">
ASIA
</div>
<div class="gname" style="left: 210px; width: 113px;" onmouseover="graphShow(2);">
EUROPE
</div>
<div class="ihold" style="z-index: 15;">
<img class="bgraph" src="http://images.bloomberg.com/r06/homepage/HP_INDU.png" alt="DOW chart">
</div>
<div class="ihold">
<img class="bgraph" src="http://images.bloomberg.com/r06/homepage/HP_NKY.png" alt="NIKKEI chart" style="z-index: 10;">
</div>
<div class="ihold">
<img class="bgraph" src="http://images.bloomberg.com/r06/homepage/HP_UKX.png" alt="STOXX chart" style="z-index: 10;">
</div>
</div>
</body>
</html>
Only tested in MSIE 6 and FireFox. Should be checked in other browsers.