Tema: boton que cambia estilo y regresa al ser presionado por cualquier otro
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 20/03/2012, 20:24
chino5227
 
Fecha de Ingreso: marzo-2012
Ubicación: mexico-ecatepec
Mensajes: 5
Antigüedad: 12 años, 8 meses
Puntos: 0
boton que cambia estilo y regresa al ser presionado por cualquier otro
Hola...

Tengo un pequeño problema, tal vez sea algo muy sencillo, tengo que realizar un menu que cambie el estilo de su descripción, el boton tiene un rollover en css y llama otra pagina que abre en un iframe, ya tengo solucionado el cambio de estilo, el rollover, y el link que se abre en iframe, el problema es que son 7 botones y cuando presiono algun otro igual cambia su estilo, pero el que fue presionado primero se queda igual (con estilo nuevo)... como hago para que regrese, ocupo esta función

Cita:
<html>
<head>

<style>
#m1 { display: none;
font-weight: bold;
text-align: top;
}
#m2 { display: none; }
#m3 { display: none; }
#m4 { display: none; }

#bot1 {
border: 0 0 0 0;
padding: 0;
position:relative;top:5;left:40;
text-align: center;
}
#bot1 a{
background-image:url(Bullet.jpg);
background-position: center top;
height:40px;
width:40px;
display: block;
color: #990000;
text-decoration: none;
padding-top: 5px;
background-repeat: no-repeat;
font-weight: bold;
}
#bot1 a:hover{
background-image:url(Bullet1.jpg);
}
#bot1 a:focus{
background-image:url(Bullet1.jpg);
}

#bot2 {
border: 0 0 0 0;
padding: 0;
position:relative;top:5;left:40;
text-align: center;
}
#bot2 a{
background-image:url(Bullet.jpg);
background-position: center top;
height:40px;
width:40px;
display: block;
color: #990000;
text-decoration: none;
padding-top: 5px;
background-repeat: no-repeat;
font-weight: bold;
}
#bot2 a:hover{
background-image:url(Bullet1.jpg);
}
#bot2 a:focus{
background-image:url(Bullet1.jpg);
}

#bot3 {
border: 0 0 0 0;
padding: 0;
position:relative;top:5;left:40;
text-align: center;
}
#bot3 a{
background-image:url(Bullet.jpg);
background-position: center top;
height:40px;
width:40px;
display: block;
color: #990000;
text-decoration: none;
padding-top: 5px;
background-repeat: no-repeat;
font-weight: bold;
}
#bot3 a:hover{
background-image:url(Bullet1.jpg);
}
#bot3 a:focus{
background-image:url(Bullet1.jpg);
}

#bot4 {
border: 0 0 0 0;
padding: 0;
position:relative;top:5;left:40;
text-align: center;
}
#bot4 a{
background-image:url(Bullet.jpg);
background-position: center top;
height:40px;
width:40px;
display: block;
color: #990000;
text-decoration: none;
padding-top: 5px;
background-repeat: no-repeat;
font-weight: bold;
}
#bot4 a:hover{
background-image:url(Bullet1.jpg);
}
#bot4 a:focus{
background-image:url(Bullet1.jpg);
}

#bot5 {
border: 0 0 0 0;
padding: 0;
position:relative;top:5;left:40;
text-align: center;
}
#bot5 a{
background-image:url(Bullet.jpg);
background-position: center top;
height:40px;
width:40px;
display: block;
color: #990000;
text-decoration: none;
padding-top: 5px;
background-repeat: no-repeat;
font-weight: bold;
}
#bot5 a:hover{
background-image:url(Bullet1.jpg);
}
#bot5 a:focus{
background-image:url(Bullet1.jpg);
}

#bot6 {
border: 0 0 0 0;
padding: 0;
position:relative;top:5;left:40;
text-align: center;
}
#bot6 a{
background-image:url(Bullet.jpg);
background-position: center top;
height:40px;
width:40px;
display: block;
color: #990000;
text-decoration: none;
padding-top: 5px;
background-repeat: no-repeat;
font-weight: bold;
}
#bot6 a:hover{
background-image:url(Bullet1.jpg);
}
#bot6 a:focus{
background-image:url(Bullet1.jpg);
}

#bot7 {
border: 0 0 0 0;
padding: 0;
position:relative;top:5;left:40;
text-align: center;
}
#bot7 a{
background-image:url(Bullet.jpg);
background-position: center top;
height:40px;
width:40px;
display: block;
color: #990000;
text-decoration: none;
padding-top: 5px;
background-repeat: no-repeat;
font-weight: bold;
}
#bot7 a:hover{
background-image:url(Bullet1.jpg);
}
#bot7 a:focus{
background-image:url(Bullet1.jpg);
}

.spam { font-family: "Calibri","sans-serif";
font-weight: none;
font-size: 10pt;
color: #7f7f7f;
}

.spam1 {font-family: "Calibri","sans-serif";
font-weight: bold;
font-size: 10pt;
color: #7f7f7f;
}

</style>




</head>
<body>


<TABLE width="870px" border="0">
<TR>
<TD width="14.26%"> <span id="bot1" onmouseup="CambiaColor();return false;" onclick="toggleDiv('m1');"">
<a href="requisitos.html" target="contenido"></a></TD>
<TD width="14.26%"> <span id="bot2" onmouseup="CambiaColor1();return false;" onclick="toggleDiv('m1');"">
<a href="contactar.html" target="contenido"></a> </TD>
<TD width="14.26%"> <span id="bot3" onmouseup="CambiaColor2();return false;" onclick="toggleDiv('m1');"">
<a href="muestras.html" target="contenido"></a></TD>
<TD width="14.26%"> <span id="bot4" onmouseup="CambiaColor3();return false;" onclick="toggleDiv('m1');"">
<a href="negociacion.html" target="contenido"></a></TD>
<TD width="14.26%"> <span id="bot5" onmouseup="CambiaColor4();return false;" onclick="toggleDiv('m1');"">
<a href="formatos.html" target="contenido"></a></TD>
<TD width="14.26%"> <span id="bot6" onmouseup="CambiaColor5();return false;" onclick="toggleDiv('m1');"">
<a href="recepcion.html" target="contenido"></a></TD>
<TD width="14.26%"> <span id="bot7" onmouseup="CambiaColor6();return false;" onclick="toggleDiv('m1');"">
<a href="entrega.html" target="contenido"></a></TD>
</TR>
<TR align="center" valign="top">
<TD><span id="text1" class="spam"> Requisitos </span></TD>
<TD><span id="text2" class="spam"> Contactar al comprador </span></TD>
<TD><span id="text3" class="spam"> Muestra de mercanc&iacutea </span></TD>
<TD><span id="text4" class="spam"> Negociaci&oacuten </span></TD>
<TD><span id="text5" class="spam"> Llenado de formatos </span></TD>
<TD><span id="text6" class="spam"> Recepci&oacuten de &oacuterdenes de compra </span></TD>
<TD><span id="text7" class="spam"> Entrega de mercanc&iacutea </span></TD>
</TR>

</TABLE>

</span>

</body>