<!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>"Watashi wa Amy desu"</title>
<style type="text/css">
div#conteneur{
width:640px; /* La largeur du conteneur */
margin:auto; /* On le centre dans la page */
}
div.bloc1{
width:500px; /* La largeur */
height: 250px; /* La hauteur */
background-color:white; /* Couleur de fond */
border:1px solid black; /* Cadre */
margin:4px; /* L'espace entre mes blocs */
overflow:hidden; /* On empêche le texte de sortir */
float:left; /* On aligne les blocs à gauche */
}
div.bloc2{
width:500px; /* La largeur */
height: 250px; /* La hauteur */
background-color:white; /* Couleur de fond */
color:black; /* Couleur du texte */
font-family: Comic sans ms; /* Police */
font-size: 12px; /* Taille de la police */
text-align:center; /* Texte centré */
position:absolute; /* On place le bloc en haut à gauche dans le bloc1 */
overflow:auto; /* la scrollbar */
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" >
<!-- //
$(document).ready(function(){
$(".bloc2").css({"opacity" : "0"}); <!-- on cache tous les blocs contenant le texte -->
$(".bloc1").mouseover(function(){ <!-- quand la souris survole le bloc 1 -->
$(this).children(".bloc2").animate({
opacity : "1" <!-- le texte apparait -->
}, {queue:false, duration:1500} );
});
$(".bloc1").mouseout(function(){ <!-- quand la souris quitte le bloc 1 -->
$(this).children(".bloc2").animate({
opacity : "0" <!-- le texte disparait -->
}, {queue:false, duration:1500} );
});
});
-->
</script>
</head>
<body>
<div id="conteneur">
<!-- DEBUT du premier bloc -->
<div class="bloc1">
<div class="bloc2">
<iframe style="width: 500px; height: 250px; display: block; margin-left: auto; margin-right: auto;" src="http://test02.fra.co/h12-signature" frameborder="no" scrolling="no" width="500" height="250"></iframe>
</div>
<img src="http://image.noelshack.com/fichiers/2012/52/1356639920-for-amy.png" alt="mon image" />
</div>
<!-- Fin du premier bloc -->
</div>
</body>
</html>
Accueil 
