Foros del Web » Programando para Internet » Javascript »

Menu Imagen con Onclick seleccionado

 Estas en el tema de Menu Imagen con Onclick seleccionado en el foro de Javascript en Foros del Web. Saludo, Tengo qu ehacer un menu Igual Igual al de http://www.bestwestern.com si lo ven es un menu de imagenes que tiene 3 estados 1. El ...
  #1 (permalink)  
Antiguo 16/10/2009, 00:02
 
Fecha de Ingreso: abril-2007
Mensajes: 53
Antigüedad: 17 años
Puntos: 0
De acuerdo Menu Imagen con Onclick seleccionado
Saludo, Tengo qu ehacer un menu Igual Igual al de http://www.bestwestern.com
si lo ven es un menu de imagenes que tiene 3 estados
1. El normal azul
2. El Over que es amarillo
3. El OnClick que es el que se queda selecionado en AZUL

El menu lo hize con Adobe Fireworks Cs3 y quedo excelente pero .. no se como hacer para que el evento ONclick se quede seleciconado Cuando estoy dentro de la pagina que hize click. y asi susesivamente en cada seccion que haga click el boton se quede en azul (onClick) dependiendo de la pagina en que este. Me ayudan a hacer que se quede seleccionado en Onlcik color azul dentro de cada seccion?

El codigo javascript que genero el Fireworks Cs3 es:
Código PHP:
<script language="JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
  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 && d.getElementById) x=d.getElementById(n); return x;
}
function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
  if (event == "init" && args.length > 2) {
    if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
      img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
      if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
      nbArr[nbArr.length] = img;
      for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
        if (!img.MM_up) img.MM_up = img.src;
        img.src = img.MM_dn = args[i+1];
        nbArr[nbArr.length] = img;
    } }
  } else if (event == "over") {
    document.MM_nbOver = nbArr = new Array();
    for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])?args[i+1] : img.MM_up);
      nbArr[nbArr.length] = img;
    }
  } else if (event == "out" ) {
    for (i=0; i < document.MM_nbOver.length; i++) { img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
  } else if (event == "down") {
    nbArr = document[grpName];
    if (nbArr) for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
    document[grpName] = nbArr = new Array();
    for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
      nbArr[nbArr.length] = img;
  } }
}

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];}}
}

//-->
</script> 
El codigo que despliega los menus es:

Código PHP:
<table border="0" cellpadding="0" cellspacing="0" width="830">
      <tr>
        <td>
        <img src="images/spacer.gif" width="121" height="1" border="0" alt=""></td>
        <td>
        <img src="images/spacer.gif" width="109" height="1" border="0" alt=""></td>
        <td>
        <img src="images/spacer.gif" width="4" height="1" border="0" alt=""></td>
        <td>
        <img src="images/spacer.gif" width="146" height="1" border="0" alt=""></td>
        <td>
        <img src="images/spacer.gif" width="3" height="1" border="0" alt=""></td>
        <td>
        <img src="images/spacer.gif" width="85" height="1" border="0" alt=""></td>
        <td>
        <img src="images/spacer.gif" width="4" height="1" border="0" alt=""></td>
        <td>
        <img src="images/spacer.gif" width="85" height="1" border="0" alt=""></td>
        <td>
        <img src="images/spacer.gif" width="4" height="1" border="0" alt=""></td>
        <td>
        <img src="images/spacer.gif" width="146" height="1" border="0" alt=""></td>
        <td>
        <img src="images/spacer.gif" width="3" height="1" border="0" alt=""></td>
        <td>
        <img src="images/spacer.gif" width="85" height="1" border="0" alt=""></td>
        <td>
        <img src="images/spacer.gif" width="35" height="1" border="0" alt=""></td>
        <td>
        <img src="images/spacer.gif" width="1" height="1" border="0" alt=""></td>
    </tr>
    <tr>
        <td rowspan="5">
        <img name="menu_r1_c1" src="images/menu_r1_c1.gif" width="121" height="36" border="0" alt=""></td>
        <td rowspan="4">
        <a onMouseOut="MM_nbGroup('out');" onMouseOver="MM_nbGroup('over','menu_r1_c2','images/menu_r1_c2_f2.gif','images/menu_r1_c2_f4.gif',1);" onClick="MM_nbGroup('down','navbar1','menu_r1_c2','images/menu_r1_c2_f3.gif',1);" href="javascript:;">
        <img name="menu_r1_c2" src="images/menu_r1_c2.gif" width="109" height="29" border="0" alt=""></a></td>
        <td rowspan="5">
        <img name="menu_r1_c3" src="images/menu_r1_c3.gif" width="4" height="36" border="0" alt=""></td>
        <td>
        <a onMouseOut="MM_nbGroup('out');" onMouseOver="MM_nbGroup('over','menu_r1_c4','images/menu_r1_c4_f2.gif','images/menu_r1_c4_f4.gif',1);" onClick="MM_nbGroup('down','navbar1','menu_r1_c4','images/menu_r1_c4_f3.gif',1);" href="javascript:;">
        <img name="menu_r1_c4" src="images/menu_r1_c4.gif" width="146" height="26" border="0" alt=""></a></td>
        <td rowspan="5">
        <img name="menu_r1_c5" src="images/menu_r1_c5.gif" width="3" height="36" border="0" alt=""></td>
        <td rowspan="2">
        <a onMouseOut="MM_nbGroup('out');" onMouseOver="MM_nbGroup('over','menu_r1_c6','images/menu_r1_c6_f2.gif','images/menu_r1_c6_f4.gif',1);" onClick="MM_nbGroup('down','navbar1','menu_r1_c6','images/menu_r1_c6_f3.gif',1);" href="javascript:;">
        <img name="menu_r1_c6" src="images/menu_r1_c6.gif" width="85" height="27" border="0" alt=""></a></td>
        <td rowspan="5">
        <img name="menu_r1_c7" src="images/menu_r1_c7.gif" width="4" height="36" border="0" alt=""></td>
        <td>
        <a onMouseOut="MM_nbGroup('out');" onMouseOver="MM_nbGroup('over','menu_r1_c8','images/menu_r1_c8_f2.gif','images/menu_r1_c8_f4.gif',1);" onClick="MM_nbGroup('down','navbar1','menu_r1_c8','images/menu_r1_c8_f3.gif',1);" href="javascript:;">
        <img name="menu_r1_c8" src="images/menu_r1_c8.gif" width="85" height="26" border="0" alt=""></a></td>
        <td rowspan="5">
        <img name="menu_r1_c9" src="images/menu_r1_c9.gif" width="4" height="36" border="0" alt=""></td>
        <td rowspan="3">
        <a onMouseOut="MM_nbGroup('out');" onMouseOver="MM_nbGroup('over','menu_r1_c10','images/menu_r1_c10_f2.gif','images/menu_r1_c10_f4.gif',1);" onClick="MM_nbGroup('down','navbar1','menu_r1_c10','images/menu_r1_c10_f3.gif',1);" href="javascript:;">
        <img name="menu_r1_c10" src="images/menu_r1_c10.gif" width="146" height="28" border="0" alt=""></a></td>
        <td rowspan="5">
        <img name="menu_r1_c11" src="images/menu_r1_c11.gif" width="3" height="36" border="0" alt=""></td>
        <td>
        <a onMouseOut="MM_nbGroup('out');" onMouseOver="MM_nbGroup('over','menu_r1_c12','images/menu_r1_c12_f2.gif','images/menu_r1_c12_f4.gif',1);" onClick="MM_nbGroup('down','navbar1','menu_r1_c12','images/menu_r1_c12_f3.gif',1);" href="javascript:;">
        <img name="menu_r1_c12" src="images/menu_r1_c12.gif" width="85" height="26" border="0" alt=""></a></td>
        <td rowspan="5">
        <img name="menu_r1_c13" src="images/menu_r1_c13.gif" width="35" height="36" border="0" alt=""></td>
        <td>
        <img src="images/spacer.gif" width="1" height="26" border="0" alt=""></td>
    </tr>
    <tr>
        <td rowspan="4">
        <img name="menu_r2_c4" src="images/menu_r2_c4.gif" width="146" height="10" border="0" alt=""></td>
        <td rowspan="4">
        <img name="menu_r2_c8" src="images/menu_r2_c8.gif" width="85" height="10" border="0" alt=""></td>
        <td rowspan="4">
        <img name="menu_r2_c12" src="images/menu_r2_c12.gif" width="85" height="10" border="0" alt=""></td>
        <td>
        <img src="images/spacer.gif" width="1" height="1" border="0" alt=""></td>
    </tr>
    <tr>
        <td rowspan="3">
        <img name="menu_r3_c6" src="images/menu_r3_c6.gif" width="85" height="9" border="0" alt=""></td>
        <td>
        <img src="images/spacer.gif" width="1" height="1" border="0" alt=""></td>
    </tr>
    <tr>
        <td rowspan="2">
        <img name="menu_r4_c10" src="images/menu_r4_c10.gif" width="146" height="8" border="0" alt=""></td>
        <td>
        <img src="images/spacer.gif" width="1" height="1" border="0" alt=""></td>
    </tr>
    <tr>
        <td>
        <img name="menu_r5_c2" src="images/menu_r5_c2.gif" width="109" height="7" border="0" alt=""></td>
        <td>
        <img src="images/spacer.gif" width="1" height="7" border="0" alt=""></td>
    </tr>
</table> 
me ayudan PORFAVOR!!!!!! gracias
  #2 (permalink)  
Antiguo 16/10/2009, 08:06
Avatar de Adler
Colaborador
  
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 17 años, 4 meses
Puntos: 126
Respuesta: Menu Imagen con Onclick seleccionado
Hola

En el ejemplo que diste, lo primero es que ese menú son imágenes. Al posicionar el ratón sobre la imagen se produce un rollover, al igual que al quitarlo. Así que busca por el termino rollover de imagenes. En cuanto a que la imagen queda seleccionada cuando se pasa a otra sección, se hace del lado del servidor, insertando un include con el menú en cada sección y comprobando con condicionales o con un select en que sección se está. Para ello creas una variable seccion y le otorgas, por ejemplo, un número. Arreglo al valor de esa variable quedará seleccionada una imagen u otra

Suerte
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />
  #3 (permalink)  
Antiguo 16/10/2009, 11:56
 
Fecha de Ingreso: abril-2007
Mensajes: 53
Antigüedad: 17 años
Puntos: 0
Respuesta: Menu Imagen con Onclick seleccionado
Adler gracias por tu respuesta. Definitivamente que se que es en el lado del Servidor!!... mi pregunta es tienes el Code ya sea PHP en este caso para poder asignarle esto al boton que este selecionado de acuerdo a la seccion?
y en el msmo boton como lo llamo
gracias y un abrazo!
  #4 (permalink)  
Antiguo 17/10/2009, 12:52
Avatar de Adler
Colaborador
  
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 17 años, 4 meses
Puntos: 126
Respuesta: Menu Imagen con Onclick seleccionado
Hola

No, no lo tengo. Pero con la directrices que te dí, te debería de ser suficiente para hacerlo

Suerte
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />
  #5 (permalink)  
Antiguo 20/10/2009, 13:37
 
Fecha de Ingreso: abril-2007
Mensajes: 53
Antigüedad: 17 años
Puntos: 0
Respuesta: Menu Imagen con Onclick seleccionado
UFALE .. sin el code en PHP esta disificl porque no se mucho PHP :(
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 12:09.