 |
Publicité 
|
Souvent, pour créer une rubrique d'actualité sur une page d'accueil, on affiche une boîte contenant les news avec un défilement vertical. Cliquez ici pour voir un exemple. Ceci peut être réalisé en javascript. Nous allons voir comment.
Le principe réside en une manipulation de DIVs. Un DIV appelé conteneur définit la boîte. A l'aide d'une feuille de style on fixe sa taille, sa position et la partie visible. Ensuite, à l'intérieur de ce DIV, on déclare plusieurs DIVs contenant chacun une information à afficher. Ensuite, on utilise un javascript pour faire défiler les DIVs d'informations dans le DIV conteneur.
Voici les étapes à suivre pour créer une boîte d'informations :
1. Déclarez les styles que vous allez utiliser entre les balises <HEAD> et </HEAD>.
Dans notre exemple on a déclaré :
<style type="text/css">
<!--
.posrelative
{
POSITION: relative;
}
#conteneur
{
OVERFLOW: hidden;
WIDTH: 250px;
CLIP: rect(0px 250px 200px 0px);
POSITION: absolute;
LEFT: 5px;
TOP: 62px;
}
-->
</style>
"posrelative" sera la classe des DIVs qui défileront et des images contenues dans ces DIVs.
"conteneur" est l'identifiant du DIV contenant les DIVs devant défiler. Il aura pour caractéristiques: largeur=250, hauteur=200, position x=5 et position y=62. Il doit avoir une position en absolu (sous IE5 et + et NS6, il est possible de le déclarer en relatif).
2. Déclarez l'appel de la bibliothèque javascript scroll.js
<script language="JavaScript" src="scroll.js"></script>
"scroll.js" est un fichier contenant les fonctions permettant de créer une boîte de défilement.
fonction de création d'une boîte :
Box(Nom, Identifiant, Incrément, temporisation1, temporisation2, espace)
oú,
Nom : nom de la boîte,
Incrément : pas d'incrémentation des DIVs (en pixels),
Identifiant : identifiant du DIV contenant les DIVs devant défiler,
temporisation1 : tempo entre deux incrémentations de DIV (en millisecondes),
temporisation2 : temps d'arrêt lorsqu'un DIV arrive au début de la boîte (en millisecondes),
espace : espacement entre deux DIVs
fonction de démarrage du défilement :
start()
fonction d'arrêt du défilement :
stop()
Vous pouvez télécharger ce fichier librairie en cliquant ici.
3. Déclaration d'une fonction d'initialisation javascript qui crée une boîte et démarre le défilement entre les balises <HEAD> et </HEAD>.
exemple :
<script language="JavaScript" type="text/javascript">
<!--
function Init()
{
MyBox = new Box('MyBox', 'conteneur', 1, 100, 2000, 10);
MyBox.start();
}
//-->
</script>
Dans l'exemple, la boîte s'appelle "MyBox". Le DIV contenant toutes les infos a l'identifiant "conteneur". Le pas de défilement est de 1 pixel. La tempo entre deux incrémentations est de 0,1 s. Le temps d'arrêt d'un DIV est de 2 s. L'espacement entre deux infos est de 10 pixels.
4. Déclaration de l'appel de la fonction d'initialisation sur l'événement onload du body.
<BODY onload="Init();">
5. Déclaration du DIV conteneur et des DIVs d'information.
N'oubliez pas que le DIV conteneur doit avoir l'identifiant "conteneur" pour qu'il prenne en compte le style associé dans la feuille de style.
De plus, Les DIVs d'information et les images contenues dans ces DIVs doivent avoir la classe "posrelative" pour être positionnés en relatif.
Exemple :
<DIV ID="conteneur" onmouseover="MyBox.stop();" onmouseout="MyBox.start();">
<DIV ID="info1" class="posrelative">
<A HREF="http://www.devparadise.com/news/presse/A411.php3">
<IMG class="posrelative" SRC="http://www.devparadise.com/img/articles/A411.gif" ALT="membre.devparadise.com : boîte à outils pour webmasters." WIDTH=60 HEIGHT=60 border=0 Hspace=2 vspace=2 align=left>
<FONT COLOR="#10206E" FACE="Arial, Verdana, Helvetica" SIZE=2><B>membre.devparadise.com : boîte à outils pour webmasters.</B></FONT></A><BR>
<FONT FACE="Arial, Verdana, Helvetica" SIZE=1>www.devparadise.com vient d’ouvrir un nouvel espace dédié aux webmasters. Le but de cet espace membre est de proposer aux internautes des services utiles à la création, à la promotion et au suivi d’un site internet.</FONT>
</DIV>
<DIV ID="info1" class="pos_relative">
<AHREF="http://www.devparadise.com/technoweb/graphisme/A410.php3">
<IMG class="posrelative" SRC="http://www.devparadise.com/img/articles/A410.gif" ALT="Transformation sous Photoshop" WIDTH=60 HEIGHT=60 border=0 Hspace=2 vspace=2 align=left>
<FONT COLOR="#10206E" FACE="Arial, Verdana, Helvetica" SIZE=2><B>Transformation sous Photoshop</B></FONT></A><BR>
<FONT FACE="Arial, Verdana, Helvetica" SIZE=1>Réaliser des déformations spectaculaires avec l'outil transformation. Cette astuce vous permettra de donner à vos images des effets du type vue plongeante et autres qui donneront une autre dimension à vos créations...</FONT>
</DIV>
<DIV ID="info1" class="posrelative">
<A HREF="http://www.devparadise.com/download/tools/web/F624.php3">
<IMG class="posrelative" SRC="http://www.devparadise.com/img/articles/F624.gif" ALT="WebExpert 5" WIDTH=60 HEIGHT=60 border=0 Hspace=2 vspace=2 align=left>
<FONT COLOR="#10206E" FACE="Arial, Verdana, Helvetica" SIZE=2><B>WebExpert 5</B></FONT></A><BR>
<FONT FACE="Arial, Verdana, Helvetica" SIZE=1>Premier éditeur HTML francophone, la nouvelle version de WebExpert 5 regorge de nouveautés, de quoi ravir les webmasters d'aujourd'hui.</FONT>
</DIV>
</DIV>
|
