-
Exemple 198
Clic sur chaque bouton pour changer d'image; glissez votre curseur de haut en bas sur la bande arc en ciel, à droite.
<div style="width: 1000px; height: 562px; margin: 5px auto; border: 1px solid black; text-align: left;"><input id="sel1" class="sel" type="text" /> <input id="sel2" class="sel" type="text" /> <input id="sel3" class="sel" type="text" /> <input id="sel4" class="sel" type="text" /> <input id="sel5" class="sel" type="text" />
<div id="arc"> </div>
<p id="hue1" class="hue"> </p>
<p id="hue2" class="hue"> </p>
<p id="hue3" class="hue"> </p>
<p id="hue4" class="hue"> </p>
<p id="hue5" class="hue"> </p>
<p id="hue6" class="hue"> </p>
<p id="hue7" class="hue"> </p>
<p id="hue8" class="hue"> </p>
<p id="hue9" class="hue"> </p>
<p id="hue10" class="hue"> </p>
<p id="rem1" class="rem"> </p>
</div>
<style><!--
.sel{position:absolute; z-index:5; width:30px; height:30px; border-radius:50%; background:coral!important;}
#sel1{transform:translate(400px,10px);}
#sel2{transform:translate(480px,10px);}
#sel3{transform:translate(560px,10px);}
#sel4{transform:translate(640px,10px);}
#sel5{transform:translate(720px,10px);}
#arc{position:absolute; z-index:5; width:40px; height:562px; background:url('http://ekladata.com/QhfFP5IYzZRFjVAd9sBAaIPeHMw/rainb3@1000x562.jpg'); background-size:cover; transform:translate(960px,0px);}
.hue{position:absolute; z-index:5; width:39px; height:54px; border:1px solid black;}
#hue1{transform:translate(960px,0px);}
#hue2{transform:translate(960px,54px);}
#hue3{transform:translate(960px,108px);}
#hue4{transform:translate(960px,162px);}
#hue5{transform:translate(960px,216px);}
#hue6{transform:translate(960px,270px);}
#hue7{transform:translate(960px,324px);}
#hue8{transform:translate(960px,378px);}
#hue9{transform:translate(960px,432px);}
#hue10{transform:translate(960px,486px);}.rem{position:absolute; z-index:2; width:1000px; height:562px;}
#rem1{background:url('http://ekladata.com/8XVJIU7SNmmPlITTG7gZyNuAjDk@1000x562.jpg'); background-size:cover;}
#hue1:hover ~ #rem1{filter:hue-rotate(30deg);}
#hue2:hover ~ #rem1{filter:hue-rotate(60deg);}
#hue3:hover ~ #rem1{filter:hue-rotate(90deg);}
#hue4:hover ~ #rem1{filter:hue-rotate(120deg);}
#hue5:hover ~ #rem1{filter:hue-rotate(150deg);}
#hue6:hover ~ #rem1{filter:hue-rotate(180deg);}
#hue7:hover ~ #rem1{filter:hue-rotate(210deg);}
#hue8:hover ~ #rem1{filter:hue-rotate(240deg);}
#hue9:hover ~ #rem1{filter:hue-rotate(280deg);}
#hue10:hover ~ #rem1{filter:hue-rotate(320deg);}
#sel1:focus,#sel2:focus,#sel3:focus,#sel4:focus,#sel5:focus{background:lime!important;}
#sel1:focus ~ #rem1{background:url('http://ekladata.com/tXYswcPp_9NebsASe0U6pLQVlRU@1000x562.jpg');}
#sel2:focus ~ #rem1{background:url('http://ekladata.com/3gxa5DvG31i-07NSw4ztEya4l8k@1000x562.jpg');}
#sel3:focus ~ #rem1{background:url('http://ekladata.com/a5El4UjAYRGuS6fosvq-Pe1empw@1000x562.jpg');}
#sel4:focus ~ #rem1{background:url('http://ekladata.com/JZfyRfE_U2tzxOnz5D2XQUpQQj0@1000x562.jpg');}
#sel5:focus ~ #rem1{background:url('http://ekladata.com/NBNOCAU_f9fL1wPIiPcxVVNOheE@1000x562.jpg');}
--></style>