Jump to content

[Resolvido] Aparecer pequena imagem ao passar o rato sobr o link


Tiago_07

Recommended Posts

Boas pessoal

pois a minha duvida é a  seguinte:

eu queria saber qual o código para fazer aparecer uma pequena imagem quando passar o rato sobre um link, nao consegui encontrar nenhum exemplo senao tinha ido ao codigo fonte, mas sei que há porque já vi e agora precisava disso...

penso que seja em javascript mas n tenho a certeza por isso postei aqui em html.

agradeço qualquer ajuda!

Abarço

Link to comment
Share on other sites

Ois

Basta pores um IMG com position absolute e display none, depos das as coordenadas ah imagem usando o left e o top, e quando

o rato passar por cima do link poes o display da IMG a "block" .

Se puseres o IMG dentro do link podes fazer isso so usando css :

<html>
<head>
<title>Jlog</title>
<style type="text/css">
a:hover img
{
display: block;
}

img
{
position: absolute;
left: 50px;
top: 0px;
display: none;
}
</style>
</head>
<body>
<a href="JavaScript:;"><img id="myimg" src="IMAGEM" border="0px">Qualquer coisa</a>
</body>
</html>

E assim nao precisas de andar a usar JavaScript.

Se a vida te voltar as costas aproveita e apalpa-lhe o cu.

Link to comment
Share on other sites

Ois

Experimenta assim :

<html>
<head>
<title>Teste</title>
<style type="text/css">
a:hover img
{
display: block;
}

img
{
position: absolute;
left: 50px;
top: 0px;
display: none;
}
</style>
<script language="JavaScript">
function HandleOver(evt)
{
if (typeof(evt) == "undefined")
evt = window.event;
var Source = evt.target?evt.target:evt.srcElement
if(Source.nodeType == 3)
Source = Source.parentNode
var Img = Source.getElementsByTagName("IMG");

Source.onmousemove = function(evt)
{
if (typeof(evt) == "undefined")
evt = window.event;
Img[0].style.left = evt.clientX + 10;
Img[0].style.top = evt.clientY + 10;
}
}
</script>
</head>
<body>
<a href="JavaScript:;" onmouseover="HandleOver(event);"><img src="IMAGEM" border="0px">
asasas</a>
</body>
</html>

Nota : Estas duas linhas :

Img[0].style.left = evt.clientX + 10;
Img[0].style.top = evt.clientY + 10;

Tem + 10 pq a imagem nao pode estar muito perto do cursor, pq se estiver o cursor pode ir para cima da imagem e ai faz o onmouseover da imagem e deixa de fazer o onmousemove

do link k faz a imagem andar.

Se a vida te voltar as costas aproveita e apalpa-lhe o cu.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.