Canalblog
Editer l'article Suivre ce blog Administration + Créer mon blog
Publicité
Le GénérateurS
Publicité
5 mars 2010

Texte défilant - Avec des images

On peut également faire défiler des images accompagnant un texte, à l'intérieur d'une boîte latérale.

                                                 
                                                                                                                                                                                           
TITRE DE LA BOITE
                        

On saisit  d'abord son texte, on insère les images de façon la plus classique en cliquant sur l'icone
                        bouton_image.jpg
                        comme pour celles qui suivent : 
                        celle-ci
                        bouton1.jpg
                        puis celle-là
                         gymale.gif
                        ou encore cette dernière
                         php.gif

                        

                        
            
Il faut ici utiliser la balise marquee auquelle il sera nécessaire d'indiquer la direction de défilement du texte ici up

Dans une boîte libre, on peut dans un premier temps faire comme si te texte était fixe, on insère ensuite les images aux endroits souhaités.

En pratique :

 

                                                                                           
boite_libre_editeur.jpgboite_libre_fixe.jpg
Dans l'éditeur, entrer le texte, le mettre en forme et placer les images.Les différents éléments prennent naturellement leur place dans la boîte libre en fonction de la mise en page réalisée dans celui-ci.

Reste maintenant à insérer le code qui permet de faire défiler l'ensemble dans cette boîte libre.

1° cas :

Défilement continu.

Code à placer dans le code source  AVANT L'ENSEMBLE réalisé précédemment

                                                                 
CODE
            
<marquee direction="up" 
scrollamount="2"
style="padding: 5px;
width: 90%; height: 180px;">
            

Le sens de défilement se fera de bas en haut, les dimensions de la zone de défilement sont données par la hauteur "height"  (ici 180px) et le "taux" d'occupation  fix" à 90% de la boîte latérale suivant sa largeur.

 

Code à placer APRES L'ENSEMBLE réaliser précédemment.

                                                                 
CODE
            
</marquee>
            

 

2° cas :

Défilement avec des arrêts lors que la souris est sur le boîte.

Code à placer dans la code source  AVANT L'ENSEMBLE réaliser dans l'éditeur de la boîte libre.

                                                                 
CODE
            
<marquee onmouseover="this.stop()" 
style="padding: 5px;
width: 90%; height: 180px;
" onmouseout="this.start()"
scrollamount="1"
direction="up"
behiavor="scroll">
            

 

 

 

Code à placer APRES CE MEME ENSEMBLE.

                                                                 
CODE
            
</marquee>
            

Exemple :

La totalité du code que l'on peut voir dans la source peut sembler un peu long, à titre d'exemple voici la totalité de ce qui apparaît dans la code source pour obtenir le défilement du texte et des images présentés en haut de cette fenêtre avec l'option qui permet d'avoir l'arrêt du défilement au passage de la  souris.

 

                                                     
CODE
                                                                                                                                          
CODE
                        
<marquee onmouseover="this.stop()" 
style="padding: 5px; width: 90%; height: 180px;"
  onmouseout="this.start()" scrollamount="1"
direction="up" behiavor="scroll">
<div style="text-align: center;">
<font size="2" face="Verdana">
On saisit&nbsp; d'abord son texte,
on insère les images de façon
la plus classique en cliquant sur
l'icone <br />
<img width="25" height="24" border="0"
title="bouton_image.jpg" alt="bouton_image.jpg"
src="img/bouton_image.jpg" /> <br />
comme pour celles qui suivent :&nbsp; <br />
<span style="font-weight: bold;">
celle-ci </span><br />
<img width="110" height="28" border="0"
title="bouton1.jpg" alt="bouton1.jpg"
src="img/bouton1.jpg" />
  <br /><span style="font-weight: bold;">
puis celle-là</span><br />&nbsp;
<img width="61" height="39" border="0"
title="gymale.gif" alt="gymale.gif"
src="img/gymale.gif" /> <br />
<span style="font-weight: bold;">
ou encore cette dernière</span><br />&nbsp;
<img width="95" height="50" border="0"
title="php.gif" alt="php.gif"< /br>
src="img/php.gif" />
<br body="" /></font></div>
</marquee>

Source

Publicité
Publicité
Commentaires
Publicité