Portal webmaster

Hoje é Domingo, 5/07/2009

Fórum aqui no site, o que você pensa a respeito? Dê sua opinião, clique aqui

Exibindo Hints com AJAX

Novo aqui no site? Talvez gostaria de assinar o
RSS feed do site?

Publicado em: 11/10/2007
Área: Ajax
Visualizações: 5.265
Comentário(s): 4

Geralmente em aplicções do tipo Desktop, alguns elementos possum um HINT(dica), ou seja, quando passamos o mouse sobre
o elemento é então exibido um caixa de dialogo contendo uma pequena descrição sobre esse elemento.
Em HTML nós temos o atributo ALT, porém esse atributo possui algumas limitações, tais como:

* não pode ter seu estilo personlaizado;
* o texto é estático;
* este atributo pode ser utilizado apenas em imagens;

Para resolver este problema, muitos desevolvedores utlizam divs escondidas na página, que somente são exibidas quando
o usário passa mouse sobre um elemento, e desaparecem quando o mouse for retirado do elemento.
É um boa solução, mas nesse caso você terá que possuir um div oculta para cada mensagem diferente que você queira mostrar ao usuário.
Com a utilizção do AJAX nós poderemos fazer esse mesmo efeito, só que com o texto sendo carregado dinanmicamente antes da div ser
exibida ao usuário.Para isto basta criar apenas uma div, e carregar o seu conteudo através de um requisição, isto nos dá a liberdade
de carregar qualquer coisa que for necessária, como texto, tabelas, imagens, formulários, etc...
Bem vamos ao código, ele não é muito complicado, mas é preciso tomar um cuidado quanto a compatibilide entre navegadores.

Primeiro nosso HTML

<html>

</head>



<body>



	<img src="debian.gif" onmouseover="show_hint(event,'debian');" onmouseout="hide_hint();" />

	<br />

	<img src="ubuntu.jpg" onmouseover="show_hint(event,'ubuntu');" onmouseout="hide_hint();" />

	<br />

	<img src="kurumin.png" onmouseover="show_hint(event,'kurumin');" onmouseout="hide_hint();"/>

	<div id="img_hint" class="hint_layer"></div>

	



</body>

</html>

É bem simples mesmo, contém apenas três imagens(poderia ser qualquer outro elemento HTML o qual possua a propriedade onmouseover),
e uma DIV que será oculta.

Agora o CSS:

<style type="text/css">



	.hint_layer

	{

		display:none;

		width:250px;

		border:2px dashed;

		position:absolute;

		background:#ffffff;

		text-align:left;

		padding:10px;

	}



</style>

Contém apenas uma classe, para fazer a formatção da DIV, além de oculta-lá do usuário com display:none;

e por fim o nosso script:

<script language="javascript" type="text/javascript">

	

		

	var  req = null;

	try

	{

		req = new XMLHttpRequest();

	}

	catch(trymicrosoft)

	{

		try

		{

			req = new ActiveXObject("Msxml2.XMLHTTP");	

		}

		catch(othermicrosoft)

		{

			try

			{

				req = new ActiveXObject("Microsoft.XMLHTTP");

			}

			catch(failed)

			{

				req = null;

			}

		}

	}

	

	function show_hint(e,sistema)

	{

		var hint   = document.getElementById("img_hint");

		var url = "hint.php?sistema="+sistema+"&time="+new Date();

		var posx = 0;

		var posy = 0;

			

		if (!e) var e = window.event;

		if (e.pageX || e.pageY) 	

		{

			posx = e.pageX;

			posy = e.pageY;

		}

		else if (e.clientX || e.clientY) 	

		{

			posx = e.clientX + document.body.scrollLeft

				+ document.documentElement.scrollLeft;

			posy = e.clientY + document.body.scrollTop

				+ document.documentElement.scrollTop;

		}

		

		

		req.open("GET",url,true);

		

		req.onreadystatechange = function()

								{

									if(req.readyState == 4)

									{

										if(req.status == 200)

										{

											

											hint.innerHTML = req.responseText;;

											hint.style.top = posy + "px";

											hint.style.left = posx + 30 + "px";

											hint.style.display = 'block';						

										}

									}

									

								};

		req.send(null);

		

	}

	

	function hide_hint()

	{

		var hint   = document.getElementById("img_hint");

		hint.style.display = 'none';

	}

	

		

</script>

Esse script contém duas funções e um pouco de código "solto", vamos a elas:

primeiramente, nós criaremos o objeto de requisição, verificando qual é o objeto o qual melhor se adapta ao navegador.
Depois temos as funções show_hint(e,sistema),hide_hint(), que respectivamente mostra a mensagem ao usuário e a oculta
quando for necessário.

Vamos a primeria função,

ela possui dois parâmetros o primeiro "e" é o objeto event(evento) do javascript, é utilizado para recuperar a posição do mouse
no momento em que o evento é disparado.O parâmetro "sistema" é um parâmetro qualquer, uma string no nosso caso, e serve para
passá-lo ao servidor e recuperar a mensagem correta, ou seja, é um identificador do elemento que disparou o evento.

Agora nós iremos recuperar a posição do mouse, para determinar onde será posta a div:

var posx = 0; //posicionamento horizontal

		var posy = 0; //posicionamento vertical

			

		if (!e) var e = window.event;

		if (e.pageX || e.pageY) 	

		{

			posx = e.pageX;

			posy = e.pageY;

		}

		else if (e.clientX || e.clientY) 	

		{

			posx = e.clientX + document.body.scrollLeft

				+ document.documentElement.scrollLeft;

			posy = e.clientY + document.body.scrollTop

				+ document.documentElement.scrollTop;

		}

Mais uma vez, nós temos que ter o cuidade de verificar a compatibilidade entre objetos de diferentes navegadores.

E por fim nós realizaremos a requisição AJAX.
Quando a requisição estiver pronta nós só precisaremos colocar o seu conteúdo dentro da div exibi-lá

hint.innerHTML = req.responseText;;

hint.style.top = posy + "px";

hint.style.left = posx + 30 + "px";

hint.style.display = 'block';

Para ocultar a div não é necessário muito trabalho, precaremos apenas alterar o seu atributo display

var hint   = document.getElementById("img_hint");

hint.style.display = 'none';

Simples, não? Por fim, nosso script de servidor, que irá processar a requisição

<?php

	

	header("Content-Type: text/html;  charset=ISO-8859-1",true); 

	

	$id = $_GET['sistema" rel="nofollow" target="_blank">;

	

	if($id == 'debian')

	{

		echo "<img src='debian.gif' />";

		echo "O Debian é um sistema operacional (SO) livre para seu computador. Um sistema operacional é um conjunto de programas básicos e utilitários que fazem seu computador funcionar. O Debian usa o kernel (núcleo de um sistema operacional), Linux, mas a maior parte das ferramentas do SO vem do projeto GNU; daí o nome GNU/Linux.";

	}

	

	if($id == 'ubuntu')

	{

		echo "<img src='ubuntu.jpg' />";

		echo "Ubuntu é um sistema operacional baseado em Linux desenvolvido pela comunidade e é perfeito para notebooks, desktops e servidores. Ele contém todos os aplicativos que voce precisa - um navegador web, programas de apresentaçao, ediçao de texto, planilha eletrônica, comunicador instantâneo e muito mais.";

	}

	

	if($id == 'kurumin')

	{

		echo "<img src='kurumin.png' />";

		echo "O Kurumin é a distribuiçao Linux desenvolvida pela equipe do Guia do Hardware e colaboradores, que se tornou rapidamente uma das distribuiçoes Linux mais usadas no país. Todos os componentes do sistema sao abertos, permitindo que além de usar, voce possa redistribuí-lo, ver e modificar os scripts de configuraçao e desenvolver versoes modificadas do sistema.";

	}



?>

E isso e tudo.
Até a próxima.

Arquivo anexo: Clique aqui para download

Preencha o formulário para comentar:

Kakaroto - Publicado em: 11/10/2007 - 20:44

vou testar sua solução e ver como funcionar ,seria legal tu ter deixado uma pagina com exemplo para a galera ver
mais goste do seu comentario sobre o ubuntu - podia ter colocado la no ubuntu - um linux para seres humanos :D
um abraço velho

Ramon - Publicado em: 11/10/2007 - 21:36

OBRIGADO KAKAROTO, EU IRERI DISPONIBLIZAR UM LINK COM OS EXEMPLOS E OUTROS MAIS.

Bruno Estêvão Rosa - Publicado em: 05/06/2008 - 00:22

cara, nota 10, show de bola.
Simples e muito explicativo. Eu estava muito precisando de um assim. Muito Obrigado.

Bruno Estêvão
www.sempihost.com.br

Rafael Curi - Publicado em: 05/03/2009 - 04:26

Ramon,

Muito legal este seu tutorial. Curti tanto que comecei a trabalhar um pouco em cima dos arquivos.
Fiz umas divisões para ficar mais visual e coloquei as informações em banco de dados.

Ficou bem legal... :)

Valeu pela dica!!!

Autor da matéria

» site do autor

Ramon Ferreira Silva
Estudante de Sistemas de Informação, estudou no CEFET/RJ e hoje trabalha com ASP, ASP.NET, PHP e AJAX.

Todas as matérias de Ramon Ferreira Silva

Seguir o Oficina da Net

Matérias relacionadas

A difusão do Ajax
Em tempos cada vez mais o Ajax tem crescido em sites de grandes portai.
Resolvendo o problema do Cache
Muitas das vezes quando para web, nossa aplicação não responde da mane.
Preenchendo uma ComboBox Ajax e Json
Munidos de nossos conhecimentos sobre DOM e JSON, começaremos agora av.
Trabalhando com JSON
A JSON é um formato de dados compacto, nativo do javascript, e que vem.
Acentuação para conteúdos carregados por AJAX
Este é um breve artigo, irei mostrar como renderizar corretamente car.

Destaque