Exibindo Hints com AJAX

É comum ver em aplicações Desktop, elementos que possuem um Hint(Dica), o qual mostra uma breve descrição sobre o elemmento.Vremos como criar Hints para os elementos de nossas páginas, carregando o conteúdo assincronamente.

Por | @oficinadanet Programação
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





Exibindo Hints com AJAX


Exibindo Hints com AJAX


Exibindo Hints com AJAX





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


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:


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

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

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

if($id == 'debian')
{
    echo "Exibindo Hints com AJAX";
    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 "Exibindo Hints com AJAX";
    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 "Exibindo Hints com AJAX";
    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.

Mais sobre:
Share Tweet
DESTAQUESRecomendado
Mais compartilhados
Comentários