Circle image overlays

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

The 3 images with partial circles should be transparent for the parts that are not green. Then all 4 images can be overlayed always, and the buttons can change the stacking order. The ones "displayed" will go on top of the solid circle and the others will go beneath it.

Answer 2

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

Answer 3

You could also use the full image as the background of a div and then 3 divs over that with the green, or overlay or whatever and then just toggle the visibility or class of the overlays.

I wouldnt say any better or worse than the above, but different.