1. Agrandir une photo au survol de la souris

Pour voir la démonstration, passer votre souris au dessus de l'image du pub irlandais en haut de cet article.

 
2. Comment agrandir une photo au survol de la souris

2.1 Enregistrer votre photo

* Enregistrer votre photo dans votre administration (ou sur un site de sauvegarde et noter son adresse URL), à un format "grand".

Inutile de dépasser les 600 pixels de large, nettement suffisant pour un article.

* Enregistrer la même photo à un format petit. Classiquement, le format vignette fait 75 x 100 pixels et noter son adresse URL.

 
2.2 Code HTML pour agrandir la photo au survol de la souris

Aller en mode HTML (en édition avancée) et ajouter le code suivant :

<img src="http://adresse image petit.jpg"
onmouseout="javascript:this.src='http://adresse image petit.jpg'"
onmouseover="javascript:this.src='http://adresse image grand.jpg'" class="CtreTexte" />

avec l'adresse url de l'image en format "petit" aux 2 premières lignes, et l'adresse de la grande image pour "OnmouseOver".
 

* 5 articles a lire pour demarrer votre blog * Initiation au langage HTML * Tout pour modifier et embellir vos textes * Tout savoir sur les images  * Des gadgets * Votre blog ne ressemblera pas aux autres * Mes astuces * Référencements et indexations * Index des articles

Quoi de plus sympa qu'un dessin rigolo pour inciter vos visiteurs à laisser des commentaires.

C'est chez Save Our Blogs qu'on le trouve, en version fond blanc ou fond noir.

On trouve plusieurs "monstres", tous plus "effrayanys" les uns que les autres !

 


                 Il est pas mignon ?


Son code à recopier en mode avancé (HTML) :

<a href="http://www.saveourblogs.blogspot.com"><img src="http://farm3.static.flickr.com/2066/2150615931_19d0987b9e_o.jpg" /></a>

* 5 articles a lire pour demarrer votre blog * Initiation au langage HTML * Tout pour modifier et embellir vos textes * Tout savoir sur les images  * Des gadgets * Votre blog ne ressemblera pas aux autres * Mes astuces * Référencements et indexations * Index des articles

 
Avoir une jolie bannière est important pour décorer votre blog : Elle est visible sur toutes les pages, et est donc l'identité de votre site. Vous reconnaissez ci-dessus ma bannière actuelle : elle reprend les couleurs de mon site, les images sont en rapport avec ce qu'on trouve, et un texte synthètise le pourquoi du site.


La bannière doit être le reflet de votre blog, elle devra être :

   * En rapport avec le thème du blog,

   * Cohérente avec le look du blog,

   * Synthétique, pas trop chargée, mais facilement reconnaissable.

 

1. Une galleries de bannières photo

Vous en trouverez beaucoup chez FreeWebPageHeaders :

Ce sont des photos qui sont gratuites, jolies et triées par thème.

Par ailleurs, elles sont dispo en grande taille (800 x 200), et en haute définition.

Vous avez aussi de jolis fonds à utiliser en bannière chez cerisette !


1.1 Quelques exemples de photos bannières:










2. Utiliser une de ces photos comme bannière :

Pour les récupérer, un clic droit puis "enregistrer sous" vers votre ordinateur.

Ensuite, il ne reste plus qu'à la placer dans votre en-tête de blog.


2.1 Les blogs chez Over-blog

Chez Over-blog, il faut aller dans "Configuration/Mise en page" puis insérer la photo dans le module "Texte libre" en haut.

A lire l'article pour insérer une photo sur votre blog : Mettre une image dans vos articles


3. Un dernier conseil sur les bannières :

Beaucoup de sites proposent d'ajouter de l'animation à vos bannières, à partir de fond disponibles, ou bien de photos à vous. Malheureusement, beaucoup réduisent la taille et la qualité de l'image et vous obtenez une bannière, certe animée, mais de qualité médiocre !

Par ailleurs, sachez qu'une bannière animée réduira de beaucoup le temps de chargement de vos pages, ce qui peut irriter vos visiteurs !

A relire pour mettre des effets sur votre bannière: Transformer vos images pour qu'elles scintillent

* 5 articles a lire pour demarrer votre blog * Initiation au langage HTML * Tout pour modifier et embellir vos textes * Tout savoir sur les images  * Des gadgets * Votre blog ne ressemblera pas aux autres * Mes astuces * Référencements et indexations * Index des articles

C'est très simple de réaliser avec un diaporama avec le site Bloggif.com.

Diaporama avec vos photos

Un diaporama est un montage avec vos photos enchaînées les unes aux autres, incluant souvent un effet d'apparition entre chacune d'elles.

Cela permet de visionner plusieurs photos de façon dynamique pour le visiteur.

Comment réaliser un diaporama facilement

Vous allez sur le cite Bloggif.com.

Vous chargez vos photos à partir de votre ordinateur, bouton "Parcourir".  Si vous voulez avoir + de 3 photos, vous utilisez le bouton "Plus d'images" autant de fois que nécessaire.

Un clic sur le bouton "Télécharger".

Si le résultat vous convient, un clic sur le gros bouton rouge "Télécharger mon gif" et vous enregistrez votre diaporama sur votre ordinateur.

A voir aussi

Mettre une jolie photo comme banniere sur son blog

Agrandir une photo au clic

Faire bouger vos images

* 5 articles a lire pour demarrer votre blog * Initiation au langage HTML * Tout pour modifier et embellir vos textes * Tout savoir sur les images  * Des gadgets * Votre blog ne ressemblera pas aux autres * Mes astuces * Référencements et indexations * Index des articles

Il est habituel de faire des liens vers des pages web de son propre blog, ou d'un autre avec des textes.

Un article est consacré ici à la méthode.

Il est aussi possible de faire des liens avec une image.

 
1. L'intérêt des liens avec image

Le principal intérêt du lien avec image est de se faire remarquer par votre visiteur.

En lecture rapide, l'oeil "accroche" + les images que les textes.


1.1 Un texte qui complète l'image

 Par contre, il vous faudra absolument compléter votre image par un petit texte explicatif car une image seule est rarement suffisante pour faire comprendre à votre visiteur vers où il va être dirigé en cliquant dessus.

Ici, ce badge contient l'adresse internet d'un site. On sait donc qu'on va être redirigé dessus en cliquant.




1.2 Les possibilités pour associer texte et image

* Vous pouvez ajouter une info bulle à votre image ;
cette info bulle expliquera la nature du lien.



* Vous pouvez intégrer un texte très court dans l'image, comme ici     .

Inutile d'en rajouter, on sait tout de suite à quoi va servir ce lien !


* Vous pouvez mettre côte à côte texte et image, ou bien encore l'un en dessous de l'autre.

Imprimez cette recette

2. Faire un lien avec une image

2.1 Enregistrer votre image

Il vous faut tout d'abord faire ou trouver l'image ou la photo qui servira de lien, puis l'enregistrer dans votre administration, ou sur un site d'archivage de données.

2.2 Insertion de l'image dans l'article

Vous insérez votre image, comme d'habitude.

Si vous avez oublié, allez voir ICI comment mettre une image dans un article.

Vous pouvez noter aussi l'adresse de votre image.


2.3 Code HTML à ajouter pour lier l'image à la page web voulue.

Le code à inscrire est :

<a href="Adresse url de la page vers laquelle vous redirigez le visiteur"><img height="75" width="100" src="adresse url de l'image"  title="info bulle de votre lien" class=" DrteTexte" style="margin: 0px; border: #000 0px solid;" /></a>
 

les attributs height et width servent à redéfinir la taille de l'image si besoin

* 5 articles a lire pour demarrer votre blog * Initiation au langage HTML * Tout pour modifier et embellir vos textes * Tout savoir sur les images  * Des gadgets * Votre blog ne ressemblera pas aux autres * Mes astuces * Référencements et indexations * Index des articles