Question

I have a image in the shape of a Circle.

The circle is broken into 3 equal parts.

I have an image with the entire circle.

I have 3 other images, each only a piece of the circle but in the color green.

I have to do the following:

1. Display the original circle image.

2. Have a 3 buttons on the screen, each button is linked to the 3 parts of the circle. When clicked, it overlays the green image over the circle. So if you clicked all 3 buttons, the entire circle would be green. If you only clicked the 1st button, only that section of the circle would be green.

How can I implement this? Is it possible to overlay 2 images at once? Do I have to play with x and y positioning here? (the green image sections currently, if you place them over the original image, will lineup exactly with the original circle image.

Answer 1

Here’s a solution shown in straight JavaScript and also jQuery.
The straight JavaScript uses the DOM0 onclick handlers of the buttons which is OK because they’re only triggering one event. The onload handler for the window is more of a problem: you can only have one per document.
The jQuery solution is much shorter as you can see, but you’ll have to include the jQuery library. The $( function(){} ) takes the place of the window onload handler but you can have as many as you like.

The images sector1.gif, sector2.gif and sector3.gif are transparent apart from the bits of the circle that are visible for them. You could use .png too but that wouldn’t work in ie6 without some tweakery.

<!-- 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() } ); });