In a previous sheet I've managed (with a lot of help!) to create an input that will cycle through text boxes with coloured backgrounds. It goes from a plain white box to a pink box with an S then a red box with a K then back to a white box with each click. What I need for my new sheet is to cycle through images but I can't seem to find out how amend the code for this. Can anyone enlighten me please? Here's the existing html: <div class="sheet-damage-box"> <input type="radio" class="sheet-damage-box sheet-none" name="attr_damage-box01" value="0" checked> <input type="radio" class="sheet-damage-box sheet-stun" name="attr_damage-box01" value="1"> <input type="radio" class="sheet-damage-box sheet-kill" name="attr_damage-box01" value="2"> <span class="sheet-damage-box sheet-none"><input style="width:20px; height:20px; background-color:#FFFFFF;" type='text' disabled='true' name='attr_main' /></span> <span class="sheet-damage-box sheet-stun"><input style="width:20px; height:20px; background-color:#ff9999; font-size:100%; text-align:center;" type='text' disabled='true' name='attr_main' value="S" /></span> <span class="sheet-damage-box sheet-kill"><input style="width:20px; height:20px; background-color:#cc0000; font-size:100%; text-align:center; color:white;" type='text' disabled='true' name='attr_main' value="K" /></span> </div> And the CSS: div.sheet-damage-box { width: 20px; height: 20px; position: relative; } input.sheet-damage-box { width: 20px; height: 20px; position: absolute; z-index: 1; opacity: 0%; } span.sheet-damage-box { margin: 0px 0 0 0px; display: none; } input.sheet-none { z-index: 2; } input.sheet-none:checked + input.sheet-stun, input.sheet-stun:checked + input.sheet-kill, input.sheet-kill:checked + input.sheet-dead { z-index: 3; } input.sheet-none:checked ~ span.sheet-none, input.sheet-stun:checked ~ span.sheet-stun, input.sheet-kill:checked ~ span.sheet-kill, input.sheet-dead:checked ~ span.sheet-dead { display: inline-block; }
