Обложки обтекания круга

Question

У меня есть изображение в форме круга.

Круг разбит на 3 равные части.

У меня есть изображение со всем кругом.

У меня есть еще 3 изображения, каждый из которых только часть круга, но в цвете зеленый.

я должен сделать следующее:

1. Показать оригинальный круг изображения.

2. Имейте 3 кнопки на экране, каждая кнопка связана с 3 частями круга. При нажатии на нее накладывается зеленое изображение по кругу. Итак, если вы нажмете все 3 кнопки, весь круг будет зеленым. Если вы нажали только 1-ю кнопку, только эта часть круга будет зеленой.

Как это реализовать? Возможно ли накладывать сразу два изображения? Должен ли я играть с позициями x и y здесь? (зеленые секции изображения в настоящее время, если вы поместите их поверх исходного изображения, будут располагаться точно с исходным изображением круга.

Answer 1

Вот решение, показанное на прямом 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() }); 
}); 

Answer 2

3 изображения с частичными кругами должны быть прозрачными для частей, которые не зеленые. Затем все 4 изображения могут быть наложены всегда, а кнопки могут изменять порядок укладки, а те, которые отображаются, будут отображаться поверх сплошного круга, а остальные будут под ним.

Answer 3

Вы также можете использовать полное изображение в качестве фона в DIV, а затем 3 дивы более, что с зеленым или наложение или любой другой а затем просто переключить видимость или класс наложений.

Я бы сказал, что ничего лучше или хуже, чем указано выше, но другое.