Impedir el uso del botón derecho del ratón

En Netscape 4 y Explorer 4 podemos impedir que aparezca el menú cuando el usuario pulsa el botón derecho sobre una imagen y, por tanto, impedir que puedan bajarse nuestras imágenes.

Descripción y limitaciones

Lo que haremos será interceptar el evento onMouseDown, que ocurre cuando el usuario pulsa un botón del ratón. Como lo que nos interesa es proteger las imágenes, procuraremos interceptarlo sólo cuando pulse sobre las mismas. Una vez interceptado, deberemos comprobar que el botón pulsado sea el derecho, e impedir en caso afirmativo que aparezca el menú. En este página, sin ir más lejos, está funcionando este código. Intenta bajarte una de las imágenes de arriba y verás.

Desafortunadamente, toda protección realizada con Javascript es susceptible de ser eliminada simplemente configurando el navegador para que no interprete Javascript. Nada es perfecto...

Lo primero es interceptar onMouseDown

Dado que lo que queremos es evitar que el usuario pulse sobre una imagen, lo mejor será interceptar ese evento en las mismas. Y eso es suficiente en Explorer. Sin embargo, y dado que muchas imágenes sirven también como enlaces, en Netscape seguirá apareciendo el menú cuando se de ese caso, por lo que deberemos interceptar también ese evento en los enlaces. Podríamos hacerlo así:

<IMG SRC="..." onMouseDown="nuestroControladorDeEventos()">

Pero, claro, hacer eso con todas nuestras imágenes puede resultar, como decirlo, aburrido. Así que lo mejor será hacer un script que llame al controlador de evento cuando suceda onMouseDown en cualquiera de las imágenes y enlaces del documento:

for (var i=0; i<document.images.length; i++)
  document.images[i].onmousedown=noBotonDerecho;
if (document.layers)
  for (var i=0; i<document.links.length; i++)
    document.links[i].onmousedown=noBotonDerecho;

Supongo que los más avispados se habrán dado cuenta de que nuestro controlador de eventos se va a llamar noBotonDerecho. Hemos de indicar que éste código sólo funciona en los navegadores de cuarta generación (y siguientes) ya que fueron los primeros en soportar el evento que estamos utilizando, onMouseDown. Por eso, para comprobar rápidamente que utilizamos Netscape, preguntamos por la existencia del vector document.layers, que sólo aparece en dicho navegador.

Por último, queda la cuestión de donde colocar esta rutina. Podemos hacer dos cosas. La primera es colocarla en una función que sea llamada desde el evento onLoad, pero eso tiene la desventaja de que el usuario podría bajarse imágenes mientras la página no haya terminado de cargar pero en parte sea ya visible. La otra opción, que recomiendo, es colocarlo al final de la página, después de todas las etiquetas IMG que pueda haber en la misma.

El controlador de eventos

Por último, una vez interceptado el evento, debemos comprobar que el botón pulsado sea el derecho y evitar, si es así, que aparezca el menú. Esto lo hará la siguiente función:

function noBotonDerecho(e) {
  if (document.layers && (e.which == 3 || e.which == 2))
    return false;
  else if (document.all && (event.button == 2 || event.button == 3))
    alert('No tiene usted permiso para intentar bajarse las imagenes');
  return true;
}

Esta función recibe como parámetro un objeto Event, que contiene información sobre el evento interceptado, entre ella cuál de los botones ha sido pulsado. Desafortunadamente, dicho objeto es distinto en Explorer y en Netscape, por lo que deberemos acceder a él de manera distinta según sea un explorador u otro.

En ambas versiones de objeto existe una propiedad que contiene el botón pulsado. Esa propiedad, en caso de haber sido pulsado el botón derecho, será 2 o 3 (dependiendo de si el ratón tiene 2 o 3 botones). Pero, en el caso de Netscape, dicha propiedad se llamará which y en el de Explorer, button.

Por último, una vez comprobado que el botón pulsado ha sido el derecho, debemos evitar que salga el menú. En Netscape basta con que el controlador de evento devuelva false, mientras que en Explorer lo que tenemos que hacer es "distraer" al navegador obligandole a hacer otra cosa, por ejemplo mostrar un mensaje de advertencia al usuario. Y con eso y un bizcocho... hasta el próximo artículo.

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
HAY 33 COMENTARIOS
  • Roger SIadous dijo:

    Lo he intentado varias veces, colocar este codigo en mi pagina, pero no es posible ! Quisiera que me expliquen mas detalladamente los pasos a seguir para insertar este codigo en una pagina ! gracias

  • Eduardo Medina dijo:

    La verad no se mucho, es por eso que me gustaria saber como hacerlo si pudieras explicarme te lo agradeceria mucho se despide Lalo M.

  • Giuseppe dijo:

    Si está bien, mientras navegas no puedes acceder a las imágenes, pero: ¿qué ocurre si acceden a la carpeta de archivos temporales y buscan las imágenes?

  • Rodrigo dijo:

    Lo e intentado copiando y pegando pero no sirve de nada ¿como lo inserto?

  • Susana dijo:

    Me parece muy interesante lo del botón derecho. Ya puestos en el tema, me gustaría saber si alguien sabe cómo impedir el uso del botón "Back" del navegador.

  • pudrete dijo:

    tu guea esta mas mal echa, vale callampa, hasta el juampi hace una guea mejor.

  • aisarc dijo:

    Lo siento, pero no funciona. O al menos a mí no me funciona.

  • RAUl Ramos dijo:

    Ya me gustaria ami, pero no ace nada. Que rollo cuando la publique... Se bajaran todo.

  • Bart dijo:

    Ese tipo de scripts han funcionado hasta ahora pero en la última versión de explorer resulta que al pasar el raton sobre una imágen, sale una barra flotante con opciones para grabar o imprimir. O sea que estos scripts ya no valen. Sabe alguien como anular el menu flotante?

  • Tomas dijo:

    Les comento porque digo que esos scripts no sirven para nada con ningún web browser. El tema es que existen tantos caminos para violar ese método que ya se tornó obsoleto. Ej: Como lo dice el artículo mismo uno es desactivar Java en el explorador, otro es abriendo la página con un editor HTML y borrar la parte del código de Java si el mismo no está protegido; despues se puede utilizar la tecla de "Print Screen", abrir el paint o cualquier editor de imagenes y hacer un "paste" teniendo así la imagen a nuestra disposición, etc. Creo que la única solución viable por el momento para la seguridad de nuestras imagenes en la web es el programa CopySafe que sale como $90 jajaj ni loco (busquenlo en www.downloads.com). Si alguien está al tanto de un programa freeware que sea como ese por favor mandeme un mail!!! Gracias!! y espero que mi comentario sea un aporte. BYE

  • Juanjo dijo:

    Aunque la gente diga que es una kk este método, puede evitar que un 80% de usuarios se bajen imágenes, tengan en cuenta al usuario típico Windows: ni zorra de nada, sólo sabe chatear, mandar emails con Outlook y al mínimo problema ya dice que el ordenador se le ha jodido y la informática no es lo suyo. Claro está que para cualquier usuario avanzado no es barrera, pero para mucha gente sí, porque hay mucha gente que desconoce la existencia de html, JavaScript y todo eso, sólo saben de webs lo que ven en pantalla. Luego otra cosa, la gente que dice que le falla posiblemente fallen ellos por varias razones: no usan la versión del navegador que deben, no tienen habilitado JavaScript, no saben dónde copiar los fragmentos de código dados por el artículo, si no saben picar html y JavaScript porque no son programadores que se dediquen a otra cosa.

  • JUAN dijo:

    OYE NO SE PUEDE PONER EL KODIGO DE HTML EN LA PAGE POR K HABER SI LO PONES MENOS KONFUSO POR K ESO NO SIRVE OK??

  • Ser dijo:

    He creado una Web que no permite usar el botón derecho para copiar una imagen, no permite "arrastrarla" fuera del navegador para que se descargue automáticamente (por ejemplo en el escritorio), no permite seleccionar los textos (ni siquiera con el menú Edición pulsando en "Seleccionar todo"), el código fuente está encriptado para que nadie copie los Script y para que no se vean las rutas de las imágenes ni el texto... Para rematar la faena si pulsas en el menú Archivo y te guardas la página entera en tu disco duro te la guarda sin descargar las imágenes... Solo me queda el problema del menú flotante de Internet Explorer 6. Por favor, quién me dé una solución le daré una copia de mi página para que lo vea y todos los Script (detallados) que hacen falta para conseguir esto.

  • Factor dijo:

    Acabo de encontrarme con dicho problema. A ver.. despues de estarme un buen rato buscando lo he encontrado donde menos esperaba en la pagina de windows. Increible verdad? Ahi os va la direccion : http://www.microsoft.com/windows/ie/using/howto/customizing/imgtoolbar.asp Me gustaria que me enviaran copia de esa web que mencionan con lo de arrastrar, etc Gracias.

  • Ser dijo:

    Ante todo muchas gracias "Factor" te he enviado la dirección de mi web por e-mail. Por otra parte, si arrastran una imagen fuera del navegador a cualquier carpeta o al escritorio por ejemplo, se descarga automáticamente. Para evitar esto existe el siguiente código: function EventoDrag(){ alert("No se puede arrastrar la imagen.") } Este código no es del todo efectivo y se puede saltar de la siguiente manera: Cuando arrastras la imagen aparece un mensaje de alerta y, sin soltar el botón del ratón pulsas Enter o la barra del espacio y el mensaje desaparece permitiéndote continuar arrastrando la imagen para conseguirla. Yo he conseguido una solución mejor basándome en que si una imagen está vinculada lo que se descarga es un acceso directo del vinculo y no la imagen. El ejemplo solo utiliza HTML y consiste en vincular todas las imágenes a una dirección nula que no lleva a ninguna parte (href="javascript:void(null)") pero pensareis que queda mal que aparezca el puntero de la mano en estas imágenes porque pueden llevar a la confusión del "internauta" ¿no? Pues obligando al navegador a mostrarte el cursor por defecto sobre estas imágenes se soluciona el problema (style="cursor: default") Al pulsar sobre esta imagen no pasa nada, es como cualquier otra imagen no vinculada... para el resto de imágenes vinculadas a direcciones reales no hay que hacer nada. Este es mi código:

  • Ser dijo:

    Perdonar pero al parecer el comentario que he puesto debajo de este no se ha enviado correctamente. Quien quiera el código que me lo pida por e-mail y lo envío en un documento de texto. Un saludo!

  • Harry dijo:

    Métete esto en el Body de cada página y fin del problema que aproveche

  • Harry dijo:

    el capullo que diseñó esto no deja pegar códigos... meta http-equiv="imagetoolbar" content="no" (entre los consabidos corchetes de flecha) meta http-equiv="imagetoolbar" content="false" (idem) pon los dos. -A ver si ahora sale-

  • Harry dijo:

    esa mierda de la barra en realidad son comillas Chapó por el programador capullo

  • ANNE dijo:

    HOLAAAAAA,ALGUIEN SERIA TAN amable de explicarme como debo haser para que d mi página se pueda descargar archivos????????contstenme a mi mail

  • manuweb dijo:

    Con Netscape 6 no funciona Si ponemos ya no está habilitado el boton derecho. Salu2

  • Leonardo Llorente dijo:

    Senor(es) Ante todo reciban ustedes un cordial saludo, de parte de un cibernauta interesado en la proteccion de imagenes, el motivo por el cual les escribo es para felicitarlos por esta excelente página y la vez perdiles si son tan amables me pudieran explicar en detalles (brevemente) como puedo proteger una página web, en lo posible sin java script. Mil gracias por su atencion Cordialmente Leonardo Llorente [email protected]

  • el hacker bueno dijo:

    por favor quiero que me expliquen como hacer que cada pagina tenga una clave de entrada por separado y como hacer una sala de chat para el compu del cole gracias..escribanme

  • el jacker bueno dijo:

    esta pagina es buenisima aunque llege hasta la 17 me parecio de lo mejor con ejemplos practicos y divertidos a mi me gustaria aprender mas sobre programacion ¿sera que me podran eseñar por correo? hojala que si gracias y chao..

  • Romulo dijo:

    escribe pez disco en yahoo

  • Warlok dijo:

    Estoy usando opera 7 y si que me puedo bajar todas las imagenes de esta pagina

  • Alberto dijo:

    Si haces click derecho en cualquier parte de la página, arrastras y sueltas sobre la imagen también puedes guardarla. Un saludo.

  • agustin dijo:

    yo digo que las personas que roban o que matan no deben ser liberados por que seguro que duspues hacen algo peor por eso lo que cometen algo como matar no debe ser perdonada.

  • agustin dijo:

    me parese que algunas personas aruianan las culturas a mi me parese que si algien destrosa algo como un ombu en estinciondebe ser arestado o aplicarle una lecion y me parese que deberiamos esforsarnos un poco y hacer la vida mejor yose que se puede.

  • Esther dijo:

    Ola! keria saber si ay q descargarse un programa y como se llama para ponerlo en mi pagina porke estoy arta de q copien mi pagina. Contesta lo antes posible. Gracias

  • joaisy dijo:

    me gustaria que me ayudaran con la programacion del boton eliminar con sript php y mysql con servidor apache bajo ambiente php triad gracias por la colaboracion

  • henry olazabal dijo:

    Como hago que si un campo de de texto en un formulario en html no esta lleno el boton enviar no se active o no envie el formulario

  • Anónimo dijo:

    he estado viendo como sugieren para evitar la utizacion del boton derecho del raton (evitar el robo de imagenes u otros documentos), pero me he estado fijando que en navegadores como el google chromo funciona de igual manera aun metiendo el script de inutilizar el boton derecho Como se podria evitar esto en este navegador (google chroma, no se si tambien en otros como el mozilla etc)??? Muchas gracias Espero respuesta

Conéctate o Regístrate para dejar tu comentario.