C'est bien moi, ça ! Après avoir parlé tricot, chaussettes et tour du monde, me voilà parlant de mon autre dada favori : le codage.

C'est mon premier tuto sur overblog, même si j'admets très volontiers que je n'ai fait qu'améliorer le code trouvé sur la Toile pour l'adapter à mon blog et l'utiliser dans les modules et les articles.

Chaque fois que je le peux, j'évite de coder avec du javascript et tente de m'en sortir en Html et CSS, (puisqu'en php, overblog n'en permet l'utilisation).

Donc, comment agrandir une image uniquement en html et css ????

L'avantage est énorme : pas besoin de collectionner deux images différentes dans ses dossiers, pas besoin non plus d'aller chercher un logiciel spécial ou d'utiliser les services d'un autre site.

On se débrouille tout seul !

Et, comme pour mon cas, mes connaissances sont complétement autodidactes, me débrouiller je sais ! Certains vont peut être dire que je bidouille, tant pis, j'assume !

Précision, je tente d'adresser ce tuto à tout le monde et je peux donc paraitre trop primaire pour ceux qui ont l'habitude de coder... Mais je pense qu'ils liront en diagonale... pour comprendre.

Ah, encore une précision ... Comme on travaille sur overblog, il est nécessaire d'enregistrer pour avoir le résultat, c'est à dire que l'on doit, si on veut travailler dans un article, envoyer l'article pour essayer. Alors, (merci Anna K. qui m'en a donné l'idée), le mieux est de travailler sur un article en l'enregistrant à une date très très antérieure... pratiquement en indiquant une date avant la création de votre blog... comme ça, beaucoup moins de personnes risquent de "tomber dessus"... Quoique ... ???

Je présente deux façons de la faire :

A. sur une série d'images, agrandissement de l'image au survol de la souris

- mon module images des jours

- ma page images des jours

B. une image unique, son agrandissement au survol de la souris. 

- mon article : Les chaussettes du tour noir.

Mon point de départ est l'excellent exemple de "rad2". Mais comme je trouvais que sa forme de présentation ne me convenait pas, je l'ai améliorée pour l'utiliser autrement.

Pour commencer :

Vocabulaire utilisé :

La galerie est l'espace de présentation.

Le timbre est la miniature de l'image

L'image est celle enregistrée dans le dossier image correspond au classement que vous avez fait ou non et sa taille est connue quand on clique sur le petit "i" de l'image dans l'espace administration du blog, onglet "documents" puis 'images".

Pour des informations sur les images de vos documents, voir l'aide d'overblog.

Bien, maintenant que tout est posé (sauf ce que j'aurais oublié), parlons chiffon :

1. Il faut aller dans son administration de blog et cliquer sur "Design"

2. Ensuite, cliquez sur "Mode CSS,

3. Puis cliquez sur "Mon style", soit pour "Articles", soit pour "Accueil", soit pour "Pages". De toute façon, on ne peut pas travailler les trois à la fois, alors faut bien commener par l'un ! Vous recopierez ensuite sur les autres pages CSS si nécessaire.

4. Copiez le code suivant à la fin des autres codages ou copier ici (il faudra au besoin ajouter "height" dans #galerie)

/*-----------------------Galerie-------------------------*/
#galerie {

position: relative;

width: 350px;

height:820px;}

#timbre {

width: 400px;

float: left;}

#timbre a {

display: block;

float: right;
margin: 0 0 5px 5px;
width: 50px;
height: 50px;}

#timbre a img { 

width: 50px;
height: 50px;
border: 0;}
#timbre a:hover {
border-color: #ac9a79;}

#timbre a:hover img { 

position: absolute;
width: auto;
height: auto;
left: 5px;
top: 250px;

border: 1px solid #ac9a79;}

5. Ensuite, ouvrez la page ou l'article ou le module dans lequel vous voulez placer une galerie ou une image à agrandir

6. Passez en mode html et copiez

 <div id="galerie">
      <em id="timbre">
        <a href="#nogo">
          <img src="images/image1.jpg" title="" alt=""></a>
      </em>
    </div>

7. Copiez le nombre fois "<a href="#nogo"> <img src="images/image1.jpg" title="" alt=""></a>" que vous voulez de timbres.

8. Allez chercher les adresses de vos images que vous voulez présenter.

Pour trouver l'adresse d'une image, il faut simplement cliquer sur l'image dans votre dossier image et copier l'adresse qui s'affiche (une adresse net commence pratiquement toujours par http://)

9. Remplacez "images/image1.jpg" par votre adresse d'image et cette opération autant de fois que vous voulez de timbres, entre  <em id="timbre"> et   </em>

Pour continuer, il faut mettre la main dans le cambouis des CSS ! C'est la partie la plus énervante, la plus palpitante du codage ! 

On commence par le plus facile...

10. Ne touchez pas à ces paramètres (bien sur, rien d'interdit, mais bon... pas besoin de changer ce qui fonctionne) :

#galerie : position: relative;

#timbre : float: left;

#timbre a : display: block;     float: right;     

#timbre a:hover img :   position: absolute;     width: auto;    height: auto;

11. Les marges

Je n'ai pas modifié les marges, mais là, vous pouvez faire comme vous voulez...

margin: 0 0 5px 5px;   

J'ai trouvé que 5px en bas et 5px à gauche était parfait !

Les 0 et 0, ce sont les marges en haut et à droite. On peut les préciser si on veut ...

12. les bordures

"border-color: #ac9a79;" du bloc " #timbre a img" et "border: 1px solid #ac9a79;", faites comme vous voulez. Les couleurs qui sont indiquées, sont les couleurs de mon blog. Vous trouverez ici, un excellent site qui permet de connaitre les codes hexa et vous pouvez connaitre les couleurs de votre blog dans les CSS justement... 

Passons à ce que j'ai modifié et qui me permet de faire le tuto ! 

13. les noms

Vous pouvez modifier bien sur les noms de "galerie" et de "timbre", surtout si vous utilisez plusieurs fois le même code pour différentes photos ou différentes galeries.

Au début quand je codais, je trouvais cela amusant de mettre les noms que je voulais Quand on est une sentimentale, on ne se refait pas, isn't ? Donc j'y allais du "nounours", "trucmuche" et "tartempion"... Et, puis je me suis rendue à l'évidence, nommer permet de catégoriser, et catégoriser c'est ranger et ce qui est bien rangé, se retrouve.

Donc, mes noms à moi, maintenant pour mes CSS d'overblog sont "galerie-module", "garlerie-page" et galerie-chaussettes !!!! Et les timbres prennent les mêmes noms !

Jusque là, c'est facile !!!

Ensuite, il faut suivre mon raisonnement pour l'adapter à ce que vous voulez en faire ...

14. les largeurs (en code, c'est width)

Le timbre est l'image qui apparait quand on ne survole pas avec la souris. On disitngue la largeur du timbre (la petite image) et la largeur de la galerie (l'espace réservé à la présentation).

14.1. les largeurs du "timbre"

14.1.1. Dans le cas de mes galeries sur ma page et dans mon module, mon timbre est de 50px.

14.1.2. Dans le cas de mon image dans l'article des chaussettes, mon timbre est de 150px

14.2. Les largeurs de la "galerie"

14.2.1.Quand l'espace "galerie" contient plusieurs timbres et que l'image apparaitra en dessous des timbres au survol de la souris,  on additionne les largeurs de timbres + les marges

Ici 7 timbres à 50px + 7 marges à 5px = 385px;... Ce qui fait qu'une galerie à 400 px, ce sera très bien.

14.2.2. Quand l'espace "galerie" contient plusieurs timbres et que l'image apparaitra à droite des timbres au survol de la souris,  on additionne les largeurs de timbres + les marges + la largeur de l'image qui apparaitra.

Ici 2 timbres à 50 px + 2 marges + l'image qui apparait au survol de la souris 200px = 310px;. Ce qui fait qu'une galerie à 350px est très bien ...

14.2.3. Quand l'espace "galerie" ne contient que la seule image que l'on veut agrandir, c'est hyper simple, on additionne la largeur de l'image (pas du timbre, mais celle qui est donnée dans notre dossier image) + les marges

Ici, j'ai une image qui fait 600px + 5px de marge = 605px. Je mets 610px pour être à l'aise.

J'aime bien en mettre plus, des fois qu'il en manquerait !!!

15. les hauteurs (en code, c'est height)

On distingue également la hauteur du timbre quand on veut placer l'image à droite de la ligne de  timbres (cas de mon module "images des jours") et la hauteur quand on veut placer l'image en dessous de la colonne de timbres (cas de ma galerie dans ma page "images des jours") et la hauteur de la galerie (cas de mon article sur les chaussettes).

15.1. Les hauteurs du timbre

15.1.1.  Dans le cas de mes galeries sur ma page et dans mon module, comme je ne voulais pas m'empatouitter plus que nécessaire, tous mes timbres sont carrés. Donc la hauteur chez moi est de 50px; comme la largeur.  

15.1.2. Dans le cas de mon image dans l'article des chaussettes, mon timbre est de 150px. Même principe, quand je peux faire simple, je le fais ! 

15.2. La hauteur de la galerie

15.2.1. Quand l'espace "galerie" contient plusieurs timbres et que l'image apparaitra en dessous des timbres au survol de la souris, on additionne la hauteur de tous les timbres en colonne + les marges + la hauteur de l'image qui apparait au survol de la souris.

Ici, 4 timbres à 50px + 4 marges à 5px + une image à 600px = 820px;

15.2.2. Quand l'espace "galerie" contient plusieurs timbres et que l'image apparaitra à droite des timbres au survol de la souris,  on peut ne rien mettre du tout !!! L'espace sera automatiquement la hauteur la plus grande : celle des colonnes de timbres... 

Ouf ! c'est simple, ça au moins !

15.2.3. Quand l'espace "galerie" ne contient que la seule image que l'on veut agrandir, on peut ne mettre que la hauteur de l'image, mais comme je ne sais pas donner juste juste ce qu'il faut et qu'il faut toujours que j'en rajoute au cas où il y aurait des images qui auraient plus faim que d'autres... j'ai additionné la hauteur et une marge.

Ici, donc 600 px + 20px de marge = 620px;

16. La position de l'image

Voilà, on a vu la largeur, la hauteur des timbres, de la galerie, mais quid de la position ? C'est à dire, où va-t-on mettre l'image non Didiou  ???? 

Si je la veux dessous, dessus, à droite, à gauche, faut bien le dire, parce que le code est plus bête que bête. Ce qui n'est pas dit, il ne le devine pas et quand il ne devine pas, le code exécute le n'importe quoi... d'où les surprises, les crises de nerf, les nuits blanches et j'en passe..

Allez, mais c'est en forgeant que l'on devient forgeron...

Mais patience ... c'est hyper simple encore ... heu... enfin facile, quoi, surtout si vous en êtes à cet endroit de l'article, j'augure bien de la réussite.

Et vous pouvez vous dire :si l'autre a réussi, alors pourquoi pas moi ?

C'est évidemment dans #timbre a:hover img que l'on va préciser le "left" et le "top".

Là, vraiment vous faites comme bon vous semble.

Left, c'est à gauche de la page ou de l'article ou du module, donc par rapport à l'emplacement de la galerie.

Moi je mets 5px; toujours en vertu de ma crainte qu'il manque quelque chose à quelqu'un...

Top, cela dépend bien sur si l'image doit apparaitre en dessous des timbres ou à droite.

16.1. L'image en dessous des timbres.

Je mets 100px; pour que l'image apparaisse sous 2 lignes de timbres au moins.

Mais attention !!!

Il ne faut pas que top + hauteur d'image soit supérieur à hauteur de galerie !!! Sinon, l'image ne sera pas entière...

16.2. L'image à droite des timbres

Là hyper facile, c'est une histoire de marge. Si vous mettez 0px; l'image sera sur la même ligne que la première ligne des timbres... Donc, pareil que 4.1, pas de hauteur de position plus haute que la galerie !!

17. Essai

Maintenant, lancez votre travail (aps trop loin, juste sur la Toile!).. Comme on est sur une interface, c'est à dire sur overblog, la seule façon de tester que je connaisse est de "lancer" la page ou l'article en ligne pour voir...(d'où l'idée d'aller l'enregistrer du temps où le net n'existait pas... ah ? ce fut le cas ?)

Voilà ... Je ne demande que d'améliorer ce tuto et c'est grâce à vous que je pourrais le faire. Alors n'hésitez pas !

Question subsidiaire qui ne vous fera gagner que mon estime : De quelle galerie est extrait mon code css ?

- galerie module

- galeire page

- galerie article

?