Regístrate para
recibir el boletín de
e-Contento.com. Ya somos 4356 suscriptores. [+]

Listado de Artículos  
 Cómo hacer un menú con rollOvers paso a paso.
La finalidad de este artículo es hacer un menú, que contenga rollOvers y que guarde la información sobre la solapa que ha sido pulsada. Más simple que esto no lo hay. Puedes descargarte los ejemplos
Añadir a Gennio Añadir a del.icio.us Añadir a Digg Añadir a Meneame Añadir a Technorati Suscribir a Bloglines Suscribir a Netvibes Suscribir a Google Suscribir a Windows Live Suscribir a Mi Yahoo! Sindicación RSS. Feed


  • Paso 1: Crear la tabla
  • Paso 2: Precargar las imágenes
  • Paso 3: Función para cambiar las imágenes
  • Paso 4: Cambio de imágenes según "estado"

Paso 1: Crear la tabla
Lo primero que tenemos que hacer es crear la tabla con las imágenes que forman el menú.

<table cellpadding="0" cellspacing="0" border="0">
<tr>
  <td><img src="img/solapa_10.gif" border="0"></td>
  <td><img src="img/solapa_20.gif" border="0"></td>
  <td><img src="img/solapa_30.gif" border="0"></td>
  <td><img src="img/solapa_40.gif" border="0"></td>
</tr>
</table>

He omitido width="100" height="16" para aumentar la legibilidad del código.


Paso 2: Precargar las imágenes
Abrimos la etiqueta <script> en la cabecera y escribimos el código para precargar las imágenes:

<script language="JavaScript">
// abrimos el script
// precargamos las imagenes

// off para las apagadas
// on para las encendidas

s10_off = new Image();
s10_off.src = "img/solapa_10.gif";
s10_on = new Image();
s10_on.src = "img/solapa_10_on.gif";

s20_off = new Image();
s20_off.src = "img/solapa_20.gif";
s20_on = new Image();
s20_on.src = "img/solapa_20_on.gif";

s30_off = new Image();
s30_off.src = "img/solapa_30.gif";
s30_on =new Image();
s30_on.src = "img/solapa_30_on.gif";

s40_off = new Image();
s40_off.src = "img/solapa_40.gif";
s40_on = new Image();
s40_on.src = "img/solapa_40_on.gif";

// cerramos el script
</script>

Lo que hemos hecho aquí, es asgnarle a cada imagen un nombre. Ahora lo que debemos hacer es darle un nombre también a la imagen de la tabla. Así luego podremos hacer una función que asigne una nueva imagen a la imagen del menú. Esto se hace de la siguiente forma:

<table cellpadding="0" cellspacing="0" border="0">
<tr>
  <td><img src="img/solapa_10.gif" name="s10" ></td>
  <td><img src="img/solapa_20.gif" name="s20" ></td>
  <td><img src="img/solapa_30.gif" name="s30" ></td>
  <td><img src="img/solapa_40.gif" name="s40" ></td>
</tr>
</table>



Paso 3: Función para cambiar las imágenes
Ahora ya sólo nos queda hacer una función a la que le pasemos dos parámetros. El primero que sea la imagen origen, y el segundo la imagen destino (por decirlo de forma fácil). La llamaremos function cambiar() .

<script language="JavaScript">
// precargamos las imagenes
...

function cambiar(idImg,idImgNueva) {
  document.images[idImg].src = eval(idImgNueva+".src");
  //el 1er parametro es el nombre de la imagen
  //el 2o parametro es la que queremos cambiar
}
</script>

Ya sólo nos falta introducir controladores de eventos que respondan a pasar por encima de una imagen y a salir de ella. Estos controladores se llaman onMouseOver (cuando estás encima) y onMouseOut (cuando sales). Un error muy común es ponérlos como atributos de la etiqueta <img>, pero esto sólo funciona en Internet Explorer. No así en Netscape.

Lo que tenemos que hacer es encerrar a la etiqueta <img> entre enlaces
<a href="..." onMouseOver="..." onMouseOut="...">
  <img src="...">
</a>

Asi, si controlamos siempre si el ratón está encima o no.

Con esto, ya tenemos una primera versión de un menú con RollOvers.
ver ejemplo.
ver codigo fuente.



Paso 4: Cambio de imágenes según "estado"
Ahora, lo que nos interesa es saber en qué sección estamos. Vamos, saber qué solapa hemos pinchado.
Para ello creamos una variable nueva llamada estado, que guarda el valor de la última imagen sobre la que hemos hecho click.
Una imagen tiene entonces tres estados: on (cuando estás encima), off (cuando no estás encima y no está activa) y act (cuando has hecho click). Por tanto, tenemos que precargar las nuevas imágenes (cuando están activas).
Cuando yo paso por encima sigo poniéndo a On la imagen.
Cuando yo hago click, pongo esa imagen a activa
Pero cuando salgo de una imagen, debo comprobar si es la que está activa (para ponerla a act) o no (para ponerla a off).

<script language="JavaScript">
// precargamos las imagenes
...

estado="";

function cambiar(idImg,idImgNueva) {
  document.images[idImg].src = eval(idImgNueva+".src");
  /* el 1er parametro es el nombre de la imagen
  el 2o parametro es el la que queremos cambiar
  por la construccion de los nombres de las imagenes, el
  idImgNueva puede ser idImg + "_on" o
  idImgNueva puede ser idImg + "_off" o
  idImgNueva puede ser idImg + "_act"
  */
}

function entrar(id) {
  // se ejecuta cuando pasamos por encima
  idNuevo = id + "_on";
  cambiar(id,idNuevo);
}

function salir(id) {
  // se ejecuta cuando "salimos" de la imagen
  // miramos si la solapa esta activa o no
  if (estado==id) {
    idNuevo = id + "_act";
  } else {
    idNuevo = id + "_off";
  }
  cambiar(id,idNuevo);
}

function activaSolapa(id){
  // deactivamos la solapa activa
  if (!(estado=="")){
    cambiar(estado,estado+"_off");
  }
  estado=id; //guardamos cuál es la solapa activa
  cambiar(estado,estado+"_act");
}
</script>


Con esto, ya tenemos una versión definitiva de un menú con RollOvers.
ver ejemplo.
ver codigo fuente.


por Juan Antonio Jiménez Torres


volver
 RECOMENDAMOS
Madroñosfera
fotoMadrid
Sokoban en JavaScript
Directorio e-Contento

 MIS FOTOS...

 CITA
Partiendo de la nada alcance las más altas cimas de la miseria.  Julius Marx (Groucho)

No importa quién soy. Me gustaría ser puente, plaza del pueblo, parque con columpio y sobre todo un barquichuelo en el río que fluye camino del mar [...] El secreto es aprender a seguir con el río. Pedro Miguel Lamet



Mi ICQ es 44428945 contento@mixmail.com Visita mi otra web: www.fotoMadrid.com - fotografías, wallpapers y postales de Madrid