16 février 2008
6
16
/02
/février
/2008
09:43
(Samedi matin : marché !)
Sur la blogosphère, les images et les photos prennent de plus en plus d'importance. Voici quelques petits trucs pour vous amuser un peu avec vos images.
Sur la blogosphère, les images et les photos prennent de plus en plus d'importance. Voici quelques petits trucs pour vous amuser un peu avec vos images.
Faire un lien sur une image.
Lorsque vous rédigez un article, il est possible d'insérer un lien sur une image, de la même façon que sur du texte :
- Insérez une image.
- Cliquez sur l'image afin qu'elle soit sélectionnée (des petits carrés blancs apparaîssent autour)
- Cliquez sur le bouton en forme de chaînette, indiquez l'adresse vers laquelle vous souhaitez rediriger et validez.
Par exemple ici, je vous renvoie vers ma page d'accueil :
- Insérez une image.
- Cliquez sur l'image afin qu'elle soit sélectionnée (des petits carrés blancs apparaîssent autour)
- Cliquez sur le bouton en forme de chaînette, indiquez l'adresse vers laquelle vous souhaitez rediriger et validez.
Par exemple ici, je vous renvoie vers ma page d'accueil :
Si vous souhaitez que le lien ouvre une nouvelle fenêtre, avant de valider, allez sur l'onglet "destination" et choisissez "nouvelle fenêtre". Ca permet à vos lecteurs de ne pas perdre la lecture de votre blog pendant qu'ils consultent une page que vous leur conseillez, bien pratique...
Exemple, faites un ti tour chez ma copine Diane et son chien Nono (t'as vu poulette comment je fais ta promo ?!)
Exemple, faites un ti tour chez ma copine Diane et son chien Nono (t'as vu poulette comment je fais ta promo ?!)
Agrandir une image d'un simple clic
Le principe est le même : vous insérez une image dans votre article et vous créez dessus un lien vers une page où est hébergée l'image en plus grand.
Over blog ne permet pas d'héberger des images de grande taille alors que parfois on aurait bien envie de montrer de belles grandes photos à nos lecteurs... La solution ? recourir à un hébergeur d'images extérieur. Il en existe beaucoup, il suffit de s'inscrire (gratuit) et de charger sur le site les images dont on a besoin.
J'utilise Archive-host (qui permet d'héberger des images, mais aussi des fichier audios et tous autres formats), mais il en existe d'autre :
Hiboôx
Casimages
...
Une fois inscrit, voici la marche à suivre : (je vous conseille d'ouvrir 2 onglets ou 2 fenêtres de navigation, pour travailler à la fois sur Over blog et sur votre hébergeur d'images)
1/ Chargez chez votre hébergeur l'image que vous souhaitez afficher en grand. (Sur Archive-Host allez sur Mes images -> Ajouter des Images dans ce répertoire, puis sélectionnez la ou les images que vous souhaitez charger.)
2/ Sur Over blog, dans l'article que vous rédigez, insérez l'image (de petite taille), comme vous le faites d'habitude.
3/ Cliquez sur cette petite image pour la sélectionner, et cliquez sur l'icône d'insersion de lien.
4/ Sur votre hébergeur d'image, récupérez l'adresse de votre grande image. Sur Archive-Host, allez dans Mes images -> symbole "i" sous l'image qui vous intéresse, s'affichent alors un certain nombre de liens, prenez le premier, "Absolu (Original)". Sélectionnez-le, clic droit, copier.
5/ Collez ensuite cette adresse sur Over blog, dans la fenêtre d'insersion de lien que vous avez ouverte. Allez sur l'onglet "destination" et choisissez "nouvelle fenêtre" ou "fenêtre popup"(pas obligatoire bien sûr, mais je vous le conseille). Validez.
Exemple : vous voulez voir mes doigts de plus près ? allez-y, ne soyez pas timides !
Over blog ne permet pas d'héberger des images de grande taille alors que parfois on aurait bien envie de montrer de belles grandes photos à nos lecteurs... La solution ? recourir à un hébergeur d'images extérieur. Il en existe beaucoup, il suffit de s'inscrire (gratuit) et de charger sur le site les images dont on a besoin.
J'utilise Archive-host (qui permet d'héberger des images, mais aussi des fichier audios et tous autres formats), mais il en existe d'autre :
Hiboôx
Casimages
...
Une fois inscrit, voici la marche à suivre : (je vous conseille d'ouvrir 2 onglets ou 2 fenêtres de navigation, pour travailler à la fois sur Over blog et sur votre hébergeur d'images)
1/ Chargez chez votre hébergeur l'image que vous souhaitez afficher en grand. (Sur Archive-Host allez sur Mes images -> Ajouter des Images dans ce répertoire, puis sélectionnez la ou les images que vous souhaitez charger.)
2/ Sur Over blog, dans l'article que vous rédigez, insérez l'image (de petite taille), comme vous le faites d'habitude.
3/ Cliquez sur cette petite image pour la sélectionner, et cliquez sur l'icône d'insersion de lien.
4/ Sur votre hébergeur d'image, récupérez l'adresse de votre grande image. Sur Archive-Host, allez dans Mes images -> symbole "i" sous l'image qui vous intéresse, s'affichent alors un certain nombre de liens, prenez le premier, "Absolu (Original)". Sélectionnez-le, clic droit, copier.
5/ Collez ensuite cette adresse sur Over blog, dans la fenêtre d'insersion de lien que vous avez ouverte. Allez sur l'onglet "destination" et choisissez "nouvelle fenêtre" ou "fenêtre popup"(pas obligatoire bien sûr, mais je vous le conseille). Validez.
Exemple : vous voulez voir mes doigts de plus près ? allez-y, ne soyez pas timides !
Afficher une image qui se transforme en une autre image au passage de la souris.
Ici, le principe est le même que ce que je vous ai expliqué pour les boutons de blog, sauf qu'on ne mettra pas de lien sur l'image.
Commencez par télécharger sur Over blog les 2 images que vous souhaitez utiliser.
Il faut ensuite passer en mode source (cliquer sur "Accéder aux fonctions avancées" en haut de l'article que vous rédigez -> "Editer la source".)
Il va vous falloir coller le code suivant dans le CSS :
<img alt="" onmouseover="this.src=' adresse de l'image que vous souhaitez afficher au passage de la souris '" onmouseout="this.src=' adresse de l'image que vous souhaitez afficher lorsque la souris n'est pas dessus '" src=" adresse de l'image que vous souhaitez afficher lorsque la souris n'est pas dessus " />
Repérez l'endroit où vous souhaitez placer votre image. C'est sans doute le plus compliqué lorsqu'on n'est pas habitué au CSS... Le plus simple est donc de passer en mode source lorsque dans votre article, vous arrivez à l'endroit où vous souhaitez placer votre image. Il vous suffira donc d'insérer le code tout en bas.
N'oubliez pas de remplacer les champs en rouge et en bleu par les adresses de vos images (pour les obtenir, Documents -> Images et Albums photos -> cliquez sur la loupe placée sous l'image qui vous intéresse, l'adresse est indiquée en haut de la fenêtre qui s'ouvre)
Vous pouvez revenir à votre article en recliquant sur "Editer la source", et continuer à travailler dessus normalement.
Petit exemple, mon bureau avant/après pose du tissus au mur (et surtout rangement) :
<img alt="" onmouseover="this.src=' adresse de l'image que vous souhaitez afficher au passage de la souris '" onmouseout="this.src=' adresse de l'image que vous souhaitez afficher lorsque la souris n'est pas dessus '" src=" adresse de l'image que vous souhaitez afficher lorsque la souris n'est pas dessus " />
Repérez l'endroit où vous souhaitez placer votre image. C'est sans doute le plus compliqué lorsqu'on n'est pas habitué au CSS... Le plus simple est donc de passer en mode source lorsque dans votre article, vous arrivez à l'endroit où vous souhaitez placer votre image. Il vous suffira donc d'insérer le code tout en bas.
N'oubliez pas de remplacer les champs en rouge et en bleu par les adresses de vos images (pour les obtenir, Documents -> Images et Albums photos -> cliquez sur la loupe placée sous l'image qui vous intéresse, l'adresse est indiquée en haut de la fenêtre qui s'ouvre)
Vous pouvez revenir à votre article en recliquant sur "Editer la source", et continuer à travailler dessus normalement.
Petit exemple, mon bureau avant/après pose du tissus au mur (et surtout rangement) :
Si vous voulez en apprendre encore plus, je vous conseille un petit tour sur le blog d'Annak, plein de conseils précieux, et plus particulièrement ici et là !
Amusez-vous bien !!!
Autres articles déco-blog :
- les boutons
Partager cet article
