mostar menu al hacer click

[atapuerkasman]

Saludos!!!! Me gustaría hacer un script que me permitiera que en una imagen mostrada si pulso con el boton derecho me salga un menu(como el que te sale nomalmente de "Guardar como" y demás). de momento tengo esto:

Código:

<script type="text/javascript">

	function queBoton(event){
		var navegador= navigator.appName;
		
		if(navegador == "Microsoft Internet Explorer"){
		
			if(event.button==1){
				alert("Has clickado con el botorn izquierdo");
			}else if(event.button==2){
				alert("Has clickado con el boton derecho");
			}else if(event.button==4) {
				alert("Boton centarl del raton");
			}else
				alert("No se que has pulsado"+event.button);
		}else if(navegador == "Netscape"){
			if(event.button==0){
				alert("Has clickado con el botorn izquierdo");
			}else if(event.button==2){
				alert("Has clickado con el boton derecho");
			}else if(event.button==1) {
				alert("Boton centarl del raton");
			}else
				alert("No se que has pulsado"+event.button);
		}
	}
</script>


<img id="img_plano" name="imgplano" alt="planta baja" src="ruta_imagen.jpg" align="bottom" 
 	 onmousedown="queBoton(event)" >

Alguien me puede hechar una mano???

[ceSharp]

hola,
puedes crear un div oculto que se muestra cuando haces click derecho en la imagen. el problema que he visto es que te aparece el div,pero también el menú contextual, con lo cual yo creo que te va a quedar feo. mira, te paso la ñapa para que lo veas en directo:
-------------------------------------
function queBoton(event){
var navegador= navigator.appName;

if(navegador == "Microsoft Internet Explorer"){

if(event.button==1){
alert("Has clickado con el botorn izquierdo");
}else if(event.button==2){
alert('seleccione una de las siguientes opciones');
document.getElementById('menu_contx').style.displa y='inline';

}else if(event.button==4) {
document.getElementById('menu_contx').style.displa y='inline';
}else
alert("No se que has pulsado"+event.button);
}else if(navegador == "Netscape"){
if(event.button==0){
alert("Has clickado con el botorn izquierdo");
}else if(event.button==2){
alert("Has clickado con el boton derecho");
}else if(event.button==1) {
alert("Boton centarl del raton");
}else
alert("No se que has pulsado"+event.button);
}
}
------------------------------
<img id="img_plano" name="imgplano" alt="planta baja" src="imgs/001.jpg" align="bottom"
onmousedown="queBoton(event)">
<div id="menu_contx" style="position:absolute; left:25px; top: 50px; background-color:yellow;display:none">
<table border="1">
<tr>
<td>
opcion1</td>
</tr>
<tr>
<td>
opcion2</td>
</tr>
<tr>
<td>
opcion3</td>
</tr>
</table>
</div>
---------------------------
por un lado compruebas que más o menos está situado cerca de la imagen el div oculto, tocando las propiedades left y top del <div>.
por otro lado, si haces clic derecho, aparece el div oculto pero también el menú contextual, solo he podido quitarlo si pones también el alert de 'seleccione una opción'. y como verás con el botón rueda lo hace como me imagino que querrás tú que te lo haga, pero creo que no hay mucha solución, al menos yo la desconozco.

saludos.

[ceSharp]

...por cierto, solo lo he añadido para IE, si usas otro a lo mejor no te sale mi añadido...

[atapuerkasman]

Muchas gracias, voy a probarlo y te comento. Ya me habia dado cuenta de que si no metía un alert, me seguia mostrando el menu aunque detectara el click derecho y pusiera un return.

[atapuerkasman]

ya lo he probado, una cosilla cuidado xq ha metido un espacio en esta linea y si no se corrige no funciona nada:

document.getElementById("menu_contx").style.display="inline";

Ya he visto lo que hace pero no es "exactamente" lo que yo quiero, lo voy a volver a intentar explicar. Yo quiero que al pinchar una imagen te salga un menu desplegable como el que te sale al pinchar normalmente con el boton derecho, pero con las opciones que yo quiera.

[paskuini]

buscas algo parecido a esto?

[atapuerkasman]

Exactamente eso buscaba!!!!! muchas gracias xDDDDDDDD

[atapuerkasman]

Una cosilla más que añadir al tema. Con el código del javascript de la páguina anterior he conseguido adaptarlo un poco a mis necesidades de manera que solo me muestre el menu desplegable cuando pincho en una imagen. El problema es que no consigo que me cargue bien el <style> que va dentro de <head>.

Con lo cual el resultado es que el menú me lo muestra cutre, arriba de la página, sin colores y ocupándome mucho espacio. Como podría solucionarlo?????

si hace falta incluyo el código pero básicamente es igual al de la página pero llamándolo desde un metodo onclick=visibilidad() y oncontextmenu=sombra() de la imagen.

[atapuerkasman]

Ya lo he solucionado!!! eran unos problemas mios de un cambio de nombre y colocación del script. Pero nuevos problemas surgen

Quiero que funcione en todos los navegadores pero me he encontrado con que el firefox no es compatible con la funcion oncontextmenu(). He hecho que llame a una función más general que recoge el click del ratón para cada navegador, pero aun así en mozilla sigue sin funcionar. Os paso el codigo.

Código:

<script type="text/javascript">
function detectarBoton(event){
	
	//Clausulas para detectar que boton se esta pulsando en que navegador
	
	if(navigator.appName=='Netscape'){
		//boton derecho pulsado en navegador Netscape
		alert("has pulsado el boton: "+event.button)
		if(event.button==2){
			sombra();
			alert("pulsado boton derecho");
		}else if(event.button==0){
			visibilidad();
		}
	
	}else   if (navigator.appName.indexOf('Microsoft')!=-1){
		//boton derecho pulsado en navegador Explorer
		if(event.button==2){
			sombra();
			alert("pulsado boton derecho");
		}else if(event.button==1){
			visibilidad();
		}
	}
	
	
}

Firefox detecta la pulsacion del boton derecho(num =2) pero no muestra nada, En chrome y explorer funciona perfectamente.

[atapuerkasman]

Me sigo respondiendo yo solo

Ya va un poquito mejor, eran que chrome utiliza otras llamadas para obtener los anchos y los altos, tanto del cliente como del cursor y demás. Lo he corregido pero en Chrome no me muestra el menu al pulsar el botón derecho. ahí os va el código

yo sigo al tema :(

Código:

<script type="text/javascript">
function detectarBoton(event){
	
	//Clausulas para detectar que boton se esta pulsando en que navegador
	
	if(navigator.appName=='Netscape'){
		//boton derecho pulsado en navegador Netscape
		
		if(event.button==2){
			
			//hay alguna incompativilidad en la funcion sombra
			sombra();
			alert("pulsado boton derecho");
			
		}else if(event.button==0){
			
			visibilidad();
		}
	
	}else   if (navigator.appName.indexOf('Microsoft')!=-1){
		//boton derecho pulsado en navegador Explorer
		if(event.button==2){
			sombra();
			
		}else if(event.button==1){
			visibilidad();
		}
	}
	
	
}
</script>
  
  <script type="text/javascript">
  
  	//posicion absoluta del menu=0, menu con el boton derecho=1
  	var menutipo=1;
  	
  	//mostramos el menu
  function sombra(e){
  		
  		if(document.getElementById){
  			mimenu=document.getElementById("menudesplegable");
  		
  		}else if(document.all){
  			mimenu=document.all.menudesplegable;
  		}
  	
  	
  	if(!e){
  		var e=window.event;
  	}
  	
  	
	//tamaño de la ventana - posicion del puntero
  	if (navigator.appName=='Netscape'){
  		//tamaño de la ventana - posicion del puntero
  	  	var borde_derecho=window.innerWidth - document.body.clientWidth;
  	  	var borde_inferior=window.innerHeight - document.body.clientHeight;
  	 
  	  	//distancia del menu al puntero
  	  	
  	  	if(borde_derecho< mimenu.innerWidth){
  	 
  	  		mimenu.style.left=document.body.scrollLeft + document.body.clientWidth - menudesplegable.innerWidth + 'px';
  	  		mimenu.style.top= document.body.scrollTop + document.body.clientHeight - menudesplegable.innerHeight + 'px';
  	  		
  	  	}else{
  	
  	  		mimenu.style.left=document.body.scrollLeft+ document.body.clientWidth+ 'px';
  	  		mimenu.style.top= document.body.scrollTop + document.body.clientHeight + 'px';
  	  	}

   }else   if (navigator.appName.indexOf('Microsoft')!=-1){
	   
	   //tamaño de la ventana -posicion del puntero
	   var borde_derecho=document.body.offsetWidth - e.clientX;
	  	var borde_inferior=document.body.offsetHeight- e.clientY;

	  	//distancia del menu al puntero
	  	if(borde_derecho < mimenu.offsetWidth)  {
        mimenu.style.left =  document.body.scrollLeft + e.clientX - menudesplegable.offsetWidth + 'px';
  		mimenu.style.top = document.body.scrollTop + e.clientY- menudesplegable.offsetHeight+ 'px';
  	}
        else { 
           mimenu.style.left = document.body.scrollLeft + e.clientX + 'px';
           mimenu.style.top= document.body.scrollTop + e.clientY+ 'px';
     }
	  	
   }
  	
  	alert("posicion x: "+mimenu.style.left+"\nPosicion y: "+mimenu.style.top);
  	
  	
  	
  	       
     //alert("Distancia del menu al puntero: "+mimenu.style.left+"\n Distancia del menu horizontal: "+mimenu.style.top);
     
     mimenu.style.visibility='visible';
  	return false;
  }
  	
  	
  function visibilidad(){  
	  
	   if (document.getElementById) {  
	      mimenu = document.getElementById("menudesplegable")  
	   }else if (document.all) {  
	      mimenu = document.all.menudesplegable;  
	   }  
	  
	   mimenu.style.visibility = "hidden"  
	  
	}  
	 
	
  </script>