Foros del Web » Programando para Internet » Javascript »

Botonera!

 Estas en el tema de Botonera! en el foro de Javascript en Foros del Web. holas! bueno paso a explicar: Tengo una botonera y quiero q al tocar sobre un boton quede seleccionado y los demas no, y si toco ...
  #1 (permalink)  
Antiguo 31/08/2005, 10:46
 
Fecha de Ingreso: julio-2005
Mensajes: 58
Antigüedad: 18 años, 9 meses
Puntos: 0
Botonera!
holas!

bueno paso a explicar:

Tengo una botonera y quiero q al tocar sobre un boton quede seleccionado y los demas no, y si toco el otro se seleccione ese tambien y los demas no ( osea q siempre quede uno seleccionado osea marcado con color), hay q hacerlo con comportamientos en dreamveaver pero el problema es q como tambien tienen mousedown (o sea al pasar sobre un boton cambia de color) no lo puedo lograr... ya q quiero q al tocar una seccion solo esa seccion quede seleccionada, puede ser echo con textos q cambian de color o con imagens una en un color y otra en otro.

saludos espero q me puedan ayudar
  #2 (permalink)  
Antiguo 31/08/2005, 19:01
AlvaroG
Invitado
  
Mensajes: n/a
Puntos:
no te entiendo demasiado, pero ¿no podrías sacar el onmousedown de la etiqueta del elemento?
  #3 (permalink)  
Antiguo 01/09/2005, 06:25
Avatar de lantrax  
Fecha de Ingreso: abril-2003
Ubicación: Spain is different
Mensajes: 310
Antigüedad: 21 años
Puntos: 0
Hola,

no se si este mensaje debería estar aqui o en el subforo de JaAvaScript, pero veamos si te puedo ayudar

una cosilla

onMouseDown es el comportamiento que reconoce la presion sobre el botón del raton

onMouseOver es el comportamiento que reconoce que pasas el raton por encima del elemento, en este caso una imagen

onMouseOut es el comportamiento que reconoce que sacas el raton fuera del elemento, en este caso una imagen

Deberias hacer lo siguiente:
A cada elemento de la botonera, asociar un onMouseOver que cambie a la imagen "iluminada", llamemoslo así. Y admemás (y creo entiendo que esto es lo que se ha olvidado) asociar un evento onMouseOut igualmente a cada elemento de la botonera que vuelva a asociar la imagen original.

El problema está en hacerlo con DreamWeaver, claro. Todo esto que te comento se puede resumir, en que tienes 2 imagenes darkness.jpg y lightness.jg

<img src="darkness.jpg" onmouseover="lightness.jpg" onmouseout="darkness.jpg">

(Cuando pasas el raton cambia a lightness y cuando sales cambia a darkness)

pero desde Dreamweaver, es un pelín más complicadete pues lo tienes que hacer desde el menú de comportamientos


Espero haberte ayudado.

Saludos

LaNtRaX
__________________
______________________________

LaNTRaX
  #4 (permalink)  
Antiguo 01/09/2005, 12:50
 
Fecha de Ingreso: julio-2005
Mensajes: 58
Antigüedad: 18 años, 9 meses
Puntos: 0
hola

si con palabras es dificil de explicar aca dejo un ejemplo:

http://s23.yousendit.com/d.aspx?id=3...23K18HOTFARRJM

Bueno lo q quiero q al tocar en la empresa quede en color rojo o sea seleccionado. y si toco sobre nuestros productos = . no los dos a la vex se entiende un poco mas ahora?

La empresa - nuestros productos

ES para q el usuario sepa donde se metio entonces vea con color la seccion a la q se entro.

Gracias a los interesados!
  #5 (permalink)  
Antiguo 01/09/2005, 18:20
Avatar de lantrax  
Fecha de Ingreso: abril-2003
Ubicación: Spain is different
Mensajes: 310
Antigüedad: 21 años
Puntos: 0
Bien,

decididamente no lo vas a poder hacer con Dreamweaver

Y lo que quieres hacer es JavaScript puro y duro
Metodología:

-Crear un array de enlaces.
-Asociar un evento onClick a cada link que haga 2 cosas
+ encender el prpio link
+ que recorra el resto de links para desactivarlos

pasa este post al foro de Javascript o que reenvie este algún moderador

Desde luego con Dreamweaver únicamente te va a resultar demasiado tedioso

Suerte
__________________
______________________________

LaNTRaX
  #6 (permalink)  
Antiguo 02/09/2005, 00:52
Avatar de tunait
Moderadora
  
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 22 años, 8 meses
Puntos: 381
Tema trasladado al foro de javascript desde (x)html
  #7 (permalink)  
Antiguo 02/09/2005, 02:18
Avatar de KarlanKas
Moderador extraterrestre
  
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 22 años, 4 meses
Puntos: 61
He modificado un poco tu página: los onmouseover y onmouseout los he puesto en las imágenes en vez de en los enlaces. También he añadido una pequeña función para que permanezca como decías.

Tiene una pequeña carga: la imagen "apagada" debe llamarse loquesea.gif y la imagen encendida ha de llamarse loquesea2.gif (es decir, que la imagen encendida se distingue de la apagada en el 2 de detrás).

Así logro evitar hacer lo que decía lantrax con los array y demás.

Sería así:

Código PHP:
<HTML>
<HEAD>
<TITLE>arriba</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
function MM_findObj(n, d) { //v4.0
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && document.getElementById) x=document.getElementById(n); return x;
}

function MM_showHideLayers() { //v3.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
    obj.visibility=v; }
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

var antiguo="*";
function marcar(esto){
if(antiguo!="*" && antiguo!=esto){
antiguo.src=antiguo.src.split("2.gif").join(".gif");
}
antiguo=esto;

}
//-->
</script>
<STYLE>
a:link  {
    color : #000000;
    text-decoration : none;
}

a:visited  {
    color : #000000;
    text-decoration : none;
}

a:active  {
    color : #000000;
    text-decoration : none;
}

a:hover  {
    color :#800000;
    text-decoration : none;
}
</STYLE>
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 onLoad="MM_preloadImages('botones/laempresa2.gif','botones/nuestrosproductos2.gif')">
<P>
<table width=643 border=0 cellpadding=0 cellspacing=0>
  <tr> 
    <td colspan=11> <img src="Images/botons_01.jpg" width=643 height=1 alt=""></td>
  </tr>
  <tr> 
    <td> <img src="Images/botons_02.gif" width=1 height=18 alt=""></td>
    <td width="74" height="18"> 
      <div align="CENTER"><font face="Arial" size="1"><b><font color="#000000">HOME</font></b></font></div>
    </td>
    <td> <img src="Images/botons_04.jpg" width=1 height=18 alt=""></td>
    <td width="112" height="18"><a href="la_empresa3.html"target="iframe"><img  onMouseOut="if(antiguo!=this){MM_swapImgRestore()}" onMouseOver="if(antiguo!=this){MM_swapImage('La Empresa','','botones/laempresa2.gif',1)}"  onclick="marcar(this)" name="La Empresa" border="0" src="botones/laempresa.gif" width="112" height="18"></a></td>
    <td> <img src="Images/botons_06.jpg" width=1 height=18 alt=""></td>
    <td width="170" height="18"><a href="nuestros_productos2.html" target="iframe"><img onMouseOut="if(antiguo!=this){MM_swapImgRestore()}" onMouseOver="if(antiguo!=this){MM_swapImage('Nuestros Productos','','botones/nuestrosproductos2.gif',1)}" onclick="marcar(this)" name="Nuestros Productos" border="0" src="botones/nuestrosproductos.gif" width="170" height="18"></a></td>
    <td> <img src="Images/botons_08.jpg" width=1 height=18 alt=""></td>
    <td width="152" height="18"> 
      <div align="CENTER"><font face="Arial" size="1"><b>FILOSOFIA GOURMET</b></font></div>
    </td>
    <td> <img src="Images/botons_10.jpg" width=1 height=18 alt=""></td>
    <td width="129" height="18"> 
      <div align="CENTER"><font face="Arial" size="1"><b><font color="#000000">CONTACTO 
        Y VENTA</font></b></font></div>
    </td>
    <td> <img src="Images/botons_12.jpg" width=1 height=18 alt=""></td>
  </tr>
  <tr> 
    <td colspan=11> <img src="Images/botons_13.jpg" width=643 height=1 alt=""></td>
  </tr>
</table><iframe name="iframe"></iframe>
</BODY>
</HTML> 
La función nueva es:

Código PHP:
var antiguo="*";
function marcar(esto){
if(antiguo!="*" && antiguo!=esto){
antiguo.src=antiguo.src.split("2.gif").join(".gif");
}
antiguo=esto;

} 
y la forma de tratar los enlaces quedaría así:

Código PHP:
    <a 
        href="nuestros_productos2.html" 
        target="iframe">
        <img 
            onMouseOut="if(antiguo!=this){MM_swapImgRestore()}" 
            onMouseOver="if(antiguo!=this){MM_swapImage('Nuestros Productos','','botones/nuestrosproductos2.gif',1)}" 
            onclick="marcar(this)" 
            name="Nuestros Productos" 
            border="0" 
            src="botones/nuestrosproductos.gif" 
            width="170" 
            height="18">
    </a> 
Si tienes alguna duda pregunta!
__________________
Cómo escribir

No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.
  #8 (permalink)  
Antiguo 02/09/2005, 08:03
 
Fecha de Ingreso: julio-2005
Mensajes: 58
Antigüedad: 18 años, 9 meses
Puntos: 0
Holas!!

Gracias a todos por responder!

KarlanKas bueno eh copiado el code y lo aplique arregle el nombre de unos de los botones y tiene un fallo todavia:

http://s42.yousendit.com/d.aspx?id=2...5307HVVVKP3THS

fijate q cuando tocas sobre nuestros productos despues de varios click entre ese boton y el otro, y se queda en blanco el otro boton como si intentara cargar una imagen. esto es = con los demas botones q fui agregando pasa lo mismo. y no lo pude arreglar

("2.gif").join(".gif");
} supongo q cargara esos gif?

OFF TOPIC: karlankas sos el mismo q tiene el blog no? lo estuve leyendo me rei mucho

Saludos!
  #9 (permalink)  
Antiguo 02/09/2005, 08:58
Avatar de KarlanKas
Moderador extraterrestre
  
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 22 años, 4 meses
Puntos: 61
Muchas gracias por tus críticas del blog! Debiste leer el único post divertido

Respecto a tu problema, veo que no has cambiado el nombre del archivo del botón de la empresa. el name del botón sin seleccionar debe ser: laempresa.gif y seleccionado debe ser laempresa2.gif.

Igual con nuestrosproductos.gif y con cualquier botón que añadas.

He simplificado aun más el código:
Código PHP:
<HTML> 
<HEAD> 
<TITLE>arriba</TITLE> 
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> 
<script language="JavaScript"> 
<!-- 

function MM_preloadImages() { //v3.0 
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); 
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) 
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} 
} 

var antiguo="*"; 
function marcar(esto){ 
if(antiguo!="*" && antiguo!=esto){ 
antiguo.src=antiguo.src.split("2.gif").join(".gif"); 
} 
antiguo=esto; 

} 
//--> 
</script> 
<STYLE> 
a:link  { 
    color : #000000; 
    text-decoration : none; 
} 

a:visited  { 
    color : #000000; 
    text-decoration : none; 
} 

a:active  { 
    color : #000000; 
    text-decoration : none; 
} 

a:hover  { 
    color :#800000; 
    text-decoration : none; 
} 
</STYLE> 
</HEAD> 
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 onLoad="MM_preloadImages('botones/laempresa2.gif','botones/nuestrosproductos2.gif')"> 
<P> 
<table width=643 border=0 cellpadding=0 cellspacing=0> 
  <tr> 
    <td colspan=11> <img src="Images/botons_01.jpg" width=643 height=1 alt=""></td> 
  </tr> 
  <tr> 
    <td> <img src="Images/botons_02.gif" width=1 height=18 alt=""></td> 
    <td width="74" height="18"> 
      <div align="CENTER"><font face="Arial" size="1"><b><font color="#000000">HOME</font></b></font></div> 
    </td> 
    <td> <img src="Images/botons_04.jpg" width=1 height=18 alt=""></td> 
    <td width="112" height="18"><a href="la_empresa3.html"target="iframe"><img  onMouseOut="if(antiguo!=this){this.src=this.src.split('2.gif').join('.gif')}" onMouseOver="if(antiguo!=this){this.src=this.src.split('.gif').join('2.gif')}"  onclick="marcar(this)" name="La Empresa" border="0" src="botones/laempresa.gif" width="112" height="18"></a></td> 
    <td> <img src="Images/botons_06.jpg" width=1 height=18 alt=""></td> 
    <td width="170" height="18"><a href="nuestros_productos2.html" target="iframe"><img  onMouseOut="if(antiguo!=this){this.src=this.src.split('2.gif').join('.gif')}" onMouseOver="if(antiguo!=this){this.src=this.src.split('.gif').join('2.gif')}"   onclick="marcar(this)" name="Nuestros Productos" border="0" src="botones/nuestrosproductos.gif" width="170" height="18"></a></td> 
    <td> <img src="Images/botons_08.jpg" width=1 height=18 alt=""></td> 
    <td width="152" height="18"> 
      <div align="CENTER"><font face="Arial" size="1"><b>FILOSOFIA GOURMET</b></font></div> 
    </td> 
    <td> <img src="Images/botons_10.jpg" width=1 height=18 alt=""></td> 
    <td width="129" height="18"> 
      <div align="CENTER"><font face="Arial" size="1"><b><font color="#000000">CONTACTO 
        Y VENTA</font></b></font></div> 
    </td> 
    <td> <img src="Images/botons_12.jpg" width=1 height=18 alt=""></td> 
  </tr> 
  <tr> 
    <td colspan=11> <img src="Images/botons_13.jpg" width=643 height=1 alt=""></td> 
  </tr> 
</table><iframe name="iframe"></iframe> 
</BODY> 
</HTML> 
Un saludo!
__________________
Cómo escribir

No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.
  #10 (permalink)  
Antiguo 02/09/2005, 13:46
 
Fecha de Ingreso: julio-2005
Mensajes: 58
Antigüedad: 18 años, 9 meses
Puntos: 0
Holas!!

Gracias KarlanKas!! Escritor, programador, comico y quien sabe q mas

Ah y una duda Kar , y si quiero hacerlo con textos? es lo mismo?

Saludos!!!!
Última edición por klisto; 02/09/2005 a las 13:53
  #11 (permalink)  
Antiguo 03/09/2005, 02:24
Avatar de KarlanKas
Moderador extraterrestre
  
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 22 años, 4 meses
Puntos: 61
De nada, hombre!

Con textos es mucho más sencillo.
Código PHP:
<a 
href="nuestros_productos2.html" 
target="iframe" 
onMouseOut="if(antiguo!=this){this.style.color='red'}"
 onMouseOver="if(antiguo!=this){this.style.color='black'}"   
onclick="marcar(this)" >Nuestros productos</a> 
Y la function:
Código PHP:
var antiguo="*";
function marcar(esto){
if(antiguo!="*" && antiguo!=esto){
antiguo.style.color='black';
}
antiguo=esto;
} 
Y ya está!
__________________
Cómo escribir

No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.
  #12 (permalink)  
Antiguo 03/09/2005, 09:30
 
Fecha de Ingreso: julio-2005
Mensajes: 58
Antigüedad: 18 años, 9 meses
Puntos: 0
Holas!!!

GraCIAS por tus ayudas karlankas!

tanto con imagenes como con text funcionan bien

Saludos!
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 11:57.