Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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><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><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>Será que alguém sabe resolver isso? não tenho a experiência dos colegas!
Carregando comentários...