For example, the A, when the mouse is over it, should reveal the "ARTISTS" image. But now I realize it may not be possible.
Max
Maybe it's possible, see this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body {
margin:0;
padding:0;
height:100%;
}
#container{width:600px;border:3px double #222;margin:20px auto;height:500px;text-align:center;}
span{padding:10px;cursor:pointer;}
#show{width:500px; margin:10px auto;border:1px solid #999;height:200px;padding:10px;font-family:Tahoma;}
#show img{border:1px solid #00f;padding:5px;}
</style>
<script type="text/javascript">
window.onload = function()
{
var a=document.getElementById('a');
var r=document.getElementById('r');
var t=document.getElementById('t');
var s=document.getElementById('s');
var h=document.getElementById('h');
var o=document.getElementById('o');
var l=document.getElementById('l');
var e=document.getElementById('e');
var show = document.getElementById('show');
a.onclick = function()
{
show.innerHTML ='<img src="http://tbn0.google.com/images?q=tbn:viGj4CFryp73JM:http://blog.seattlepi.nwsource"><br/><br/>Arts Image';
}
r.onclick = function()
{
show.innerHTML ='<img src="http://tbn0.google.com/images?q=tbn:phcxSOfWf1wOxM:http://lh3.google.com/_LLUdp7YIK2A"><br/><br/>"R" Image';
}
t.onclick = function()
{
show.innerHTML ='<img src="http://tbn0.google.com/images?q=tbn:dwCa2dB1WpVmOM:http://www.wallables.com"><br/><br/>"T" Image';
}
s.onclick = function()
{
show.innerHTML ='<img src="http://tbn0.google.com/images?q=tbn:Jcoil0bgIwRjuM:http://www.printactivities.com/Mazes/LetterMazes/Letter_s_Small.gif"><br/><br/>"S" Image';
}
h.onclick = function()
{
show.innerHTML ='<img src="http://tbn0.google.com/images?q=tbn:QNk65o2ZARH3tM:http://home.iae.nl/users/"><br/><br/>"H" Image';
}
o.onclick = function()
{
show.innerHTML ='<img src="http://tbn0.google.com/images?q=tbn:ouYFJKzq31jVcM:http://www.pewterkingdom.com/LastingExpressions/LetterO.jpg"><br/><br/>"O" Image';
}
l.onclick = function()
{
show.innerHTML ='<img src="http://tbn0.google.com/images?q=tbn:RvJeWtGLo2ZrRM:http://z.about.com/d/deafness"><br/><br/>"L" Image';
}
e.onclick = function()
{
show.innerHTML ='<img src="http://tbn0.google.com/images?q=tbn:wIVkUD_8SknQYM:http://www.biblepicturegallery"><br/><br/>"E" Image';
}
}
</script>
</head>
<body>
<div id="container">
<img src="http://www.theartshole.com/jpgs/artsholenav.jpg" title="Artshole Image" />
<br/>
<span id="a">A</span>
<span id="r">R</span>
<span id="t">T</span>
<span id="s">S</span>
<span id="h">H</span>
<span id="o">O</span>
<span id="l">L</span>
<span id="e">E</span>
<div id="show"> </div>
</div>
</body>
</html>
See if it helps ;)