• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

Tiago_07

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

5 mensagens neste tópico

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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros 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.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Ta a funcionar pessoal!

Obrigado!

mas outra duvida nao da para por essa tal imagem a aparecer ao lado do cursor?

cumps

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros 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.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Muito Obrigado!

era mesmo isto que eu queria!

Obrigado mais uma vez!!

Fiquem bem

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora