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!
Edição feita por: Édipo Costa Rebouças, 12/06/2010, 20:32.
use o padrão bbCode para postagem de códigos
