Primeiro inclua a biblioteca Jquery a sua página(DOWNLOAD):
<script src="http://seusite.com/jquery.js" type="text/javascript">
Agora adicione o seguinte script entre as tag's <head> e </head>:
<script type='text/javascript'>
$(document).ready(function(){
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
});
</script>Agora coloque os seguintes estilos também entre as tag's <head> e </head>,
só que depois do javascript que você colou anteriormente.
<style>
div.fadehover {
position: relative;
}
img.a {
position: absolute;
left: 0;
top: 0;
z-index: 10;
}
img.b {
position: absolute;
left: 0;
top: 0;
}
</style>Coloque entre as tag's <body> e </body> o seguinte código:
<div class="fadehover"> <img src="1.jpg" alt="" class="a" /> <img src="2.jpg" alt="" class="b" /> </div>
Onde "1.jpg" é a imagem inicial e a "2.jpg" é a imagem que vai aparecendo de acordo
com o mouseover.
No final, seu código deve estar semelhante a este:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Hover Effect</title>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
});
</script>
<style>
div.fadehover {
position: relative;
}
img.a {
position: absolute;
left: 0;
top: 0;
z-index: 10;
}
img.b {
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="fadehover">
<img src="cbavota-bw.jpg" alt="" class="a" />
<img src="cbavota.jpg" alt="" class="b" />
</div>
</body>
</html> Então era isso galera, não deixem de postar seus comentários, té +
0 comentários:
Postar um comentário