Oficina da Net » Desenvolvimento » Ajax

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: 3.911
Comentário(s): 3

imprimir envie por e-mail compartilhe
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" 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

» clique aqui para comentar
Preencha o formulário para comentar:
Nome:*

E-mail:* (não será exibido)

Site: (http://)

Comentário:*

Deseja receber os comentários no e-mail?

Anti-spam: (nova imagem)





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

 

Autor da matéria
Ramon Ferreira Silva
» 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

Publicidade
Seguir o Oficina da Net
RSS

RSS

RSS
Top matérias do mês
Matérias relacionadas
Destaque
Tags

© 2005 - 2009 - Oficina da Net - v 4.0 - É proibida a reprodução parcial ou completa do conteúdo deste site sem autorização por escrito. Resolução adequada: 1024x768px.

Parceiros: Bahia em Foco  |  Blog do Vicente  |  BuscaKi  |  Chongas  |  ClicRN  |  Código Fonte  |  Coletânea de ícones  |  Comunicação Digital  |  Concurso Público  |  Concursos  |  Criação de sites  |  CriarWeb  |  Downloads  |  Fontes Grátis  |  GMasters  |  Hospedagem  |  Hospedagem de sites  |  Ícones  |  Infonet News  |  iParaiba  |  JLAMIM  |  MX masters  |  Notebook  |  Portal Super  |  Profissionais de Web  |  Qualidade Brasil  |  Renan Lima  |  SEO Master  |  Sonhos  |  tutoriais.org  |  WebLivre  |  Zoom Digital