Сверстать блок по образцу без использования таблиц

Первая кнопка нажата, на третью наведен курсор

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel="stylesheet" type="text/css" href="st.css">
</head>

<body>

<script type="text/javascript">

var sel="s0";

function selec(c) {

document.getElementById("s1").setAttribute("class", "b1");  //  Заменить класс в javascript
document.getElementById("s2").setAttribute("class", "b1");
document.getElementById("s3").setAttribute("class", "b1");
document.getElementById("s4").setAttribute("class", "b1");
document.getElementById("s5").setAttribute("class", "b1");
document.getElementById("s6").setAttribute("class", "b1");
document.getElementById("s7").setAttribute("class", "b1");

event.srcElement.setAttribute("class", "b2");                                    //  Заменить текущий элемент в javascript

sel=c;
}

function on(col){
if ((sel!=event.srcElement.id) && (event.srcElement.type=="button")) {event.srcElement.setAttribute("class", "b3"); }
//alert(sel);
}
function off(col){
if ((sel!=event.srcElement.id) && (event.srcElement.type=="button")) {event.srcElement.setAttribute("class", "b1"); }
}
</script>

<form onMouseover="on('1')" onMouseout="off('2')" style=" background-color: #c6cfde; height: 36px;">
<input type='button' id="s1" class="b1" value='Контент' onclick='selec("s1")' ">
<input type='button' id="s2" class="b1" value='Новости' onclick='selec("s2")' ">
<input type='button' id="s3" class="b1" value='Справочники' onclick='selec("s3")' ">
<input type='button' id="s4" class="b1" value='Статистика' onclick='selec("s4")' ">
<input type='button' id="s5" class="b1" value='Экспорт' onclick='selec("s5")' ">
<input type='button' id="s6" class="b1" value='Рубрикатор' onclick='selec("s6")' ">
<input type='button' id="s7" class="b1" value='Пользователи' onclick='selec("s7")' ">

</form>

</body>
</html>

css
.b1 {
background-color: #c6cfde;
border: none;
height: 28px;
width: 94px;
margin-top: 3px;
}

.b2 {
background-color: #eeeeee;
border: none;
border-width: 2px;
border-style: inset;
height: 28px;
width: 94px;
margin-top: 3px;
}
.b3 {
background-color: #c6cfde;
border: none;
border-width: 2px;
border-style: outset;
height: 28px;
width: 94px;
margin-top: 3px;
}

 

 

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)

 
© 2012 Программирование в удовольствие Яндекс.Метрика Suffusion theme by Sayontan Sinha