Tooltip Com 3 Eventos

#1 juliano.ma

Normal

Usuários
62 posts

Sexo:Não informado

Posted 01/02/2010, 14:42

Boa tarde senhores,

estou tentando fazer um tooltip que funciona da seguinte forma:

Ao passar o mouse em cima ele aparece, ao retirar o mouse ele desaparece e ao clicar nele ele aparece e fixa.

Veja o que eu tentei:

<html>
<head>
<script language="JavaScript">
function show(id)
{
        if(document.getElementById(id).style.display == "block")
        document.getElementById(id).style.display = "none";
        else
        document.getElementById(id).style.display = "block";
}
function over(id)
{
        document.getElementById(id).style.display = "block";
}
function out(id)
{
        document.getElementById(id).style.display = "none";
}
</script>
</head>
<body>

<div style ='position: relative;'>
<img id='100' style="z-index:100; top:100; left:100; position: absolute;" src='imagem100.jpg' width='300' height='300' />
<img id='200' style="z-index:200; top:120; left:120; position: absolute;" src='imagem200.jpg' width='300' height='300' />
<img id='300' style="z-index:300; top:130; left:130; position: absolute;" src='imagem300.jpg' width='300' height='300' />
</div>

<a onclick="show(100);" onmouseover="over(100);" onmouseout="out(100);" href="javascript:">Img 1</a>
<a onclick="show(200);" onmouseover="over(200);" onmouseout="out(200);" href="javascript:">Img 2</a>
<a onclick="show(300);" onmouseover="over(300);" onmouseout="out(300);" href="javascript:">Img 3</a>
</body>
</html>

O problema é no evento onmouseout, pois ele tira o que está fixo pelo OnClick.

#2 Alex Hiroshi

Super Veterano

Ex-Admins
4923 posts

Sexo:Masculino
Localidade:São Paulo - SP

Posted 01/02/2010, 15:10

Grava o id da imagem clicada em um array, por exemplo, e antes de executar a linha do out, verifica se o id está no array. Outro jeito é adicionar um atributo na imagem quando for clicado e fazer o mesmo esquema de comparar, antes de sumir.

Fórum WMO - Equipe de Desenvolvimento / Banco de Dados - Ex-Administrador

#3 juliano.ma

Normal

Usuários
62 posts

Sexo:Não informado

Posted 01/02/2010, 16:40

Grava o id da imagem clicada em um array, por exemplo, e antes de executar a linha do out, verifica se o id está no array. Outro jeito é adicionar um atributo na imagem quando for clicado e fazer o mesmo esquema de comparar, antes de sumir.

Como eu poderia adicionar um id a cada clique no array?
Poderia me dar um exemplo prático?

Dei uma olhada em "Push" e em "unshift" mas não consegui montar o código.

ids = new Array();
function show(id)
{        
		if(document.getElementById(id).style.display == "block")
		document.getElementById(id).style.display = "none";
        else
        document.getElementById(id).style.display = "block";
		ids.unshift(id);
}
function over(id)
{
        document.getElementById(id).style.display = "block";
		}
function out(id)
{
        if(!(ids.in_array(id)))
		{
		document.getElementById(id).style.display = "none";
		}
}

Edição feita por: juliano.ma, 01/02/2010, 16:47.

#4 Alex Hiroshi

Super Veterano

Ex-Admins
4923 posts

Sexo:Masculino
Localidade:São Paulo - SP

Posted 01/02/2010, 21:29

É assim mesmo, mas você está fazendo errado. Se você reparar, o id nunca será adicionado no array, porque quando você clicar, o a função over deixará a imagem com display block. Troque a verificação do display pela do array.
Uma coisa que eu reparei no seu código foi a utilização do in_array(). No javascript não existe essa função. Mas você pode criar a sua função ou usar o in_array() do phpjs ou um que foi postado aqui no banco de funções.

Veja como pode ficar:

var ids = [];
function show(id)
{
	if ( in_array(id, ids) )
	{
		document.getElementById(id).style.display = "none";
		ids.splice( ids.indexOf(id), 1 ); // remove o id do array
	} else {
		document.getElementById(id).style.display = "block";
		ids.push(id); // adiciona o id no array
	}
}
function over(id)
{
	document.getElementById(id).style.display = "block";
}
function out(id)
{
	if (!in_array(id,ids)) document.getElementById(id).style.display = "none";
}

Fórum WMO - Equipe de Desenvolvimento / Banco de Dados - Ex-Administrador

#5 juliano.ma

Normal

Usuários
62 posts

Sexo:Não informado

Posted 02/02/2010, 10:00

Funcionou belezinha Alex!

ficou até melhor esse esquema de usar indexOF, pois eu estava tentando diferente, tipo "ids.splice(0,1,id);".

O que estou quebrando a cabeça agora é para acessar esse array com os valores atualizados fora da função "show".

function out(id)
{
	for(i = 0; i < ids.length; i++)
	{
		if(ids[i] == id)
		existe++;
    }
	
	if(existe < 1)
	{
		document.getElementById(id).style.display = "none";
	}
}

Ele retorna o array vazio.

Um detalhe é que realmente o Internet Explorer não reconhece essa linha:

ids.splice( ids.indexOf(id), 1 );

Tive que usar assim:

ids.splice(0,1);

Edição feita por: juliano.ma, 02/02/2010, 09:07.

#6 Alex Hiroshi

Super Veterano

Ex-Admins
4923 posts

Sexo:Masculino
Localidade:São Paulo - SP

Posted 02/02/2010, 11:38

O problema de usar o splice assim, é que você não vai apagar o id certo. Você está usando a tag script com o language? Nã use language, use só o type="text/javascript".

Estranho retornar o array vazio. A variável é global, deveria retornar alguma coisa depois de clicado uma vez.

Fórum WMO - Equipe de Desenvolvimento / Banco de Dados - Ex-Administrador

#7 juliano.ma

Normal

Usuários
62 posts

Sexo:Não informado

Posted 02/02/2010, 16:09

Bingo!

Consegui fazer funcionar perfeitamente assim:

Veja se dá pra melhorar...

<html>
<head>
<script type="text/javascript">
<!--

ids = [];

function check(id)
{
	for(a = 0; a < ids.length; a++)
	{ 
		if(ids[a] === id)
		return true;
		
	}
	return false;
}

function getPosition(ids,id)
{
	for(var i = 0; i < ids.length; i++)
	{ 
		if(ids[i] == id)
		{
			return i;
		}
	}
}

function show(id)
{        
	
	if(check(id) == true) 
	{
			var p = getPosition(ids,id);
			ids.splice(p, 1 ); // remove o id do array	
			document.getElementById(id).style.display = "none";
			clic();
	}
	else
	{
			ids.unshift(id); // adiciona o id no array	
			document.getElementById(id).style.display = "block";
			clic();			
	}

}

function over(id)
{
	if(check(id) == false) 
	{
		document.getElementById(id).style.display = "block";			
		clic();
	}
}

function out(id)
{
	if(check(id) == false) 
	{
		document.getElementById(id).style.display = "none";			
		clic();
	}
}

function clic()
{
	document.getElementById('xy').innerHTML = '<br />' + ids;
}
-->
</script>

</head>
<body>

<div style ='position: relative;'>
<img id='100' style="z-index:100; top:100; left:100; position: absolute; display:none;" src='imagem100.jpg' width='300' height='300' />
<img id='200' style="z-index:200; top:120; left:120; position: absolute; display:none;" src='imagem200.jpg' width='300' height='300' />
<img id='300' style="z-index:300; top:130; left:130; position: absolute; display:none;" src='imagem300.jpg' width='300' height='300' />
</div>

<a onclick="show('100');" onmouseover="over('100');" onmouseout="out('100');" href="javascript:">Img 1</a> - 
<a onclick="show('200');" onmouseover="over('200');" onmouseout="out('200');" href="javascript:">Img 2</a> - 
<a onclick="show('300');" onmouseover="over('300');" onmouseout="out('300');" href="javascript:">Img 3</a>

<div id='xy'></div>
</body>
</html>

#1 juliano.ma

#2 Alex Hiroshi

#3 juliano.ma

#4 Alex Hiroshi

#5 juliano.ma

#6 Alex Hiroshi

#7 juliano.ma

1 user(s) are reading this topic

Entrar