Here's the javascript version. Each BUTTON and corresponding IMG element must be in the same order in their respective HTML containers.
CSS
CODE
#container {
position: relative;
width: 500px;
height: 300px;
border: solid;
}
#items button.current {color: blue; background: lime;}
#a {
position: absolute;
top: 100px;
left: 100px;
display: none;
}
#b {
position: absolute;
bottom: 0;
right: 0;
display: none;
}
Javascript
CODE
window.addEventListener('load', function()
{
var icons=document.getElementById('icons');
var img=icons.getElementsByTagName('img');
var items=document.getElementById('items');
var button=items.getElementsByTagName('button');
for(var i=0; i<button.length; i++)
{
button[i].onclick=function()
{
// reset previously clicked button and icon
for(var j=0; j<img.length; j++)
{
button[j].disabled=false;
button[j].className='';
img[j].style.display='none';
}
// currently clicked button and icon
this.disabled=true;
this.className='current';
document.getElementById(this.dataset.item).style.display='inline';
}
}
}, false);
HTML:
CODE
<div id="container">
<img src="dog.jpg" width="500" height="300" alt="">
<div id="icons">
<img src="small.gif" width="20" height="20" alt="a" id="a">
<img src="small.gif" width="20" height="20" alt="b" id="b">
</div>
</div>
<ul id="items">
<li><button data-item="a">Item a</button></li>
<li><button data-item="b">Item b</button></li>
</ul>