сейчас на сайте:
Лучшие сказки мира
Детектив и фантастика
Песни прошлых лет
Для досуга
смотреть оглавлениепримерразмер кода
<script type="text/javascript"> LastID = "" function mOver(id,clas){ (LastID != id?document.getElementById(id).className = clas:"") } function mOut(id,clas){ (LastID != id?document.getElementById(id).className = clas:"") } function active(id,clas){ document.getElementById(id).className = clas if (LastID != id){ (LastID != ""?document.getElementById(LastID).className = "effect1_default":"") } LastID = id } </script> <style> .effect1_default{ width:70px; text-align:center; font-size:14px; color:#000000; vertical-align:center; border-top:2px outset #eeeeee; border-left:2px outset #bbbbbb; border-right:2px outset #dddddd; border-bottom:2px outset #cccccc; background:#b0bbce } .effect1_down{ width:70px; text-align:center; font-size:10px; vertical-align:center; color:#000000; border-top:2px inset #dce1e9; border-left:2px inset #dce1e9; border-right:2px inset #dce1e9; border-bottom:2px inset #dce1e9; background:#718099 } </style>
<input type="button" value="button 1" id="button1" class="effect1_default" onmousedown="active(this.id','effect1_down')" onclick="this.blur()">
<input type="button" value="button 2" id="button2" class="effect1_default" onmousedown="active(this.id,'effect1_down')" onclick="this.blur()">
<input type="button" value="button 3" id="button3" class="effect1_default" onmousedown="active(this.id,'effect1_down')" onclick="this.blur()">
<input type="button" value="button 4" id="button4" class="effect1_default" onmousedown="active(this.id,'effect1_down')" onclick="this.blur()">
</form>
The script is the same for the following buttons but there are slight differences in the style rules and to the mouse events attached to the buttons.
<script type="text/javascript"> LastID = "" function mOver(id,clas){ (LastID != id?document.getElementById(id).className = clas:"") } function mOut(id,clas){ (LastID != id?document.getElementById(id).className = clas:"") } function active(id,clas){ document.getElementById(id).className = clas if (LastID != id){ (LastID != ""?document.getElementById(LastID).className = "effect2_default":"") } LastID = id } </script> <style> .effect2_default{ width:70px; height:20px; text-align:center; font-size:10px; color:#ffffff; vertical-align:center; border-top:2px outset #eeeeee; border-left:2px outset #bbbbbb; border-right:2px outset #dddddd; border-bottom:2px outset #cccccc; background:#b0bbce } .effect2_over{ width:70px; height:20px; text-align:center; font-size:10px; vertical-align:center; color:#93a2bb; border-top:2px solid #93a2bb; border-left:2px solid #93a2bb; border-right:2px solid #93a2bb; border-bottom:2px solid #93a2bb; background:#b0bbce } .effect2_down{ width:70px; height:20px; text-align:center; font-size:9px; vertical-align:center; color:#b0bbce; border-top:2px inset #dce1e9; border-left:2px inset #dce1e9; border-right:2px inset #dce1e9; border-bottom:2px inset #dce1e9; background:#718099 } </style>
<form>
<input type="button" value="button 1" id="button1" class="effect2_default" onmouseover="mOver(this.id,'effect2_over')" onmouseout="mOut(this.id,'effect2_default')" onmousedown="active(this.id,'effect2_down')" onclick="this.blur()">
<input type="button" value="button 4" id="button2" class="effect2_default" onmouseover="mOver(this.id,'effect2_over')" onmouseout="mOut(this.id,'effect2_default')" onmousedown="active(this.id,'effect2_down')" onclick="this.blur()">
<input type="button" value="button 4" id="button3" class="effect2_default" onmouseover="mOver(this.id,'effect2_over')" onmouseout="mOut(this.id,'effect2_default')" onmousedown="active(this.id,'effect2_down')" onclick="this.blur()">
<input type="button" value="button 4" id="button4" class="effect2_default" onmouseover="mOver(this.id,'effect2_over')" onmouseout="mOut(this.id,'effect2_default')" onmousedown="active(this.id,'effect2_down')" onclick="this.blur()">
<script language="JavaScript"> myArray=new Array() myArray[0]=new Array("effect3a_default","effect3a_over","effect3a_down") myArray[1]=new Array("effect3b_default","effect3b_over","effect3b_down") myArray[2]=new Array("effect3c_default","effect3c_over","effect3c_down") myArray[3]=new Array("effect3d_default","effect3d_over","effect3d_down") LastID = "" lastClas="" function mOver(id,clas){ (LastID != id?document.getElementById(id).className = myArray[clas][1]:"") } function mOut(id,clas){ (LastID != id?document.getElementById(id).className = myArray[clas][0]:"") } function active(id,clas){ document.getElementById(id).className = myArray[clas][2] if (LastID != id){ (LastID != ""?document.getElementById(LastID).className = myArray[lastClas][0]:"") } LastID = id lastClas=clas } </script> <style> .effect3a_default{ width:70px; text-align:center; font-size:14px; color:#000000; border-top:2px outset #eeeeee; border-left:2px outset #bbbbbb; border-right:2px outset #dddddd; border-bottom:2px outset #cccccc; background-color:#44aa44 } .effect3a_over{ width:70px; text-align:center; font-size:14px; color:#93a2bb; background-color:#aaddaa } .effect3a_down{ width:70px; text-align:center; font-size:12px; color:#000000; border-top:2px inset #dce1e9; border-left:2px inset #dce1e9; border-right:2px inset #dce1e9; border-bottom:2px inset #dce1e9; background-color:#77aa77 } .effect3b_default{ width:70px; text-align:center; font-size:14px; color:#000000; border-top:2px outset #eeeeee; border-left:2px outset #bbbbbb; border-right:2px outset #dddddd; border-bottom:2px outset #cccccc; background-color:#aaaa44 } .effect3b_over{ width:70px; text-align:center; font-size:14px; color:#93a2bb; background-color:#dddda } .effect3b_down{ width:70px; text-align:center; font-size:12px; color:#000000; border-top:2px inset #dce1e9; border-left:2px inset #dce1e9; border-right:2px inset #dce1e9; border-bottom:2px inset #dce1e9; background-color:#aaaa77 } .effect3c_default{ width:70px; text-align:center; font-size:14px; color:#000000; border-top:2px outset #eeeeee; border-left:2px outset #bbbbbb; border-right:2px outset #dddddd; border-bottom:2px outset #cccccc; background-color:#aa4444 } .effect3c_over{ width:70px; ext-align:center; font-size:14px; color:#93a2bb; background-color:#ddaaaa } .effect3c_down{ width:70px; text-align:center; font-size:12px; color:#000000; border-top:2px inset #dce1e9; border-left:2px inset #dce1e9; border-right:2px inset #dce1e9; border-bottom:2px inset #dce1e9; background-color:#aa7777 } .effect3d_default{ width:70px; text-align:center; font-size:14px; color:#000000; border-top:2px outset #eeeeee; border-left:2px outset #bbbbbb; border-right:2px outset #dddddd; border-bottom:2px outset #cccccc; background-color:#4444aa } .effect3d_over{ width:70px; text-align:center; font-size:14px; color:#93a2bb; background-color:#aaaadd } .effect3d_down{ width:70px; text-align:center; font-size:12px; color:#000000; border-top:2px inset #dce1e9; border-left:2px inset #dce1e9; border-right:2px inset #dce1e9; border-bottom:2px inset #dce1e9; background-color:#7777aa } </style>