Miella Hitsue Messages : 437 Date d'inscription : 19/09/2012 Age : 24 Localisation : Entrain de faire des choses avec Gamma .///. Humeur : Perverse .///.
| Sujet: Nan c'est pas vraaaai xD Sam 26 Jan - 16:02 | |
| - Code:
-
<!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> |
|