Вот решение, показанное на прямом JavaScript, а также jQuery.
Прямой JavaScript использует обработчики нажатий кнопок DOM0, что нормально, потому что они вызывают только одно событие. Обработчик загрузки для окна представляет собой большую проблему: у вас может быть только один на документ.
Как вы можете видеть, решение jQuery намного короче, но вам придется включить библиотеку jQuery. $( function(){} ) занимает место обработчика загрузки окна, но вы можете иметь столько, сколько захотите.
Изображения sector1.gif, sector2.gif и sector3.gif прозрачны, кроме видимых для них битов круга. Вы также можете использовать .png, но это не сработает в ie6 без некоторых настроек.
<!-- the markup -->
<div id="circle">
<div id="sector1"></div>
<div id="sector2"></div>
<div id="sector3"></div>
</div>
<input type="button" id="button1" value="Sector 1">
<input type="button" id="button2" value="Sector 2">
<input type="button" id="button3" value="Sector 3">
_
/* the style */
#circle{
width: 100px;
height 100px;
position: relative;
background: url( images/circle.gif );
}
#sector1, #sector1, #sector1 {
width: 100px;
height 100px;
top: 0;
left: 0;
position: absolute;
display: none;
}
#sector1 {
background: url( images/sector1.gif );
}
#sector2 {
background: url( images/sector2.gif );
}
#sector2 {
background: url( images/sector3.gif );
}
_
//basic javascript solution
window.onload = function() {
// get references to the buttons
var b1 = document.getElementById( 'button1' );
var b2 = document.getElementById( 'button2' );
var b3 = document.getElementById( 'button3' );
// get references to the sectors
var s1 = document.getElementById( 'button1' );
var s2 = document.getElementById( 'button2' );
var s3 = document.getElementById( 'button3' );
// add onclick events to the buttons which display the sectors
b1.onclick = function() { s1.style.display = 'block'; }
b2.onclick = function() { s2.style.display = 'block'; }
b3.onclick = function() { s3.style.display = 'block'; }
}
//jQuery solution
$(function() {
$('#button1').click( function() { $('#sector1').show() } );
$('#button2').click( function() { $('#sector2').show() } );
$('#button3').click( function() { $('#sector3').show() } );
});