 |
 |
 |
 |
|
 |
|
|
 |
|
|
 |
|
|
 |
|
|
 |
|
|
 |
 |
 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 |
|
- 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 |
|
|
|
|
|
| MIS FOTOS... |
 |
| CITA |
 |
La gloria de los viejos está en sus orejas Burkina Faso
|
|
No hay mañana que deje de convertirse en ayer. Proverbio persa
|
|
