Foros del Web » Programando para Internet » Javascript »

boton que cambia estilo y regresa al ser presionado por cualquier otro

 Estas en el tema de boton que cambia estilo y regresa al ser presionado por cualquier otro en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 20/03/2012, 20:24
 
Fecha de Ingreso: marzo-2012
Ubicación: mexico-ecatepec
Mensajes: 5
Antigüedad: 12 años, 7 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>
  #2 (permalink)  
Antiguo 21/03/2012, 07:36
Avatar de IsaBelM
Colaborador
  
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 4 meses
Puntos: 1012
Respuesta: boton que cambia estilo y regresa al ser presionado por cualquier otro
no veo donde está el javascript. el caso es que se puede hacer con css. usa la pseudo-clase :target. el inconveniente que tiene es que no es aceptada por navegadores antiguos
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #3 (permalink)  
Antiguo 21/03/2012, 08:06
 
Fecha de Ingreso: marzo-2012
Ubicación: mexico-ecatepec
Mensajes: 5
Antigüedad: 12 años, 7 meses
Puntos: 0
Respuesta: boton que cambia estilo y regresa al ser presionado por cualquier otro
Tienes razon, lo siento, no inclui el script

Cita:
<script language="JavaScript" type="text/javascript">


function CambiaColor()
{
var elemento = document.getElementById('text1');
if (elemento.className == "spam") {
elemento.className = "spam1";
}
else {
elemento.className = "spam";
}
};
function CambiaColor1()
{
var elemento = document.getElementById('text2');
if (elemento.className == "spam") {
elemento.className = "spam1";
}
else {
elemento.className = "spam";
}
};
function CambiaColor2()
{
var elemento = document.getElementById('text3');
if (elemento.className == "spam") {
elemento.className = "spam1";
}
else {
elemento.className = "spam";
}
};
  #4 (permalink)  
Antiguo 21/03/2012, 08:29
Avatar de emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 4 meses
Puntos: 1567
Respuesta: boton que cambia estilo y regresa al ser presionado por cualquier otro
Mirá estos ejemplos

Este es un javascript para cambiar la propiedad de multiples elementos
http://www.forosdelweb.com/f13/cambi...5/#post4145956

Este usa iframes
http://foros.emprear.com/css/link-ac...k-activo.phtml

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #5 (permalink)  
Antiguo 21/03/2012, 09:17
 
Fecha de Ingreso: marzo-2012
Ubicación: mexico-ecatepec
Mensajes: 5
Antigüedad: 12 años, 7 meses
Puntos: 0
Respuesta: boton que cambia estilo y regresa al ser presionado por cualquier otro
Muchas Gracias esebayolo, te comento que efectivamente me funciono con css el cambio de texto, lo que intento es que al presionar el boton, el texto que esta aparte cambie, existe la posibilidad de liarlos? la inagen es un rollover en css como este

Cita:
#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);
}
  #6 (permalink)  
Antiguo 21/03/2012, 11:57
 
Fecha de Ingreso: marzo-2012
Ubicación: mexico-ecatepec
Mensajes: 5
Antigüedad: 12 años, 7 meses
Puntos: 0
Respuesta: boton que cambia estilo y regresa al ser presionado por cualquier otro
Cita:
Iniciado por IsaBelM Ver Mensaje
no veo donde está el javascript. el caso es que se puede hacer con css. usa la pseudo-clase :target. el inconveniente que tiene es que no es aceptada por navegadores antiguos

Hola isa... muchas gracias por tu ayuda, logro hacer funcionar el target al texto del boton, el problema que tengo es que no puedo incorporar #id y "xx.html", ya que como te habia mencionado uso un iframe a que se mandan otras paginas, ¿como podria ajustalo para que funcionen ambos?
  #7 (permalink)  
Antiguo 21/03/2012, 12:03
 
Fecha de Ingreso: marzo-2012
Ubicación: mexico-ecatepec
Mensajes: 5
Antigüedad: 12 años, 7 meses
Puntos: 0
Respuesta: boton que cambia estilo y regresa al ser presionado por cualquier otro
Cita:
Iniciado por emprear Ver Mensaje
Mirá estos ejemplos

Este es un javascript para cambiar la propiedad de multiples elementos
[url]http://www.forosdelweb.com/f13/cambiar-color-letra-hacer-clic-982505/#post4145956[/url]

Este usa iframes
[url]http://foros.emprear.com/css/link-activo-iframe/link-activo.phtml[/url]

Saludos
Muchas Gracias esebayolo, te comento que efectivamente me funciono con css el cambio de texto, lo que intento es que al presionar el boton, el texto que esta aparte cambie, existe la posibilidad de liarlos? la inagen es un rollover en css como este

Código HTML:
#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);
}

Etiquetas: estilo, html, presionado, botones, cambios
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 16:35.