Silici0 :: Blog

Resolvi escrever sobre uma idéia que rola bastante por ae, de um div seguir o mouse, porém somente apareçer (mostrar a div) quando o mouse esta por cima de um link, como comentado no topico Div Seguindo o Mouse, somente irei agora adicionar algumas poucas linhas de códigos, recomendo que antes leia o outro topico para não ficar perdido.

A idéia basica de ter varias imagens seguindo o mouse porém so ativa-las (mostra-las) quando o mouse passar por cima de algum link, div, tabela, celula; enfim um objeto qualquer. No nosso caso a escolha foi uma DIV.

Primeiro vamos criar a div igual anteriormente, porém vamos agora, esconder essa div, para que não apareça na tela:

HTML:

<div id="MinhaDiv1" style="position:absolute; overflow:hidden; visibility: hidden;display: none; z-index:999; background-color:#ffffcc;"><img xsrc="img/01.jpg" alt="Carro"></div>
<div id="MinhaDiv2" style="position:absolute; overflow:hidden; visibility: hidden;display: none; z-index:999; background-color:#ffffcc;"><img xsrc="img/02.jpg" alt="Carro"></div>

Segundo passo é criar os links, no nosso caso como dito anteriormente vamos criar os links apartir de uma div, apartir dessa div iremos chamar a Função javascript que irá mostrar a div referente, iremos usar 2 ações: onmouseover (Ação executada quando o mouse esta em cima do objeto) e onmouseout (Ação executada quando o mouse esta fora do objeto, melhor quando ele sai do objeto). Ao executar a ação iremos chamar a função enviando 2 parametros, ID (dizendo qual DIV) e AÇÃO (qual ação tomar Mostrar/Esconder).

HTML:

<div id="caixa" onMouseOver="SegueMouse('MinhaDiv1',1)" onMouseOut="SegueMouse('MinhaDiv1',0)"><a xhref="http://rafaelcunha.com/#">Carro importado
</a></div>
<div id="caixa" onMouseOver="SegueMouse('MinhaDiv2',1)" onMouseOut="SegueMouse('MinhaDiv2',0)"><a xhref="http://rafaelcunha.com/#">Se meu fusca falasse
</a></div>

Agora basta usarmos a função do POST anterior e complementar nela a idéia de mostra e esconder a div, ficando o script completo da maneira abaixo:

JAVASCRIPT:

function SegueMouse(id,flagit) {
var divName = id; // div that is to follow the mouse
// (must be position:absolute)
var offX = 35; // X offset from mouse position
var offY = 35; // Y offset from mouse position
function mouseX(evt) {if (!evt) evt = window.event; if (evt.pageX) return evt.pageX; else if (evt.clientX)return evt.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); else return 0;}
function mouseY(evt) {if (!evt) evt = window.event; if (evt.pageY) return evt.pageY; else if (evt.clientY)return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); else return 0;}
function follow(evt) {if (document.getElementById) {var obj = document.getElementById(divName).style; obj.visibility = 'visible';
obj.left = (parseInt(mouseX(evt))+offX) + 'px';
obj.top = (parseInt(mouseY(evt))+offY) + 'px';}}
document.onmousemove = follow;
if (flagit=="1"){
if (document.layers) document.layers[''+id+''].display = ""
else if (document.all) document.all[''+id+''].style.display = ""
else if (document.getElementById) document.getElementById(''+id+'').style.display = ""
}else
if (flagit=="0"){
if (document.layers) document.layers[''+id+''].display = "none"
else if (document.all) document.all[''+id+''].style.display = "none"
else if (document.getElementById) document.getElementById(''+id+'').style.display = "none"
}
}

Para ver o exemplo em execução basta acessa o link : Idéia para Div seguindo o mouse. Sinta-se livre para comentar, duvidar, justificar e até se justificar. ah?