Affichage des articles dont le libellé est défilement. Afficher tous les articles
Affichage des articles dont le libellé est défilement. Afficher tous les articles

9 août 2010

Créer un menu vertical défilant orienteur

Ce menu a la spécificité de s'arrêter au survol de la souris et est assez simple à réaliser.

Nous allons utiliser les balises marquee pour la réaliser.

Vous collez en HTML
<marquee behavior="scroll" direction="up" height="100"width="400"
scrollamount="1" scrolldelay="1" onmouseover="this.stop()"onmouseout="this.start()">
<p>
<a href="Adresse">Nom du lien</a>
<a href="Adresse">Nom du lien</a>
<a href="Adresse">Nom du lien</a>
<a href="Adresse">Nom du lien</a>
<a href="Adresse">Nom du lien</a>
<a href="Adresse">Nom du lien</a>
<a href="Adresse">Nom du lien</a>
</p>
</marquee>
Vous pouvez modifier
  • la hauteur : height="100"
  • la largeur : width="400"
  • et personnaliser les liens : <a href="Adresse">Nom du lien</a>
Ensuite, vous rajoutez ou supprimez les lignes selon vos besoins.


Nom du lien
Nom du lien
Nom du lien
Nom du lien
Nom du lien
Nom du lien
Nom du lien
Nom du lien
Nom du lien
Nom du lien
Nom du lien
Nom du lien
Nom du lien
Nom du lien
Nom du lien

31 juil. 2010

Créer un textarea avec bouton de sélection

Nous avons vu le textarea simple, voici un modèle plus évolué avec bouton de sélection du texte contenu dans le textarea.

En html, vous collez ce code
<script language="JavaScript">
<!--
function selectionner()
{
document.votre_formulaire.votre_textarea.select();
}
-->
</script>
<form name="votre_formulaire">
<textarea name="votre_textarea">
Votre texte
</textarea>
<input type="button" value="tout sélectionner" onclick="selectionner()">
</form>
Et nous obtenons

Créer un textarea

Autrement appelé "boîte de texte défilante"
Il peut être utile lorsque vous avez un texte assez long ou un script à mettre sur votre blog.

Dans l'html, vous collez ce pavé
<textarea name=a cols=50 rows=3 style="font-family:Verdana;font-size:8pt;color:white;background-color:#000080;border:1 white">VOTRE TEXTE ICI</textarea>
Vous obtenez :



cols=50 : la largeur
rows=3 : le nombre de ligne donc la hauteur
font-family:Verdana : police
font-size:8pt : taille de police
color:white : couleur de police
background-color:#000080 : couleur de fond

A voir : créer un textarea avec bouton de sélection

25 juil. 2010

Faire défiler plusieurs photos

Afin que le rendu soit stable sous FF et IE, on place les photos dans un tableau :

En HTML, vous collez ce pavé en personnalisant avec vos propres adresses d'image en rouge et leurs dimensions en bleu :
<table style="text-align: center; height: 100%;" border="0" cellspacing="1" cellpadding="1" width="50%">
<tbody style="text-align: left;">
<tr style="text-align: left;">
<td style="text-align: left;"><marquee> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWusS9pmu5cPTbUUvRhujdbFBTeQAyR1IsbdZXUcF6Y4f_J-eyfdkLjl3I2FUZ4Y3S_IcTGZ64-adYYjUEViaCI4Tks5DEe6NFPI6lXscWVwZgMkDBsSIy_cHhnmhkXmk_1xnvY0wUUVU/s1600/photo008bis.jpg" class="noAlign" height="150" width="200"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHOn5IOoKcfczLwRI6G9RCMixNUQnnw9N8RYS-dTOjIUP9SiJNNbgDn6F8YNWWsM7wHIsy_9bjBL_xSgxoK-kK8_lIcXyT_tQaHXy-R_qHAuSQe-C-0bZRUrMYqC9DEXG78dQSw7fqUJw/s1600/photo007bis.jpg" class="noAlign" height="150" width="200"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyO8NqoY5Sy_LHGJnnG69vs0KWwyolTnX7042F5LCtTb-uVhPWEBm6uGa4XRwOjoeh23_eZCHOrloQXFiI2Q7_eqB_THLt5eIMEFboQua6_IqJNxcwfxWLoUZVBKAPUdegNMKJBnEjZ7A/s1600/photo005bis.jpg" class="noAlign" height="150" width="200"> </marquee></td>
</tr>
</tbody>
</table>
Pour obtenir :

Faire défiler une photo

Lorsque vous mettez une photo sur votre blog, en HTML, il est inscrit :
<img src="adresse de la photo"/>
Pour la faire défiler de droite à gauche, vous complétez avec ce qui est écrit en rouge, toujours en HTML :
<marquee><img src="adresse de la photo"/></marquee>

Pour la faire défiler de gauche à droite, vous complétez avec ce qui est écrit en rouge, toujours en HTML :
<marquee direction="right"><img src="adresse de la photo"/></marquee>

Pour la faire défiler de haut en bas, vous complétez avec ce qui est écrit en rouge, toujours en HTML :
<marquee direction="down"><img src="adresse de la photo"/></marquee>

Pour la faire défiler de bas en haut, vous complétez avec ce qui est écrit en rouge, toujours en HTML :
<marquee direction="up"><img src="adresse de la photo"/></marquee>

21 juil. 2010

Créer une bannière informative défilante

Ces bannières peuvent être utilisées pour mettre en valeur un message important sur votre blog.

Première solution :

Allez sur WIGFLIP

Choisissez la taille de cette bannière : small - medium - large

Ecrivez le texte qui défilera

Cliquez sur Generate Sign

Choisissez plutôt Host to ImageShack pour l'héberger. Elle doit peser lourd.

Chez ImageShack, copier le lien de ce type :

<a href="http://imageshack.us"><img src=http://img301.imageshack.us/img301/287/vodh16nbohnl1.gif border="0" alt="Image Hosted by ImageShack.us" /></a>

et collez le en HTML. Vous obtenez :


Image Hosted by ImageShack.us

Deuxième solution :

Allez sur WEBMODULES

Vous avez le choix entre une bannière statique ou animée.

Complétez le questionnaire :
  • texte
  • arrière-plan
  • format d'image voulu
Une fois, votre oeuvre achevée, cliquez sur téléchargez et vous obtenez cette bannière animée en .gif. Il vous suffira ensuite de l'installer sur votre blog comme une image en collant son
adresse (après l'avoir hébergé) en HTML

<img src="http://nsm01.casimages.com/img/2007/12/01//07120107173562651469453.gif">
pour obtenir :



Troisième solution :

Pour mettre sur votre un blog un bandeau de dédicace, connectez-vous à dedikass.com.

Cliquez sur "Inscris-toi".
Trois apparences sont proposées, ainsi que trois tailles.

L'exemple ci-dessous a été sélectionné dans "design" et "taille moyenne". Il vous suffit de cliquer sur vos choix.

Puis, inscrivez-vous en indiquant un mot de passe et votre adresse email, puis "crée ta dédikass"

Un code html vous sera fourni :

<script src="http://www.dedikass.com/script.php?id=520"></script><noscript><a href="http://www.dedikass.com" target="_blank">Dédicace</a></noscript>

Ainsi qu'un identifiant (nombre à 3 chiffres) et le rappel de votre mot de passe.

Retenez bien ces identifiants qui vous permettront d'accéder à votre dédikass, partie admin.

En vous connectant sur l'admin, vous aurez des statistiques sommaires


Vous pourrez aussi supprimer des dédicaces, modifier l'apparence de votre bandeau et régler quelques options :


Vos visiteurs pourront déposer leurs dédicaces en cliquant sur le bandeau.


Faire défiler une phrase

N'abusez pas des phrases défilantes, c'est fatigant pour le lecteur. Elles doivent seulement être utiliser pour mettre en valeur certaines informations.

C'est assez simple à réaliser : ces codes sont à coller en HTML

Défilement de droite à gauche

<marquee>votre phrase</marquee>
ce qui donne

votre phrase

Défilement de gauche à droite

<marquee direction="right">votre phrase</marquee>
ce qui donne

votre phrase

Défilement de haut en bas
<marquee direction="down">votre phrase</marquee>
ce qui donne

votre phrase

Défilement de bas en haut
<marquee direction="up">votre phrase</marquee>
ce qui donne

votre phrase

Fixer la vitesse d'une phrase défilante

Nous venons de voir comment faire défiler une phrase, maintenant fixons la vitesse à laquelle elle défile.

Vous allez en HTML et vous collez un des pavés suivants selon la vitesse voulue.

<marquee scrollamount=1>Votre texte</marquee>

Ce qui donne :

Vitesse1

<marquee scrollamount=2>Votre texte</marquee>

Ce qui donne :

Vitesse2

<marquee scrollamount=3>Votre texte</marquee>

Ce qui donne :

Vitesse3

Vous pouvez faire défiler encore plus rapidement votre phrase en augmentant le chiffre après scrollamount.

Pour les textes défilants dans d'autres directions, rajouter scrollamount au même endroit.

Par exemple :
<marquee scrollamount=10 direction="right">votre phrase</marquee>
Vitesse 10

20 juil. 2010

Faire défiler votre blog

Il ne faut pas abuser de ce code, il n'est pas agréable à grosse dose ; mais, il peut-être intéressant à mettre dans l'HTML d'un article où ne sont présentes que des photos.

Je l'ai trouvé chez MIRAKS où vous verrez un exemple.

Copiez  le code
<script language="JavaScript1.2">
//======================================================//changez la vitesse (speed). Plus le chiffre est
&eacute;lev&eacute;, plus la vitesse est rapide.
var speed=1
//mettez stopatend=1 si vous voulez que le defilement stoppe a la fin au lieu//de repartir du debutvar
stopatend=0
//mettez horizontalscroll=1 si vous voulez scoller horizontalementvar horizontalscroll=0
//======================================================
var currentpos=0,alt=1,curpos1=0,curpos2=-1
function initialize()
{
    startit()
}
function scrollwindow()
{
    if (document.all)
    {
        if(!horizontalscroll) temp=document.body.scrollTop
        else temp=document.body.scrollLeft
    }
    else
    {
        if(!horizontalscroll) temp=window.pageYOffset
        else temp=window.pageXOffset
    }
    if (alt==0) alt=1
    else alt=0
    if (alt==0) curpos1=temp
    else curpos2=temp
    if (curpos1!=curpos2)
    {
        if (document.all)
        {
            if(!horizontalscroll) currentpos=document.body.scrollTop+speed
            else currentpos=document.body.scrollLeft+speed
        }
        else
        {
            if(!horizontalscroll) currentpos=window.pageYOffset+speed
            else currentpos=window.pageXOffset+speed
        }
        if(!horizontalscroll) window.scroll(0,currentpos)
        else window.scroll(currentpos,0)
    }
    else
    if(!stopatend)
    {
        currentpos=0
        window.scroll(0,0)
    }
}
function startit(){
    setInterval("scrollwindow()",10)
}
window.onload=initialize
</script>
et collez-le en HTML.