Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

berkowitz

Posição do mouse

Por , em Javascript

Recommended Posts

berkowitz    2

berkowitz
Postado

Pessoal... olá.

 

Como faço para que uma DIV (por exemplo) apareça no local aonde está o X do mouse?? Eu preciso que, aonde eu clicar, apareça um determinado elemento, e não consigo fazer isso... alguém pode me ajudar por favor??? http://forum.imasters.com.br/public/style_emoticons/default/cry.gif

 

VALEWWWW!!!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

berkowitz    2

berkowitz
Postado

Sim, mas nao estou conseguindo fazer com que a DIV apareça no local aonde eu cliquei.... entendeu??Estou fazendo um menu dinâmico, e o submenu nao aparece correto... ta complicado....Vou mandar os códigos....

Compartilhar este post

Link para o post
Compartilhar em outros sites

berkowitz    2

berkowitz
Postado

Então... separei o codigo em questao.... é esse:

 

<html><head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><script language="JavaScript">	var itensMenu, qtdSubMenu, subMenu;	var menu = "";	var quadroMenu = "";	var bordaLink = "";	var Xmouse = 0;	function posicaoMouse() {  Xmouse = event.clientX;	}  	function criaMenu_nivel1(qtdItens) {  itensMenu = new Array(qtdItens);  for(i=0; i<itensMenu.length; i++) { 	 itensMenu[i] = new Array(2);  }   	 itensMenu[0][0] = "link1"; 	 itensMenu[0][1] = "javascript:;"; 	 itensMenu[1][0] = "link2"; 	 itensMenu[1][1] = "javascript:;"; 	 itensMenu[2][0] = "link3"; 	 itensMenu[2][1] = "javascript:;"; 	 itensMenu[3][0] = "link4"; 	 itensMenu[3][1] = "javascript:;";  for(i=0; i<itensMenu.length; i++) { 	 menu += "<a href=\"" + itensMenu[i][1] + "\" id='mnuNivel1_" + i + "' onMouseOver='criaMenu_nivel2(1," + i + "); posicaoMouse();'>" + itensMenu[i][0] + "</a>";  }  document.write(menu);	}		function criaMenu_nivel2(action,idMenu) {  itensSubMenu = new Array(3);  subMenu = document.getElementById("subMenu");  for(i=0; i<itensSubMenu.length; i++) { 	 itensSubMenu[i] = new Array(3);  }    itensSubMenu[0][0] = 0;  itensSubMenu[0][1] = "Sub1";  itensSubMenu[0][2] = "javascript:alert(\"Sub1\");";  itensSubMenu[1][0] = 0;  itensSubMenu[1][1] = "Sub2";  itensSubMenu[1][2] = "javascript:alert(\"Sub2\");";  itensSubMenu[2][0] = 1;  itensSubMenu[2][1] = "Sub3";  itensSubMenu[2][2] = "javascript:alert(\"Sub3\");";    quadroMenu = "";  subMenu.style.display = "none";  for(i=0; i<itensSubMenu.length; i++) { 	 if(idMenu == itensSubMenu[i][0]) {    quadroMenu += "<a href='" + itensSubMenu[i][2] + "' class='itensSubMenu' style='width: 150px;";    if(i == (itensSubMenu.length - 1)) {   	 quadroMenu += " border-bottom: 1px solid #F5F5F5;";    }    quadroMenu += "'>• " + itensSubMenu[i][1];    quadroMenu += "</a><br />"; 	 }  }  subMenu.innerHTML = quadroMenu;  if(action == 1 && quadroMenu.length > 0) { 	 subMenu.style.display = "block";  }	}</script><style type="text/css">.menuTopo A {	font-family: Verdana, Arial, Sans-Serif;	letter-spacing: -1px;	color: #5F90C0;	text-decoration: none;	font-weight: bolder;	height: 25px;	text-align: center;	padding: 7px;	padding-top: 5px;	padding-bottom: 3px;}.menuTopo A:Hover {	background-color: #5F90C0;	color: #FFFFFF;	text-decoration: none;}DIV#subMenu {	display: none;	position: absolute;	background-color: #FFFFFF;	filter: Alpha(Opacity = 90);	text-align: left;	border: 1px solid #5F90C0;	margin-top: 25px;	background-color: #A6C1DB;}.itensSubMenu {	padding-left: 8px;	padding-right: 8px;	padding-bottom: 3px;	padding-top: 3px;	border-top: 1px solid #F5F5F5;	font-size: 10px;}.itensSubMenu:Hover {	background-color: #5F90C0;	color: #FFFFFF;	text-decoration: none;	font-weight: bolder;	font-size: 10px;}.menuTopo {	padding: 0;	margin: 0;	text-align: center;	font-size: 12px;}</style></head><body class="menuTopo">	<div id="subMenu" onMouseOver="this.style.display = 'block';" onMouseOut="this.style.display = 'none';"> </div>	<script language="JavaScript">criaMenu_nivel1(4);</script></body></html>

O problema eh que nao sei como fazer o submenu aparecer abaixo do item selecionado... entendeu?? Aí eu pensei em fazer com a posição do mouse.... se alguém tiver uma outra solução melhor, será muito bem vinda!!! :D

 

VVALLEEWWW!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

berkowitz    2

berkowitz
Postado

Opa pessoal... consegui! hehehee... fiz um esquema que ficou bacana!!! O subMenu segue o mouse agora... eu acho que ficou legal!! O que vocês acham??

Segue o código:

 

<html><head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><script language="JavaScript">var itensMenu, qtdSubMenu, subMenu;var menu = "";var quadroMenu = "";var bordaLink = "";var posicaoX = 0;	function posX() {  posicaoX = 0;  posicaoX = event.clientX;  subMenu.style.pixelLeft = (posicaoX - 15);	}function criaMenu_nivel1(qtdItens) {itensMenu = new Array(qtdItens);for(i=0; i<itensMenu.length; i++) { itensMenu[i] = new Array(2);} itensMenu[0][0] = "link1"; itensMenu[0][1] = "javascript:;"; itensMenu[1][0] = "link2"; itensMenu[1][1] = "javascript:;"; itensMenu[2][0] = "link3"; itensMenu[2][1] = "javascript:;"; itensMenu[3][0] = "link4"; itensMenu[3][1] = "javascript:;";for(i=0; i<itensMenu.length; i++) { menu += "<a href=\"" + itensMenu[i][1] + "\" id='mnuNivel1_" + i + "' onMouseMove='posX();' onMouseOver='criaMenu_nivel2(1," + i + ");'>" + itensMenu[i][0] + "</a>";}document.write(menu);}function criaMenu_nivel2(action,idMenu) {itensSubMenu = new Array(3);subMenu = document.getElementById("subMenu");for(i=0; i<itensSubMenu.length; i++) { itensSubMenu[i] = new Array(3);}itensSubMenu[0][0] = 0;itensSubMenu[0][1] = "Sub1";itensSubMenu[0][2] = "javascript:alert(\"Sub1\");";itensSubMenu[1][0] = 0;itensSubMenu[1][1] = "Sub2";itensSubMenu[1][2] = "javascript:alert(\"Sub2\");";itensSubMenu[2][0] = 1;itensSubMenu[2][1] = "Sub3";itensSubMenu[2][2] = "javascript:alert(\"Sub3\");";quadroMenu = "";subMenu.style.display = "none";for(i=0; i<itensSubMenu.length; i++) { if(idMenu == itensSubMenu[i][0]) {  quadroMenu += "<a href='" + itensSubMenu[i][2] + "' class='itensSubMenu' style='width: 150px;";  if(i == (itensSubMenu.length - 1)) {   quadroMenu += " border-bottom: 1px solid #F5F5F5;";  }  quadroMenu += "'>• " + itensSubMenu[i][1];  quadroMenu += "</a><br />"; }}subMenu.innerHTML = quadroMenu;if(action == 1 && quadroMenu.length > 0) { subMenu.style.display = "block";}}</script><style type="text/css">.menuTopo A {font-family: Verdana, Arial, Sans-Serif;letter-spacing: -1px;color: #5F90C0;text-decoration: none;font-weight: bolder;height: 25px;text-align: center;padding: 7px;padding-top: 5px;padding-bottom: 3px;}.menuTopo A:Hover {background-color: #5F90C0;color: #FFFFFF;text-decoration: none;}DIV#subMenu {display: none;position: absolute;background-color: #FFFFFF;filter: Alpha(Opacity = 90);text-align: left;border: 1px solid #5F90C0;margin-top: 25px;background-color: #A6C1DB;}.itensSubMenu {padding-left: 8px;padding-right: 8px;padding-bottom: 3px;padding-top: 3px;border-top: 1px solid #F5F5F5;font-size: 10px;}.itensSubMenu:Hover {background-color: #5F90C0;color: #FFFFFF;text-decoration: none;font-weight: bolder;font-size: 10px;}.menuTopo {padding: 0;margin: 0;text-align: center;font-size: 12px;}</style></head><body class="menuTopo"><div id="subMenu" onMouseOver="this.style.display = 'block';" onMouseOut="this.style.display = 'none';"> </div><script language="JavaScript">criaMenu_nivel1(4);</script></body></html>

Gostaria de uma opinião de vocês.... :P

 

Aew AAlves, valew o help! ;)

 

FLOWWW!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

berkowitz    2

berkowitz
Postado

ehheehehe.... tranquilo! ;) Quando precisar dum help, tamos aew! ;) FLOWW!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

fpe    0

fpe
Postado

nao funciona no firefox

<{POST_SNAPBACK}>

Adapte para o padrão W3C! Exemplo:

 

Troque isso:

 

subMenu.style.display = "none";
por isso:

 

document.getElementById("subMenu").style.display = "none";
IE é igual a papel: aceita qualquer coisa! http://forum.imasters.com.br/public/style_emoticons/default/yay.gif

 

Brincadeira... http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

 

nao é isso,

 

o firefox nao aceita event.clientY

 

estou pesquisando se alguem encontrar me avise!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito