Como exibir uma div ao passar o mouse sobre um link em Firefox?

nuque · Março 15, 2010

Pessoal,

tenho uma listagem de cartela de cores, onde ao usuário passar o mouse sobre uma cor aparece uma div com o nome da cor e fica seguindo o mouse. O efeito funciona no IE mas não no Firefox. No IE a barra de status do navegador acusa erros na página, mas o efeito é exibido.

Preciso corrigir esse erro do IE e fazer o efeito funcionar também no Firefox. O link para você visualizarem é o seguinte:

Clique aqui

A função javascript que utilizo é essa:

function segue(div)
	{
		if (navigator.appName == 'Netscape')
		{
			xcurs = e.pageX;
			ycurs = e.pageY;
			
		} else {
		
			xcurs = event.clientX;
			ycurs = event.clientY;			
		}
		document.getElementById(div).style.left = (xcurs+0)+'px';
		document.getElementById(div).style.top = (ycurs+0)+'px';
	}

e a chamada da função é feita pelo link:

<a href="#" onMouseOver="cor_<? echo $arrayCores[$i-1]->get("id");?>.style.display='';" onmouseout="cor_<? echo $arrayCores[$i-1]->get("id");?>.style.display='none';" onmousemove="segue('cor_<? echo $arrayCores[$i-1]->get("id");?>');">
    <img src="images/mask2.png" width="50" height="50" border="0" />
</a>

e a div exibida é a seguinte:

<div style="position:absolute; display:none;" id="cor_<?php echo $arrayCores[$i-1]->get("id");?>">
    <div style="width:150px; height:150px; text-align:center; border:#FFFFFF solid; background-color:RGB(<?php echo $arrayCores[$i-1]->get("codigo");?>)">
        <br />
        <font color="#FFFFFF" face="Arial, Helvetica, sans-serif" size="+1" style="text-shadow: 2px 3px black;"><?php echo $arrayCores[$i-1]->get("nome");?></font>
    </div>
</div>

Vocês poderiam me ajudar a resolver o problema de erros na página no IE e fazer o efeito funcionar no Firefox?

Então pessoal, :( ninguem tem um script que faz essa função que eu tô precisando e funcione no Firefox? Alguém que segue os padrões da W3C deve saber responder isso, não tem ninguém disponível?

M4n0w4r · Março 15, 2010

Fiz um script que faz o que você pediu, so tenho alguma coisas a dizer:

1º É preciso ir atrás, não vai ser toda hora que alguem vai ter a paciência de fazer algo tão complexo.

2º Eu estou te ajudando, então você também deve ajudar o próximo.

3º Funciona no IE8, não garanto nada para o IE6 e IE7.

4º Esse monte de tabelas faz doer meu olhos :(

5º Que nomes doidos tem essas cores O.o

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<script type = "text/javascript">
			Element.prototype.catalogoCores = function (cores, dividiFileira) {
				var a;
				var div = document.createElement ("div");
					div.style.border = "3px solid white";
					div.style.display = "none";
					div.style.textTransform = "capitalize";
					div.style.padding = "60px";
					div.style.position = "fixed";
				
				var planoFundo = document.createElement ("div");
					planoFundo.style.backgroundColor = "rgb(222, 222, 222)";
					planoFundo.style.color = "rgb(50, 50, 50)";
					planoFundo.style.padding = "5px";
				
				div.appendChild (planoFundo);
				document.body.appendChild (div);
				
				for (var i = 0; i < cores.length; i ++) {
					a = document.createElement ("a");
						a.style.backgroundColor = cores[i][0];
						a.style.display = "inline-block";
						a.style.float = "left";
						a.style.margin = "5px";
						a.style.padding = "30px";
					
					a.onmouseout = function () {
						div.style.display = "none";
					}
					
					a.onmousemove = (function (i) {
						return function (event) {
							event = event ? event : window.event;
							
							planoFundo.innerHTML = cores[i][1];
							div.style.backgroundColor = cores[i][0];
							div.style.display = "block";
							div.style.left = event.clientX + 5 + "px";
							div.style.top = event.clientY + 5 + "px";
						}
					})(i);
					
					if (i !== 0 && i % dividiFileira === 0) {
						this.appendChild (document.createElement ("br"));
					}
					
					this.appendChild (a);
				}
			}

			window.onload = function () {
				var cores = new Array (
					new Array ("rgb(255, 255, 255)", "branco"),
					new Array ("rgb(252, 221, 221)", "lady"),
					new Array ("rgb(227, 228, 204)", "algodão"),
					new Array ("rgb(198, 222, 222)", "atoll"),
					new Array ("rgb(218, 37, 39)", "paixão"),
					new Array ("rgb(225, 250, 225)", "erva doce"),
					new Array ("rgb(212, 200, 240)", "orquídea"),
					new Array ("rgb(255, 255, 204)", "off white"),
					new Array ("rgb(222, 148, 179)", "sache"),
					new Array ("rgb(178, 178, 178)", "metal"),
					new Array ("rgb(102, 153, 255)", "sky"),
					new Array ("rgb(143, 33, 64)", "escarlate"),
					new Array ("rgb(164, 194, 105)", "sidreira"),
					new Array ("rgb(163, 143, 152)", "iris"),
					new Array ("rgb(208, 196, 157)", "marzipan"),
					new Array ("rgb(204, 51, 153)", "candy"),
					new Array ("rgb(51, 51, 51)", "grafite"),
					new Array ("rgb(102, 224, 255)", "caribe"),
					new Array ("rgb(157, 69, 45)", "terracota"),
					new Array ("rgb(153, 255, 0)", "poison"),
					new Array ("rgb(199, 0, 103)", "framboesa"),
					new Array ("rgb(255, 194, 118)", "nude"),
					new Array ("rgb(196, 0, 78)", "paradise"),
					new Array ("rgb(255, 249, 116)", "confort"),
					new Array ("rgb(67, 163, 206)", "mistico"),
					new Array ("rgb(95, 42, 50)", "mogno"),
					new Array ("rgb(0, 153, 89)", "esmeralda"),
					new Array ("rgb(140, 18, 140)", "flambé"),
					new Array ("rgb(255, 117, 81)", "doçura"),
					new Array ("rgb(212, 75, 95)", "suggar"),
					new Array ("rgb(224, 216, 59)", "limão"),
					new Array ("rgb(42, 80, 156)", "imperial"),
					new Array ("rgb(198, 145, 110)", "chocolate"),
					new Array ("rgb(0, 51, 51)", "botânico"),
					new Array ("rgb(102, 0, 102)", "ametista"),
					new Array ("rgb(218, 44, 37)", "jaspe"),
					new Array ("rgb(255, 102, 51)", "vibrante"),
					new Array ("rgb(255, 255, 0)", "sunshine"),
					new Array ("rgb(51, 0, 204)", "safira"),
					new Array ("rgb(1, 1, 43)", "eclipse"),
					new Array ("rgb(0, 0, 0)", "preto"),
					new Array ("rgb(69, 9, 128)", "grape")
				)
				
				document.getElementById ("catalogoCores").catalogoCores (cores, 7);
			}
		</script>

		<title>Cores</title>
	</head>

	<body>
		<div id = "catalogoCores"></div>
	</body>
</html>

klonder · Março 16, 2010

Eu não testei o código do colega acima.

Entretanto, deixo outra opção a quem se interessar, bastando apenas adaptar a cada caso:

Tooltip menu:

<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>

nuque · Março 16, 2010

Fiz um script que faz o que você pediu, so tenho alguma coisas a dizer:

1º É preciso ir atrás, não vai ser toda hora que alguem vai ter a paciência de fazer algo tão complexo.

2º Eu estou te ajudando, então você também deve ajudar o próximo.

3º Funciona no IE8, não garanto nada para o IE6 e IE7.

4º Esse monte de tabelas faz doer meu olhos :(

5º Que nomes doidos tem essas cores O.o

Obrigado pela ajuda.

Vou responder as suas observações:

1º Estive procurando esta solução em outros fóruns e em pesquisas no Google, entretanto as respostas que achava não funcionavam como o esperado;

2º Agradeço a sua ajuda e pode deixar que assim que tiver uma oportunidade irei contribuir com meus conhecimentos;

3º Funcionando no IE8 e Firefox pra mim está excelente;

4º Esse monte de tabelas é culpa dos designers, eles ainda são muito apegados a elas. Eu sou responsável pela programação das páginas. Os designer estão se adaptando a utilizar divs, mas a maioria das coisas ainda fazem em tabelas;

5º Essas cores são caastradas pelo cliente, fazem parte da cartela de cores deles;

nuque · Março 16, 2010

Eu não testei o código do colega acima.

Entretanto, deixo outra opção a quem se interessar, bastando apenas adaptar a cada caso:

Obrigado pela ajuda.

Testei ambos os código no Firefox e os mesmos funcionaram perfeitamente.

Agora preciso adaptá-los ao meu script.

Entrar

Arquivado

Como exibir uma div ao passar o mouse sobre um link em Firefox?

Recommended Posts

nuque 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

M4n0w4r 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

klonder 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

nuque 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

nuque 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Sound Designer

Orientação - Jav + MySql

Alteracao Tema Wordpress Profolio

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante