Ir para conteúdo

POWERED BY:

Arquivado

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

Milton Júnior

[Resolvido] Div sobre imagem

Por , em Javascript

Recommended Posts

Milton Júnior    0

Milton Júnior
Postado

Olá pessoal, serei o mais objetivo possível.

Estou tentando fazer com que, ao posicionar o mouse sobre a imagem, apareça uma div sobre ela com um texto, como acontece na imagem do profile do Orkut. Quando colocamos o mouse em cima da foto, aparece uma div com o texto "alterar minha foto".

Achei um pequeno codigo na net que simula isso mas não funciona 100%, tentei algumas alterações mas não tive sucesso.

 

Aqui está o codigo original:

 

JQUERY

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	
	var button = $('#change_button');
	var spinner = $('#spinner');
	
	//set the opacity to 0...
	button.css('opacity', 0);
	spinner.css('top', ($('.profile_pic').height() - spinner.height()) / 2)
	spinner.css('left', ($('.profile_pic').width() - spinner.width()) / 2)
	
	//On mouse over those thumbnail
	$('.profile_pic').hover(function() {
		button.css('opacity', .5);
		button.stop(false,true).fadeIn(200);
	},
	function() {
		button.stop(false,true).fadeOut(200);
	});
	
});
  
</script>

CSS

<style type="text/css">
	div.profile_pic{
		position:relative;
		width:125px;
	}
	div.change_button{
		position:absolute;
		bottom:0px;
		left:0px;
		display:none;
		background-color:black;
		font-family: 'tahoma';
		font-size:11px;
		text-decoration:underline;
		color:white;
		width:125px;
	}
	div.change_button_text{
		padding:10px;
	}
	#spinner{
		position:absolute;
	}
</style>

HTML

<body>
	<!-- // Container -->
	<div class='profile_pic'>
	<!-- // Spinner -->
	<div id="spinner" style="display:none">
		<img src="spinner_large.gif" border="0">
	</div>
		<!-- // Profile picture -->
		<img src='minhafoto.jpg'  id="profile_img" />
		<!-- // Button Container -->
		<div class='change_button' id='change_button'>
			<!-- // Button -->
			<div class='change_button_text'>Change my photo</div>
		</div>
	</div>
</body>

A div aparece mas desaparece logo em seguida, era pra desaparecer somente quando eu retirasse o mouse.

Será que alguém sabe resolver isso? não tenho a experiência dos colegas!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Otata    4

Otata
Postado

cara testei aqui e funcionou legal..testei no FF

 

t+

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