1 .
Introducción
2 .
Ocultar el menú
3 .
Mostrar un mensaje
4 .
Mostrar un Menú contextual
5 .
Menú Final
El objetivo de este artículo es capturar en Internet Explorer 5 los
eventos producidos por el botón derecho del ratón, y hacer menús contextuales
o menús flotantes que respondan a dicho evento.
Introducción
Muchas veces he querido abrir otra página web o simplemente ver su
código y he hecho click con el botón secundario del ratón. Cuál ha sido mi
sorpresa al descubrir que no sucedía nada, o que el creador del web se
permitía mostrarme una ventanita con alguna broma derivada del uso del botón
derecho del ratón. Esas son las cosas que vamos a mostrar a lo largo
del siguiente artículo...
Ocultar el menú
Esto es muy fácil. Basta con que el controlador de evento
onContextMenu, llame a una función que no haga
nada. Así, pondremos lo siguiente en la etiqueta body.
<body onContextMenu="return false">
Podemos ver un ejemplo y su
código fuente.
Mostrar un mensaje
Con la misma facilidad que en el ejemplo anterior, podemos mostrar un
mensaje indicando que el botón derecho está deshabilitado.
<body onContextMenu="alert('El botón derecho está deshabilitado')">
Podemos ver un ejemplo y su
código fuente.
Mostrar un Menú contextual
El avispado lector, se habrá dado cuenta que cuando se produzca este
evento puede llamar a cualquier función. Eso sí, sin que se nos olvide el
return false, que hace que la función devuelva
algo y así evitamos que se despliegue el otro menú.
Podemos incluso, desplegar nuestro propio menú contextual. Lo que hacemos,
es que cuando se pulse el botón derecho, se muestra una capa con nuestro menú.
La función mostrarMenu, se encarga de hacer
visible la capa además de controlar la posición donde se muestra.
<!--[if IE 5]>
<div id="ie5menu" class="menu">
<div class="menuitems">www.programacion.net</div>
<div class="menuitems">www.webestilo.com</div>
...
</div>
<![endif]-->
Lo que está escrito entre los comentarios
, es interpretado únicamente por el
Internet Explorer 5 o superior. El resto de los navegadores, lo consideran como
simples comentarios.
Con el siguiente script, nos encargamos de mostrar el menú cuando se haga
un click con el botón derecho y de ocultar cuando se haga click con el izquierdo.
<script language="JavaScript1.2">
if (document.all && window.print){
document.oncontextmenu=mostrarMenu;
document.body.onclick=ocultarMenu;
}
</script>
siendo mostrarMenu y
ocultarMenu, las siguientes funciones:
function mostrarMenu(){
// colocamos la capa donde hemos hecho click con el ratón
menuDiv.style.left = document.body.scrollLeft + event.clientX;
menuDiv.style.top = document.body.scrollTop + event.clientY;
// hacemos la capa visible
menuDiv.style.visibility = "visible";
return false;
}
function ocultarMenu(){
// ocultamos la capa
menuDiv.style.visibility="hidden";
}
Podemos ver un ejemplo y su
código fuente.
Menú Final
Ya tenemos un menú contextual simple. Ahora podemos refinarlo un poco y
añadirle algunas funcionalidades. Lo primero es hacer un control sobre dónde
se va a mostrar el menú y comprobar que no se sale del límite de la pantalla.
Otras funcionalidades añadidas son resaltar la opción del menú
(encender) y desresaltar
(apagar).
function encender(){
if (event.srcElement.className=="menuitems"){
event.srcElement.style.backgroundColor="highlight";
event.srcElement.style.color="white";
}
}
function apagar(){
if (event.srcElement.className=="menuitems"){
event.srcElement.style.backgroundColor="";
event.srcElement.style.color="black";
}
}
Podemos ver un ejemplo y su
código fuente.
Últimos comentarios
Últimos 5 comentarios
SPAM (26/02/2006)
Por
Como pongan sus emails correctos, les van a inflar a span
Ya logre algo para que no puedan ver el codigo fuente (18/11/2005)
Por
Hola amigos, leia sus comentarios, hice algo relacionado con frames y pantallas completas, les juro que no se puede ver el codigo... bueno, esto es relativo porque ahora quiero deshabilitar la MALDITA TECLA SHIFT, pues apretandola sale la direccion libre y de nada sirve deshabilitar todo, ALGUIEN SABE COMO DESHABILITAR SOLAMENTE SHIFT, no todo el teclado, SOLO SHIFT, por fa compartan sus cositas please, hasta pronto y cuidense chicos. Gracias.
Mensaje de error al guardar (18/04/2005)
Por
Hola, no se si me prodrian ayudar con esta pregunta q tengo hace mucho tiempo, en algunas paginas cuando la intento guardar me sale un mensaje de q no se ha podido guardar en el lugar especificado.. quisiera saber como es ese codigo para añadirlo en mi página para q asi no guarden mi información.
Boton derecho del raton (28/02/2005)
Por
No se si es oportuno que hable de esto, pero por favor les pido ayuda repecto a este tema, hace unos dias atras que trato de abrir un link con el boton derecho del raton y no abre, sin embargo antes si lo podia hacer, algo le paso a mi naveagador el explorer. Pero cuando presiono detener y luego F5 si habre la paginita.
alguien sabe si se puede deshabilitar la barra de menus? (14/11/2004)
Por
Si alguno sabe me puede decir como? he buscado y no encuentro algùn codigo o script... serìan tan amables de mandarlo por correo?....... es todo, la pàgina estoa buena eh?....
Artículos
