圆圈图像叠加

我有一个形状为圆形的图像。圆圈图像叠加

圆被分成3个相等的部分。

我有整个圆圈的图像。

我有3个其他图像，每个只有一个圆圈，但在绿色的颜色。

我必须做到以下几点：

显示原来的圆形图片。
在屏幕上有一个3个按钮，每个按钮都链接到圆的3个部分。点击后，它将绿色图像叠加在圆上。所以如果你点击了所有3个按钮，整个圆圈就会变成绿色。如果您只点击第一个按钮，则只有该部分的圆圈会变成绿色。

我该如何执行此操作？是否可以一次覆盖2张图像？我需要在这里玩x和y吗？（当前绿色图像部分，如果将它们放在原始图像上，将与原始圆形图像完全对齐

来源

2009-02-03 Blankman

下面是直接JavaScript和jQuery中显示的解决方案
直线JavaScript使用按钮的DOM0 onclick处理程序，因为它们只触发一个事件，因此窗口的onload处理程序更具问题：每个处理程序只能有一个文档。
如您所见，jQuery解决方案要短得多，但您必须包含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">

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

来源

2009-02-03 22:30:48 meouw