Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

ZeehRoberto

[Resolvido] Como mostrar imagem ao passar mouse sobre link

Por , em Javascript

Recommended Posts

ZeehRoberto    0

ZeehRoberto
Postado

Fala galera... preciso de ajuda...

tenho uma lista com varios produtos de um site que estou fazendo... preciso mostrar informações e uma imagem de cada produto... mas nao ao clicar em um link...

 

Quero que fique assim:

O usuário passou o mouse no produto uma simples pop-up apareça com foto e detalhes... ele tirou o mouse sai denovo... como no site da www.waz.com.br

 

segue imagem do exemplo:

Imagem Postada

 

valeu galera... se possivel ajudem por favor...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Otata    4

Otata
Postado

eae.. pra fazer isso você usa o onmouseover e o onmouseout... você cria uma div que fica escondida, faz uma função pra mostra-lá com as informaçõs de cada produto e outra para esconde-lá novamente...

 

tendeu ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

ZeehRoberto    0

ZeehRoberto
Postado

eae.. pra fazer isso você usa o onmouseover e o onmouseout... você cria uma div que fica escondida, faz uma função pra mostra-lá com as informaçõs de cada produto e outra para esconde-lá novamente...

 

tendeu ?

Poderia passar um codigo de exemplo velho??? falando nao consigo =/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Otata    4

Otata
Postado

bom exemplo completo ai..

 

t+

<html>
<head>
<script>
function info(obj,titulo,conteudo){
	
	var divPop = document.getElementById("pop");
	divPop.style.display = "";
	divPop.childNodes[1].firstChild.nodeValue = titulo;
	divPop.childNodes[3].firstChild.nodeValue = conteudo;
	
	obj.appendChild(divPop);
}
function fechar(){
	var divPop = document.getElementById("pop");
	divPop.style.display = "none";
}
</script>

<style>

#tab{
	border:1px solid;
}
#tab td{
	border:1px solid;
	cursor:pointer;
}
#pop{
	width:200px;
	height:100px;
	border:1px solid gray;
	position:absolute;
	background-color:yellow;
}
</style>

</head>
<body>
	<table id="tab" cellspacing="0">
		<tr onmouseover="info(this,'Produto 1','bla bla')" onmouseout="fechar()" >
			<td>Produto 1</td>
		</tr>
		<tr onmouseover="info(this,'Produto 2','bla bla 2')" onmouseout="fechar()">
			<td>Produto 2</td>
		</tr>
	</table>
	<div id="pop" style="display:none">
		<div style="background-color:#b2b2b2"> </div>
		<div> </div>		
	</div>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

luizsnpjr    0

luizsnpjr
Postado

Otavio....tem como o div acompanhar o link....pq vamos dizer assim, eu tenho um Loop com 6 chamadas....eu vo ter que colocar a posição dos 6 pra fik na frente do link?

Eu queria que o div ficasse na frente do link automaticamente, tem alguma possibilidade de isso acontecer?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Otata    4

Otata
Postado 

<html>

<head>

<script>

function info(obj,titulo,conteudo){

 

var divPop = document.getElementById("pop");

divPop.style.display = "";

document.getElementById("popTitulo").innerHTML = titulo;

document.getElementById("popConteudo").innerHTML = conteudo;

divPop.style.left = obj.offsetLeft + 50;

divPop.style.top = obj.offsetTop + 10;

}

function fechar(){

var divPop = document.getElementById("pop");

divPop.style.display = "none";

}

</script>

 

<style>

 

#tab{

border:1px solid;

}

#tab td{

border:1px solid;

cursor:pointer;

}

#pop{

width:200px;

height:100px;

border:1px solid gray;

position:absolute;

background-color:yellow;

}

</style>

 

</head>

<body>

<table id="tab" cellspacing="0">

<tr onmouseover="info(this,'Produto 1','bla bla')" onmouseout="fechar()" >

<td>Produto 1</td>

</tr>

<tr onmouseover="info(this,'Produto 2','bla bla 2')" onmouseout="fechar()">

<td>Produto 2</td>

</tr>

</table>

<div id="pop" style="display:none">

<div id="popTitulo" style="background-color:#b2b2b2"> </div>

<div id="popConteudo"> </div>

</div>

</body>

</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Raficcha    1

Raficcha
Postado

Opa .. tudo tri?

 

Bah cara, fiz um objeto que faz exatamente essa PopUp ai, e ela segue o mouse, se você sinteressar (eu não vo cobra pelo uso ..: D pode fica tranquilo) me passa um email que ai eu t mostro tudo como ele funciona e tals...

 

email: tonello.rafinha@gmail.com

blog: raficcha.blogspot.com (to postando o meu blog, pq la eu coloco alguns scripts)

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Raficcha se deseja compartilhar código, pode postar aqui no fórum.

Já que é sobre esse tópico, pode ser aqui mesmo.

 

Com certeza, virá à ajudar outros membros e pessoas que pesquisem.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Edultra    13

Edultra
Postado

Fala galera, estava eu procurando uma forma de "economizar" em um código javascript quando me deparei com este código, dai fiquei pensando e pensando e consegui elaborar um código super economizado (diria eu...) para exibição de uma div pop up, neste caso eu estou elaborando uma que possa ser utilizada em um organograma, dai cheguei em um humilde resultado mas que executa tudo certinho, não coloquei as imagens, pois isso é basico e o pessoal vai poder utilizar com onMouseOver, onClick e etc.

 

Bem segue o código:

 

<html>
<head>
<title>Organograma</title>
</head>
<script language="javascript">
function abre(nome)
{
	document.getElementById('popa').style.display='none';
	document.getElementById('popB').style.display='none';
	document.getElementById('pop'+nome).style.display='block';
}

</script>
<div id="popa" style="display:none;background-color:#0000FF;position:absolute;top:50%;left:50%;margin-left:-150px;margin-top:-100px;width:300px;height:200px;">Abriu div A</div>
<div id="popb" style="display:none;background-color:#339966;position:absolute;top:50%;left:50%;margin-left:-150px;margin-top:-100px;width:300px;height:200px;">Abriu a div B</div>

<a href="#" onMouseOver="abre('a')">[Abre A]</a>

<a href="#" onMouseOver="abre('b')">[Abre B]</a>

<body>
</body>
</html>
No caso do tópico o usuario pode utilizar uma imagem como fundo da div (de igual tamanho ou auto) pode tambem pensar um pouco e criar aqueles efeitos de escurecimento de fundo e etc.

Qualquer coisa estamos ai.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Julio 3d render    0

Julio 3d render
Postado

Dae pessoal!!

Então,eu tinha aprendido de uma outra forma,mas pelo que eu vi parece ser do jeito mais trabalhoso XD,eu não sabia que dava pra fazer de outra forma a não ser essa,interessante^^,tipo aonde é pra aparecer a imagem eu coluquei uma imagem do tamanho exata da foto só que salvei como transparente em gif no photoshop e exportei pro DRW,dai a programação fica,qndo passar o mouse sobre a imagem, troca imagem gif pela foto tal,qndo tirar o mouse de cima da foto,volta imagem gif.Lá embaixo tá a programação de onmouseover,onmouseout.

Tipo usei aquele código src=(fig),só que fiz várias functions pelo fato de ter umas 7 imagens.

Vê oq vcs acham.

Falou!!!

OBS:AS 4 PRIMEIRAS FUNÇÕES SÃO DO MENU DO SITE

 

 

 

 

<script>
function troca1(fig){
document.f1.src=fig
}
function volta1(){
document.f1.src="images/menu_03.jpg"
}
function troca2(fig){
document.f2.src=fig
}
function volta2(){
document.f2.src="images/menu_05.jpg"
}
function troca3(fig){
document.f3.src=fig
}
function volta3(){
document.f3.src="images/menu_06.jpg"
}
function troca4(fig){
document.f4.src=fig
}
function volta4(){
document.f4.src="images/menu_07.jpg"
}
function mostrar1(fig){
document.amplia.src=fig
}
function voltar1(){
document.amplia.src="images/transp.gif"
}
function mostrar2(fig){
document.amplia.src=fig
}
function voltar2(){
document.amplia.src="images/transp.gif"
}
function mostrar3(fig){
document.amplia.src=fig
}
function voltar3(){
document.amplia.src="images/transp.gif"
}
function mostrar4(fig){
document.amplia.src=fig
}
function voltar4(){
document.amplia.src="images/transp.gif"
}
function mostrar5(fig){
document.amplia.src=fig
}
function voltar5(){
document.amplia.src="images/transp.gif"
}
function mostrar6(fig){
document.amplia.src=fig
}
function voltar6(){
document.amplia.src="images/transp.gif"
}
function mostrar7(fig){
document.amplia.src=fig
}
function voltar7(){
document.amplia.src="images/transp.gif"
}

</script>

<td width="108"><div align="center"><a href="#"><img src="7p.jpg" name="f1" width="80" height="60" border="0" id="f1" onMouseOver="mostrar1('7a.jpg')" onMouseOut="voltar1()" /></a></div></td>
    <td width="123"><div align="center"><a href="#"><img src="3p.jpg" name="f2" width="80" height="60" border="0" id="f2" onMouseOver="mostrar2('3a.jpg')"onMouseOut="voltar2()" /></a></div></td>
    <td width="105"><a href="#"><img src="2p.jpg" name="f3" width="80" height="60" border="0" id="f3" onmouseover="mostrar3('2a.jpg')" onmouseout="voltar3()"/></a></td>
    <td width="96"><a href="#"><img src="4p.jpg" name="f4" width="80" height="60" border="0" id="f4" onmouseover="mostrar4('4a.jpg')" onmouseout="voltar4()" /></a></td>
    <td width="108"><div align="center"><a href="#"><img src="p1.jpg" name="f5" width="80" height="60" border="0" id="f5" onmouseover="mostrar5('1a.jpg')"onmouseout="voltar5()" /> </a></div></td>
    <td width="124"><div align="center"><a href="#"><img src="5p.jpg" name="f6" width="80" height="60" border="0" id="f6" onmouseover="mostrar6('5a.jpg')"onmouseout="voltar6()" /></a></div></td>
    <td width="92"><div align="right"><a href="#"><img src="6p.jpg" name="f7" width="80" height="60" border="0" id="f7" onmouseover="mostrar7('6a.jpg')"onmouseout="voltar7()" /></a></div></td>

Compartilhar este post

Link para o post
Compartilhar em outros sites

vctrps    0

vctrps
Postado

bom exemplo completo ai..

 

t+

<html>
<head>
<script>
function info(obj,titulo,conteudo){
	
	var divPop = document.getElementById("pop");
	divPop.style.display = "";
	divPop.childNodes[1].firstChild.nodeValue = titulo;
	divPop.childNodes[3].firstChild.nodeValue = conteudo;
	
	obj.appendChild(divPop);
}
function fechar(){
	var divPop = document.getElementById("pop");
	divPop.style.display = "none";
}
</script>

<style>

#tab{
	border:1px solid;
}
#tab td{
	border:1px solid;
	cursor:pointer;
}
#pop{
	width:200px;
	height:100px;
	border:1px solid gray;
	position:absolute;
	background-color:yellow;
}
</style>

</head>
<body>
	<table id="tab" cellspacing="0">
		<tr onmouseover="info(this,'Produto 1','bla bla')" onmouseout="fechar()" >
			<td>Produto 1</td>
		</tr>
		<tr onmouseover="info(this,'Produto 2','bla bla 2')" onmouseout="fechar()">
			<td>Produto 2</td>
		</tr>
	</table>
	<div id="pop" style="display:none">
		<div style="background-color:#b2b2b2"> </div>
		<div> </div>		
	</div>

</body>
</html>

Isso é exatamente o que eu estou procurando, mas como eu faço para colocar uma imagem no lugar do "bla bla"?

Compartilhar este post

Link para o post
Compartilhar em outros sites

vctrps    0

vctrps
Postado

Pessoal, estou com uma dúvida, imaginem que eu tenho duas div's, uma div (A) e uma div (B), na div (A) eu tenho a palavra01. Como eu faço para que quando eu passe o mouse sobre a palavra01 apareça uma imagem da div (B)?

 

Deu para entender? :)

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito