Les ficelles d Anna K.

Ce qui permet de bien distinguer les groupes commentaire/réponse.

Dans le CSS adéquat, vous rajoutez la ligne suivante

padding-bottom:50px : vous créez une marge en bas de la hauteur de votre image
background-image:url(http://www.casimages.com/img/gif/0707110416256265840768.gif) : adresse de votre image
background-repeat:no-repeat : vous demandez que cette image ne soit pas répétée
background-position:bottom center; vous centrez l'image en bas au centre

Vous obtenez

Nous avons vu qu'il existait diverses formes de curseur (article)
Nous allons maintenant voir qu'il est possible d'associer plusieurs curseurs sur un blog.

ASSOCIER UN CURSEUR CLASSIQUE A UN CURSEUR SOUS FORME D'IMAGE

Supposons que vous ayez un curseur sous forme d'image dans tout le blog.

Vous l'avez placé ainsi dans le CSS :
body    {cursor:URL(http://chezpasglop.ifrance.com/cur/baguette01.cur);}

Vous constatez alors qu'il rend impossible le clic sur les liens des modules, vous décidez pour faciliter la manoeuvre de mettre un curseur classique sous forme de croix (ou autre forme que vous retrouverez dans cet article) dans les modules. Vous allez dans le CSS, vous rajoutez :

.box  {cursor:crosshair;}

Vous pouvez faire la même opération dans les articles

.article  {cursor:crosshair;}

dans l'entête (si votre menu s'y trouve)

#top  {cursor:crosshair;}

Le principe est extensible à l'infini ou presque. Sachant que le curseur classique se trouvant dans les modules peut être différent du curseur classique se trouvant dans les articles (comme nous le verrons plus bas).

ASSOCIER UN CURSEUR IMAGE ET UN CURSEUR DEFILANT

Supposons que vous ayez un curseur sous forme d'image dans tout le blog.

Vous l'avez placé ainsi dans le CSS :
body    {cursor:URL(http://chezpasglop.ifrance.com/cur/baguette01.cur);}

Vous désirez lui rajouter un curseur défilant sur l'ensemble du blog, vous allez rajouter en HTML de l'entête le code javascript nécessaire à cet effet.

Si vous voulez ce curseur défilant seulement sur une seule page, vous rajouterez le code javascript en HTML d'un seul article. Sachant que dans un autre article, vous pourrez rajouter un autre code javascript pour un autre curseur.

Pour voir un exemple (ICI) et trouver des codes (ICI). Ces curseurs défilants, je vous le rappelle, ne se voient que sous IE et ne sont pas utilisables par les blogs en confiance.

ASSOCIER UN CURSEUR CLASSIQUE ET UN CURSEUR DEFILANT

Le principe est le même que ci-dessus.

Supposons que vous ayez un curseur classique dans tout le blog.

Vous l'avez placé ainsi dans le CSS :
body    { cursor:crosshair;  }

Vous désirez lui rajouter un curseur défilant sur l'ensemble du blog, vous allez rajouter en HTML de l'entête le code javascript.

Si vous ne voulez ce curseur défilant que sur une seule page, vous rajouterez le code javascript en HTML d'un seul article. Sachant que dans un autre article, vous pourrez rajouter un autre code javascript pour un autre curseur.

ASSOCIER 2 CURSEURS CLASSIQUES

Supposons que vous ayez un curseur classique dans tout le blog.

Vous l'avez placé ainsi dans le CSS :
body    { cursor:crosshair;  }

Vous constatez qu'il rend difficile le clic sur les liens des modules, vous décidez alors pour faciliter la manoeuvre de mettre un curseur classique sous forme de main (ou autre forme que vous retrouverez dans cet article) dans les modules. Vous allez dans le CSS, vous rajoutez :

.box  {cursor:hand; }

Vous pouvez faire la même opération dans les articles

.article  {cursor:hand; }

dans l'entête (si votre menu s'y trouve)

#top  {cursor:hand; }

ASSOCIER 2 CURSEURS IMAGES

Supposons que vous ayez un curseur sous forme d'image dans tout le blog. Il se nomme IMAGE1.cur

Vous l'avez placé ainsi dans le CSS :
body    { cursor:URL(http://IMAGE1.cur); }

Vous désirez mettre un autre curseur dans les modules. Vous rajoutez dans le CSS :

.box  { cursor:URL(http://IMAGE2.cur); }

Vous pouvez faire la même opération dans les articles

.article  {cursor:URL(http://IMAGE3.cur);  }

dans l'entête 

#top  {cursor:URL(http://IMAGE4.cur);  }

2 CURSEURS IMAGES DIFFERENTS EN ACCUEIL ET ARTICLE

Cette fois-ci, nous allons utiliser les 2 CSS Accueil et Article. Il faut donc être passé en Mode Avancé.

Dans le CSS Accueil, il faut compléter :

body    { cursor:URL(http://IMAGE1.cur); }

Dans le CSS Article :

body    { cursor:URL(http://IMAGE2.cur); }

Sachant que le curseur peut être un curseur classique aussi et que dans chaque CSS, vous pouvez mettre à nouveau plusieurs curseurs différents dans les modules, articles, entête....

Vous reprenez l'explication de le CSS en question comme pour un ascenseur dans un article

2 pièges à éviter :

1)  il faudra sans doute prendre une largeur inférieure sinon votre module va élargir la colonne.

Rappel : width est la largeur

height est la hauteur

2) vous pouvez trouver que l'ascenseur empiète sur le titre du module

vous rajoutez alors MARGIN-TOP: 30px;

Un exemple :

Les lignes sont des images comme les autres : seules leurs dimensions diffèrent. Elles sont généralement utilisées comme transition : à la fin des articles, des modules ...

OU LES TROUVER ?

Sur le site QUIGIF, on peut trouver quelques lignes originales telles que

D'autres sites :

GLOUBIWEB

LADY LONY : des lignes très féminines

COMMENT LES INSTALLER ?

Après les avoir sauvegardé sur son disque dur (clic droit de la souris), soit :

• on les importe sur Overblog directement (comment ?),

• on les héberge ailleurs (comment ?) : préférable si elles sont animées.