Imagens e DIVs

[Kineri 0]

Oi, galera.

Tenho um problema e espero que voces me ajudem =]

Seguinte: tenho uma galeria de imagens (thumbnails) e quando passo o mouse por cima dos thumbs, aparece a imagem (dentro de um div) maior seguindo o mouse

(o script pra isso eh esse:)

function exibe(id) {
	document.getElementById(id).style.position = "absolute";
	var x=window.event.clientX;
	var y=window.event.clientY;
	document.getElementById(id).style.top = y+8;
	document.getElementById(id).style.left = x+8;
	document.getElementById(id).style.display = "inline";
}

function esconde(id){
	document.getElementById(id).style.position = "static";
	document.getElementById(id).style.display = "none";

}

//eu chamo "exibe" com "OnMouseMove" e o "esconde" com "OnMouseOut"

Meu problema: as imagens que estão muito em baixo e/ou muito para a direita, somem da tela, tornando impossível a visualização.

Gostaria de saber se hé algum jeito/instrução a ser inserida no meu javascript que, por exemplo, mude a posição da imagem maior quando chegar no limite da tela.

 

Espero que tenham entendido =P. Aguardo respostas e obrigado desde já ;)

[pedro rodrigues 4]

Eu não testei mas acho que a seguinte lógica pode te ajduar.

 

Capture o tamanho da janela e verifique se a posição do mouse (que já está sendo capturada) está próxima das "extremidades".

Se estiver, modifique as linhas de posicionameto da div que exibe a imagem maior.

 

document.getElementById(id).style.top = y+8;
	document.getElementById(id).style.left = x+8;

document.getElementById(id).style.top = y-(<A LARGURA DA DIV A SER EXIBIDA> + 5);
	document.getElementById(id).style.left = x-(<A ALTRA DA DIV A SER EXIBIDA> + 5);

Volto a salientar que não testei. É apenas uma idéia.

 

Boa sorte.

Abraço!

[Kineri 0]

Valeu a dica pedro

vou testar sua lógica aqui =]

 

EDIT:

testei aqui mas tah dando erro e eu nao sei como descobrir erros no javascript >_< (iniciante...)

meu código está assim agora:

function exibe(id) {
	var w = screen.availWidth; //captura largura da tela
	var h = screen.availHeight; //captura altura da tela
	var x = window.event.clientX; //captura o X do mouse
	var y = window.event.clientY; //captura o Y do mouse
	var px = w-x;
	var py = h-y;
	
	if (px < GetElementById(id).style.width) || (py < GetElementById(id).style.height ){
		document.getElementById(id).style.top = y-(GetElementById(id).style.width + 5);
		document.getElementById(id).style.left = x-(GetElementById(id).style.height + 5);
	}else{
		document.getElementById(id).style.top = y+10;
		document.getElementById(id).style.left = x+10;
	}
	document.getElementById(id).style.position = "absolute";
	document.getElementById(id).style.display = "inline";
}

[pedro rodrigues 4]

você está usando qual navegador para testar?

Não consegue ver pelo menos a linha do erro?

 

Eu acredito que o erro esteja no trecho a seguir:

 

if (px < GetElementById(id).style.width) || (py < GetElementById(id).style.height ){
		document.getElementById(id).style.top = y-(GetElementById(id).style.width + 5);
		document.getElementById(id).style.left = x-(GetElementById(id).style.height + 5);
	}else{

Tente o seguinte:

 

if (px < document.getElementById(id).style.width) || (py < document.getElementById(id).style.height ){
		document.getElementById(id).style.top = y-(document.getElementById(id).style.width + 5);
		document.getElementById(id).style.left = x-(document.getElementById(id).style.height + 5);
	}else{

 

Não sei se essa lógica que você escreveu vai resolver o seu problema. Talvez algo assim seja o caminho:

 

if (px < document.getElementById(id).style.width)
		{
		document.getElementById(id).style.left = x-(document.getElementById(id).style.height + 5);
		}
		else
		{ 
				// MANTÉM O NORMAL
		}

	if (py < document.getElementById(id).style.height )
		{
   		document.getElementById(id).style.top = y+(document.getElementById(id).style.width + 5);
		}
		else
		{ 
				// MANTÉM O NORMAL
		}

Boa sorte.

[Kineri 0]

Cara, achei meu erro anterior e...minha lógica não funcionou =/

(e estou usando IE6, sem possibilidade de mudar pro 7 ou pro FF, pc do trabalho)

 

Tentei a sua lógica de dois jeitos (mexi um poquinho =P) mas tbm nao deu certo...

 

percebi que com "screen.availWidth" estou pegando a resolução do monitor, como faço para pegar o tamanho da janela ativa???

[pedro rodrigues 4]

Coloque um código completo para ficar mais fácil pra resolver...

 

Para pegar a largura e altura da janela use:

 

alert("Largura da janela: " + document.body.clientWidth);
  alert("Altura da janela: " + document.body.clientHeight);

[Kineri 0]

pedro, estou usando uma finção parecida p/ a altura da janela, valew a ajuda =]

agora, eu tenho, aparenetemente, tudo pra fazer essa "mudada" na imagem, mas meus calculos não funcionam

vou postar meu codigo como está agora

<script type="text/javascript">
function exibe(id) {
	var w = document.documentElement.clientWidth;//captura largura da tela
	var h = document.documentElement.clientHeight;//captura altura da tela
	var x = window.event.clientX; //captura o X do mouse
	var y = window.event.clientY; //captura o Y do mouse
	var LargDiv = 500;
	var AltuDiv = 375;
	var px = w-x;
	var py = h-y;
	
	if (AltuDiv >= py){
		document.getElementById(id).style.top = y-(AltuDiv+10);
	}else{
		document.getElementById(id).style.top = y+10;
	}
	if (LargDiv >= px){
		document.getElementById(id).style.left = x-(LargDiv+10);
	}else{
		document.getElementById(id).style.left = x+10;
	}
	document.getElementById(id).style.position = "absolute";
	document.getElementById(id).style.display = "inline";
	
}

function esconde(id){
	document.getElementById(id).style.position = "static";
	document.getElementById(id).style.display = "none";
}
</script>

[pedro rodrigues 4]

Seria bacana se colocasse também o HTML, pra ficar mais fácil pra testar aqui e resolver.

[pedro rodrigues 4]

Tentei simular o que você está tentando fazer.

Segue o código com solução:

 

<html><head>
  <script language="javascript" type="text/javascript">
  function exibe(id)
  {
	// CAPTURA LARGURA DA TELA
	var w = document.body.clientWidth;

	// CAPTURA ALTURA DA TELA
	var h = document.body.clientHeight;

	// CAPTURA O X DO MOUSE
	var x = window.event.clientX;

	// CAPTURA O Y DO MOUSE
	var y = window.event.clientY;


	document.getElementById(id).style.position = "absolute";
	document.getElementById(id).style.display = "inline";


	var LargDiv = document.getElementById("img1").width;
	var AltuDiv = document.getElementById("img1").height;

	var px1 = w-x;
	var px2 = w - px1;
	var py1 = h-y;
	var py2 = h - py1;



	// TESTE

	document.getElementById("txtA").value = "";
	document.getElementById("txtA").value+= "w: " + w + "; h: " + h + ";\n";
	document.getElementById("txtA").value+= "x: " + x + "; y: " + y + ";\n";
	document.getElementById("txtA").value+= "px1: " + px1 + "; py1: " + py1 + ";\n";
	document.getElementById("txtA").value+= "px2: " + px2 + "; py2: " + py2 + ";\n";
	document.getElementById("txtA").value+= "LargDiv: " + LargDiv + ";\n";
	document.getElementById("txtA").value+= "AltuDiv: " + AltuDiv + ";\n";



	if (px1 <= LargDiv)
	  if (px2 <= LargDiv)
		document.getElementById(id).style.left = x - (LargDiv - px1);
	  else
		document.getElementById(id).style.left = x - (LargDiv + 10);
	else
	 document.getElementById(id).style.left = x;

	if (py1 <= AltuDiv)
	  if (py2 <= AltuDiv)
		document.getElementById(id).style.top = y - (AltuDiv / 2);
	  else
		document.getElementById(id).style.top = y - AltuDiv;
	else
	  document.getElementById(id).style.top = y;
  }

  function esconde(id)
  {
	document.getElementById(id).style.position = "static";
	document.getElementById(id).style.display = "none";
  }
  </script>
<body>

  <p align="center">
	<textarea type="text" id="txtA" cols="20" rows="7" /></textarea>

	<img border="0" src="http://www.google.com.br/images/nav_logo4.png" onmouseover="java script: exibe(1);" onmouseout="java script: esconde(1);" />
	<div id="1" style="display: none; position: static;"><img id="img1" border="1" src="http://www.google.com.br/intl/pt-BR_br/images/logo.gif" /></div>
  </p>

</body></html>

Boa sorte.

[pedro rodrigues 4]

E se você trocar o "onmouseover" por "onmousemove" da um efeito diferente e de repente mais interessante...

 

<img border="0" src="http://www.google.com.br/images/nav_logo4.png" onmousemove="java script: exibe(1);" onmouseout="java script: esconde(1);" />

E pra ficar melhor colocar o evento também na div:

 

<div id="1" style="display: none; position: static;" onmousemove="java script: exibe(1);"><img id="img1" border="1" src="http://www.google.com.br/intl/pt-BR_br/images/logo.gif" /></div>

 

Abraço!