Imagem acompanha movimento do mouse

[wdc_black_ 0]

seguinte galera estava pensando em criar do lado eskerdo do meu site uma barra vertical, com uma imagem nela...

queria saber se tem como essa imagem acompanhar o movimento do mouse, se ele for pra baixo ela vai pra baixo...

se ele for pra cima a imagem vai pra cima...

heehhe, sei que é algo diferente... queria ver ser alguns de vcs ja ouviu falar ou viu algo em relação a isso..

obrigado pela atenção..

abraço

[Thiago Retondar 18]

Vai ter que usar JavaScript. Vou mover pra lá. Fiz um exemplo aqui, dá uma estudada:

 

window.onload = function(){
	document.onmousemove = function(){
		var pY = window.event.clientY;
		var img = document.getElementById('img');
		img.setAttribute("style", "position: relative; left: 0");
		img.style.top = (pY - img.offsetHeight / 2)  + "px";
	};
};

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[wdc_black_ 0]

por exemplo eu teria aqui...

 

<div class="barra">
<div class="img"></div>
</div>

a div barra é a barra vertical da esquerda

e a div img é a div que tem como fundo a imagem de 100x100 pixels que vai fica se movimentando de acordo com o mouse...

tem como fazer movendo a div, ou tenque ser movendo a imagem?

 

obrigado ;)

[Thiago Retondar 18]

Assim:

 

<div id="barra">
<div class="img"></div>
</div>

window.onload = function(){
        document.onmousemove = function(){
                var pY = window.event.clientY;
                var img = document.getElementById('barra');
                img.setAttribute("style", "position: relative; left: 0");
                img.style.top = (pY - img.offsetHeight / 2)  + "px";
        };
};

Só estudar o código.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[wdc_black_ 0]

eu não entendo nada de java script e pouco de css...

n to entendendo nada desse código... =/

n tem como explica e mostra como aplico ele?

obrigado

[Thiago Retondar 18]

window.onload = function(){ // quando o HTML carregar, faça
        document.onmousemove = function(){ // quando o mouse mover sobre o documento, faça
                var pY = window.event.clientY; // cria uma variável com a posição do eixo Y do mouse
                var img = document.getElementById('barra'); // pega o elemento pelo ID
                img.setAttribute("style", "position: relative; left: 0"); // defino o elemento que peguei acima com position e left
                img.style.top = (pY - img.offsetHeight / 2)  + "px"; // a posição da imagem será sempre a posição do mouse menos altura da imagem dividido por 2
        }; // fecha onmousemove
}; fecha onload

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif