Bonjour,
Voici un exemple de défilement vertical.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Générateur d'objets défilants http://www.abciweb.net</title>
<script type="text/javascript" src="http://www.abciweb.net/Scripts/objet-defilant.js"></script>
<script type="text/javascript">
<!--
addLoad_DF_ObjetDefilant(function(){DF_ObjetDefilant('defilant','auto','b','h','20','5','15','2000')});
-->
</script>
<style type="text/css">
<!--
body {
font-size:1em;
}
#cadre_defilant {
overflow : hidden;/*pour ie*/
width:230px;
height:400px;
margin:2em auto 0 auto;
padding : 0 1em;
border:18px solid #CC0066;
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
text-align:justify;
line-height:1.4em;
}
#conteneur_defilant {
position : relative;
overflow : hidden;
visibility:hidden;/*pour ie*/
height:100%;
}
/*pour centrer les images*/
#defilant img {
display:block;
margin:auto;
}
-->
</style>
</head>
<body>
<div id = "cadre_defilant">
<div id = "conteneur_defilant">
<div id = "defilant" onmouseover = "DF_ObjetDefilant_Off('defilant')">
<img src = "http://abciweb.net/PHOTO/Albert-Einstein--Langue.jpg" width="157" height="186"/>
<br /><strong>Albert et une bimbo</strong><br /><br />
<a class="liens" href="http://www.abciweb.net/objet-defilant.php"><strong>Autres exemples</strong></a> ...
<br /><br /><br />
On peut mélanger du texte et des images ou mettre plusieurs images <strong>à condition</strong> de renseigner la hauteur <strong>et</strong> la largeur des images dans le code html du défilant.
<br /><br /><br />
<img src="http://www.abciweb.net/PHOTO/bimbo.jpg" width="137" height="405" title="Bimbo 1" alt="Bimbo 1" />
</div>
</div>
</div>
<div onmouseover = "DF_ObjetDefilant_On('defilant')" onclick = "DF_ObjetDefilant_Inverse('defilant')" style="position:relative;width:40px;margin:auto; cursor:pointer;z-index:10;top:-17px"><img src="http://www.abciweb.net/images_nav/fleche_aller_retour_blanc_fong_rouge.png" width="40" height="15" alt="Inversion du sens de défilement" title="Inversion du sens de défilement" />
</div>
</body>
</html>
Voir le résultat de l'exemple
Note : le "css" de "#conteneur_defilant" est indispensable mais toujours identique.
A noter que le css de centrage des images dans le code ci-dessus ne doit être utilisé que pour le mode vertical.
Modifié en dernier par
AB le 16 juin 2011, 19:36, modifié 6 fois.
