[Aporte] Cambiar el menu contextual (Click derecho)

omarinfinito · #1 (**permalink**) 09/09/2013, 15:29

Hola amigos de FDW

Este es un pequeño aporte que hize a base de algunos codigos de internet, la verdad no se si en "Javascript" se pueden postear aportes, espero que si

Bueno, para empezar, lo primero que haremos sera Eliminar el menu contextual original

Código Javascript:

Ver originalfunction inhabilitar(){ 
    return false 
} 
document.oncontextmenu=inhabilitar;

Ya que hicimos esto, verificaremos si el usuario da click derecho

Código Javascript:

Ver originalif(document.layers) window.captureEvents(Event.MOUSEDOWN); function bloquear(e){
if (navigator.appName == 'Netscape' && ( e.which == 2 || e.which == 3)) { position(event);return false; }
if (navigator.appName == 'Microsoft Internet Explorer' && (event.button == 2 || event.button == 3)) {
position(event);return false; }} window.onmousedown=bloquear; document.onmousedown=bloquear;

Donde "position(event);" es la función que crearemos ahora:

Código Javascript:

Ver originalfunction position(event){
    var MenuContextual = document.getElementById('MenuContextual');
 
        MenuContextual.style.display = "";
 
    var x = event.clientX;
 
    var y = event.clientY;
 
 
        MenuContextual.style.left = parseInt(x)+parseInt("10");
        MenuContextual.style.top = parseInt(y)-parseInt("20");
 
}

Ahora una funcion que nos indique cuando quitar el menu...

Código Javascript:

Ver originalfunction ocultar(){
    var MenuContextual = document.getElementById('MenuContextual');
 
        MenuContextual.style.display = "none";
}

Ahora solo falta el codigo html+css.
E aqui el css

Código CSS:

Ver original#MenuContextual{
position:absolute;
}

Y aqui el html

Código HTML:

Ver original<body onclick="ocultar();" onload="ocultar();">
 
 
 
<div onclick="ocultar();" id="MenuContextual">
<a href="#">Contactanos</a><br>
<a href="#">Conocenos</a><br>
<hr>
© Omarinfinito
</div>
 
 
 
</body>

Pueden modificar los enlaces, !agregarle imagenes ó todo el codigo que ustedes quieran¡
Eso fue todo, fue breve y rapido, eh aqui el codigo completo para los flojos

Código Codigo completo:

Ver original<script type='text/javascript'>
if(document.layers) window.captureEvents(Event.MOUSEDOWN); function bloquear(e){
if (navigator.appName == 'Netscape' && ( e.which == 2 || e.which == 3)) { position(event);return false; }
if (navigator.appName == 'Microsoft Internet Explorer' && (event.button == 2 || event.button == 3)) {
position(event);return false; }} window.onmousedown=bloquear; document.onmousedown=bloquear;
function inhabilitar(){ 
    return false 
} 
 
document.oncontextmenu=inhabilitar;
function position(event){
    var MenuContextual = document.getElementById('MenuContextual');
 
        MenuContextual.style.display = "";
 
    var x = event.clientX;
 
    var y = event.clientY;
 
 
        MenuContextual.style.left = parseInt(x)+parseInt("10");
        MenuContextual.style.top = parseInt(y)-parseInt("20");
 
}
function ocultar(){
    var MenuContextual = document.getElementById('MenuContextual');
 
        MenuContextual.style.display = "none";
}
</script>
<style>
#MenuContextual{
position:absolute;
}
</style>
 
<body onclick="ocultar();" onload="ocultar();">
 
 
 
<div onclick="ocultar();" id="MenuContextual">
<a href="#">Contactanos</a><br>
<a href="#">Conocenos</a><br>
<hr>
© Omarinfinito
</div>
 
 
 
</body>