Javascript 圆形图像叠加

我有一个圆形的图像

这个圆被分成三等分

我有一个完整圆圈的图像

我还有3张其他的图片，每一张都只是圆圈的一部分，但都是绿色的

我必须做到以下几点：

显示原始圆图像

屏幕上有3个按钮，每个按钮都链接到圆圈的3个部分。 单击时，它将绿色图像覆盖在圆上。 因此，如果您单击所有3个按钮，整个圆圈将为绿色。 如果只单击第1个按钮，则只有圆圈的该部分为绿色

我如何实现这一点？ 是否可以一次覆盖两个图像？我必须在这里使用x和y定位吗？

---

（当前，如果将绿色图像部分放置在原始图像上，则它们将与原始圆圈图像完全对齐。

对于非绿色的零件，带有部分圆圈的3个图像应该是透明的。然后，所有4个图像可以始终重叠，按钮可以更改堆叠顺序。“显示”的图像将位于实心圆的顶部，其他图像将位于实心圆的下方。

对于非绿色的零件，带有部分圆的3个图像应该是透明的。然后，所有4个图像可以始终重叠，并且按钮可以更改堆叠顺序。“显示”的图像将位于实心圆的顶部，其他的将位于实心圆的下方。

下面是一个用JavaScript和jQuery显示的解决方案。
纯JavaScript使用按钮的DOM0 onclick处理程序，这是正常的，因为它们只触发一个事件。窗口的onload处理程序更大的问题是：每个文档只能有一个。
正如您所看到的，这个解决方案要短得多，但您必须包含jQuery库。

$（function（）{}）

取代了窗口onload处理程序，但您可以拥有任意数量的处理程序

图像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">

_

---

下面是一个用纯JavaScript和jQuery显示的解决方案。
纯JavaScript使用按钮的DOM0 onclick处理程序，这是正常的，因为它们只触发一个事件。窗口的onload处理程序更大的问题是：每个文档只能有一个。
正如您所看到的，这个解决方案要短得多，但您必须包含jQuery库。

$（function（）{}）

取代了窗口onload处理程序，但您可以拥有任意数量的处理程序

图像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">

_

---

您还可以使用完整图像作为一个div的背景，然后在其上加上3个div，再加上绿色、覆盖或其他颜色，然后切换覆盖的可见性或类别

---

我不会说比上面的更好或更差，但不同。

你也可以使用完整的图像作为一个div的背景，然后在上面加上3个div，加上绿色，或者叠加，或者其他什么，然后切换叠加的可见性或类别

---

我不会说比上面的更好或更差，但不同。

对于重叠图像，我为每个图像创建了一个css类。但是每个类都有一个背景：透明url（…）；除非输入高度/宽度，否则图像不会显示，但绿色图像不会显示在原始图像上方，而是显示在原始图像下方？？对于覆盖图像，我为每个图像创建了一个css类。但是每个类都有一个背景：透明url（…）；除非我输入高度/宽度，否则图像不会显示，但绿色图像不会显示在原始图像上方，而是显示在原始图像下方？？

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