Cambiar href del tag a e img

Enano_la22 · #1 (**permalink**) 21/12/2011, 05:23

Hola a todos, lo que quiero hacer es algo complicado, e intentado pero me cuesta bastante, espero me puedan ayudar....el tema es el siguiente:
lo que necesito hacer es tomar una pagina "Z" cualquiera y agregarle un menu con opciones a los tag <a> y <img>, de manera que al hacer click derecho me aparezca:
-navegar
-opcion2
-opcion3

Si clickeo en la opcion navegar, me tiene que redirigir hacia la pagina donde apunta ese link. Lo que logre hasta ahora es insertar con Java Script el menu en cada tag <a> e <img> pero lo que no logro hacer es asociarle el valor del href del tag a la opcion "navegar" para que al hacer click me pueda dirigir hacia la pagina donde me lleva el link....Es posible hacerlo de alguna manera?? Si necesitan algo de codigo para ver como hice lo otro diganme. muchas gracias!

piqui81 · #2 (**permalink**) 21/12/2011, 08:10

[URL="http://www.cristalab.com/tutoriales/reemplazar-y-bloquear-click-derecho-con-javascript-c65420l/"]http://www.cristalab.com/tutoriales/reemplazar-y-bloquear-click-derecho-con-javascript-c65420l/[/URL]Mirá acá a ver si te sirve.

este con jquery está muy lindo.

[URL="http://web.ontuts.com/tutoriales/como-crear-un-menu-contextual-en-javascript-mediante-jquery/"]http://web.ontuts.com/tutoriales/como-crear-un-menu-contextual-en-javascript-mediante-jquery/[/URL]

saludos.

Enano_la22 · #3 (**permalink**) 21/12/2011, 09:05

Muchas Gracias por el aporte!! El problema que tengo es por ej:
tengo un tag a asi:
<a href="http://www.forosdelweb.com">Foros del web</a>
Luego lo que hago es ponerle a todos los tag a, el menu. Hasta ahi bien... Cuando toco con click derecho en Foros del web me sale el menu con opciones,
-navegar
-opcion1
-opcion2
Lo que yo quiero es cuando toco en navegar me lleve a http://www.forosdelweb.com. El tema es que quiero q cada navegar de cada tag a me lleve al href que tienen, y nose como decirle a la opcion navegar del menu que tome esos valores...

Lo que funciona es asignarle a navegar un href para todos, porque lo cambio en el menu, pero quiero que sea dinamico, nose como asociar al href de la opcion navegar del menu el href del tag a

Dnielf · #4 (**permalink**) 21/12/2011, 11:51

Ojalá te sirva, aunque no he usado jQuery. La idea es capturar el enlace con e.target :

http://jsfiddle.net/dnielF/fywkk/65/

marlanga · #5 (**permalink**) 22/12/2011, 16:28

Aquí tienes algo que he programado en 10 minutos:

Código HTML:

<html>
	<head>
		<title>Prueba</title>
		<style>
			div#contexto { background-color:red; padding:40px; text-align:center; margin: 50;}
			div#menu { position:absolute; top:0; left:0; display:none; border: 2px solid black; }
			div#menu a { display:block; background-color:blue; color:pink; text-decoration:none; padding:2px;}
			div#menu a:hover { background-color:pink; color:blue;}
		</style>
		<script>
			var capa;
			var menu;
			var temporizador=null;
			
			function inicio(){	
				menu=document.getElementById("menu");
				capa=document.getElementById("contexto");
				capa.oncontextmenu=muestraMenu;
			}
			function actualizaTempo(tiempo){
				if (temporizador)
					clearTimeout(temporizador);
				temporizador=setTimeout("ocultaMenu();",tiempo);
			}
			function muestraMenu(e){
				e.preventDefault();
				e.stopPropagation();

				menu.style.top=e.pageY-5;
				menu.style.left=e.pageX-5;
				menu.style.display="block";
			}
			function ocultaMenu(){
				if (temporizador)
					clearTimeout(temporizador);
					
				menu.style.display="none";
			}
			
			function log(texto){
				var log=document.getElementById("log");
				log.innerHTML=texto;
				ocultaMenu();
			}
			
		</script>
	</head>

	<body onload="inicio();">
		<div id="contexto"> PINCHA BOTON DERECHO DENTRO DE MI </div>
		<div id="log"></div>
		<div id="menu" onmouseover="actualizaTempo(10000);" onmouseout="actualizaTempo(300);">
			<a href="#" onclick="log('Elegida opcion 1');">Opcion 1</a>
			<a href="#" onclick="log('Opcion 2 pulsada');">Opcion 2</a>
			<a href="#" onclick="log('Al final pinchaste opcion 3');">Opcion 3</a>
		</div>
	</body>
</html>

Con ella se crea un menu contextual que sustituye al del botón derecho del raton, pero solo si pinchas dentro del div.

La he subido a mi carpeta de experimentos. Aquí se puede ver el ejemplo online.

Edit: Ops, no vi el ejemplo de Dnielf. Muy bueno.

Enano_la22 · #6 (**permalink**) 28/12/2011, 05:42

Exelente, ,me re sirvio.... Gracias a todos!! saludos!