Ir para conteúdo

POWERED BY:

Arquivado

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

Dee

[Resolvido] Código Não Funciona no FF

Por , em Javascript

Recommended Posts

Dee    0

Dee
Postado

O título é bem claro.

A ação que eu quero é que ao passar o mouse em cima da imagem pequena, aparece uma imagem grande do lado.

Ps: Não dá nenhum erro de script.

 

Js

// JavaScript Document
function mostraImagem(name){
   document.getElementById('imagem').className = 'imagem';
   document.getElementById('imagem').style.left = event.clientX - 300;
   document.getElementById('imagem').style.top = event.clientY + 0;
   document.getElementById('imagem').style.backgroundImage = "url('img/"+name+"_grande.png')";
   document.getElementById('imagem').style.display = "block";
}

function mostraNada(){
   document.getElementById("imagem").style.display = 'none';
}

Html

<div id='imagem'></div>
<img src="img/mic.png" name="mic" onmousemove="mostraImagem(this.name)" onmouseout="mostraNada()" />
<br /><br />
<img src="img/violao.png" name='violao' onmousemove="mostraImagem(this.name)" onmouseout="mostraNada()" />
<br /><br />
<img src="img/speacker.png" name='speacker' onmousemove="mostraImagem(this.name)" onmouseout="mostraNada()" />

Css

#imagem
{
	position:absolute;
	width:200px;
	height:200px;
	background-position:center;
	float:right;
	border:1px solid black;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

klonder    14

klonder
Postado

A maneira de capturar as coordenadas do mouse é diferente entre IE e Firefox. Encontrei um script muito interessante há alguns dias, que resolveu esse problema.

 

Nesse script, quando o cliente passar o mouse por cima de um div, aparecerá um div flutuante (tooltip) que irá se movimentar conforme o movimento do mouse.

 

Após estudar o pequeno script abaixo e compreender como os eventos são processados, basta adaptar o código às suas necessidades:

<html>
<head>
<title>ToolTip</title>
</head>
<body>
<script type="text/javascript">
//Script baixado de: http://www.arealocal.com.br/blog/2007/05/11/javascript-tooltip/

var marginX = 10; //distancia do mouse em x
var marginY = -25; //distancia do mouse em y

function mostrarPopUp(texto) {
	var objMouse = document.getElementById("mouse");
	objMouse.style.display = "block";
	document.onmousemove = function(event) {
		
	if (document.all) {//Internet Explorer
		_x = (document.documentElement && document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : document.body.scrollLeft;
		_y = (document.documentElement && document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop;
		_x += (window.event.clientX+marginX);
		_y += (window.event.clientY+marginY);
	
	} else {//Firefox, Opera
		_x = (event.pageX+marginX);
		_y = (event.pageY+marginY);
	}
		
		objMouse.innerHTML = texto;
		objMouse.style.left = _x+"px";
		objMouse.style.top = _y+"px";
	}
}

function ocultarPopUp() {
	var objMouse = document.getElementById("mouse");
	objMouse.style.display = "none";
}
</script>
<div id="mouse" style="position:absolute; z-index:10; display:none">Olá a todos!!!!</div>
<br><br><br>
<div id="txt1" style="background:#EFEFEF; width:300px;" onmouseover="mostrarPopUp('Esse é o meu texto 1')" onmouseout="ocultarPopUp()">Passe o mouse aqui.</div>
<br><div id="txt2" style="background:#AFAFAF; width:300px;" onmouseover="mostrarPopUp('Esse é o meu texto 2')" onmouseout="ocultarPopUp()">Passe o mouse aqui.</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Dee    0

Dee
Postado

Mas o problema é por causa disto:

document.getElementById('imagem').style.left = event.clientX - 300;
document.getElementById('imagem').style.top = event.clientY + 0;

?

 

Há!

Nesse script, quando o cliente passar o mouse por cima de um div, aparecerá um div flutuante (tooltip) que irá se movimentar conforme o movimento do mouse.

 

O meu código também faz isto.

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