Ir para conteúdo

Arquivado

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

reeges_silva

TROCA DE IMAGENS E TEXTO

Por , em Javascript

Recommended Posts

reeges_silva    0

reeges_silva
Postado

Galera to com uma duvida aqui, gostaria de inserir um link LEIA MAIS para realizar as trocas das imagens e junto com a imagem carregar informações do apartamentos, por favor alguém poderia me ajudar . Abaixo o codigo

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-3.0.0.min.js"></script>
<title>Documento sem título</title>
<script>
$(function() {
$('.trocar').hover(
function(){
$(this).children('.front').stop().animate({"top" : '300px'},700); //Trabalha no hoverIn
},
function(){
$(this).children('.front').stop().animate({"top":'0'},400); //Trabalha no hoverOut
});
});
</script>
<style>
.trocar img{
position:absolute;
top:0;
left:0;
width: 250px;
height:150px;
}
.trocar{
width:270px;
height:150px;
float:left;
position:relative;
overflow:hidden;
padding: 5px;
}
</style>
</head>
<body>
<div class="principal">
<div class="trocar"><img src="american bar.JPG" alt="imagem" width="100" height="100" class="back" />
<img src="Balcony Double.jpg" alt="imagem" width="100" height="100" class="front"/></div>
<div class="trocar"><img src="Banheiro.jpg" alt="imagem" width="100" height="100" class="back" />
<img src="cafe da manha.JPG" alt="imagem" width="100" height="100" class="front" /></div>
<div class="trocar"><img src="fachada.jpg" alt="imagem" width="100" height="100" class="back" />
<img src="lan house.jpg" alt="imagem" width="100" height="100" class="front" /></div>
</div>
</body>
</html>

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