Insérer une petite image clicable vers un plus grand format

[jujucoline]

Salut à tous(tes) !

J'ai à l'occasion plusieurs fois expliqué comment insérer dans un message une petite image clicable vers la même en grand format hébergée ailleurs (Flickr, etc)... Ca se perd à chaque fois, donc voilà le tuto

On va y aller petit à petit... Dans chaque exemple, vous devrez supprimer le * inséré dans le texte : si je laisse le texte tel quel, vous ne verrez rien puisque je créerai un lien clicable, et pas un exemple lisible, je ne sais pas si vous suivez

Premier point : insérer une adresse web. Quand vous faites un copier-coller d'adresse, ça semble facile et transparent, mais en fait le forum insère automatiquement des balises pour que ça fonctionne. Ces balises ont cette forme : [*url]adresse web que vous avez collé[*/url]. (pensez à supprimer les *). Elles font un surlignage sur l'adresse et la rendent donc clicable.
Exemple : http://www.alphadxd.fr/index.php
Bien, pas compliqué, on va passer à la suite :

Second point : remplacer l'adresse web par un mot clicable. On complique un peu l'exercice : on va subtilement modifier la première balise, afin de remplacer l'affichage de l'adresse par un mot ou une phrase de votre choix, clicable vers le lien. L'adresse sera insérée à la suite de "=" dans la première balise, et le mot de votre choix entre les deux balises. Ca ressemble à ça : [*url=adresse web que vous avez collé]phrase de votre choix[*/url]. Pour notre beau forum, ça aura cette forme (en virant les * hein !) :
[*url=http://www.alphadxd.fr/index.php]Notre beau forum[*/url]. Exemple :
Notre beau forum

Troisième point : remplacer le texte clicable par une image clicable. Pour commencer, il faut savoir insérer une image dans le corps du texte. Pas sorcier : une fois que vous avez téléchargé votre image, son nom apparaît en "pièce jointe" juste en dessous de la zone dans laquelle vous écrivez. Il y a juste à côté un bouton "insérer dans la ligne". En cliquant dessus, un lien du type [*attachment=0]Nom de l'image[*/attachment] apparaît à la place de votre curseur. C'est un lien qui permet de placer votre image où vous voulez, il est numéroté à partir de "attachment=0" et croissant si vous avez plusieurs images.

Bon, vous savez placer une image (aux dimensions maxi du forum) où vous voulez, et vous savez rendre un mot ou une phrase clicable vers une adresse web externe. Bien. Nous allons tout simplement remplacer le mot par les balises "attachment" pour que l'image devienne clicable. On aura une forme comme celle-ci :
[*url=adresse web de l'image en grand format][*attachment=0]nom de votre image téléchargée sur le forum[*/attachment][*/url]



Exercice : j'ai une photo en 600 pixels sur mon DD, une photo de l'A99 que j'ai prélevée chez DPreview (hop, pub !). Chez DPreview elle est beaucoup plus grande, ça pourrait aussi être une photo à moi placée chez un hébergeur quelconque dont j'ai copié l'adresse. Donc je télécharge la photo, je clique sur "insérer dans la ligne", et je me retrouve avec mes balises "attachment" encadrant le nom de ma photo. Plus qu'à créer le fameux lien "url" clicable autour de cette "phrase", sous cette forme (sans les "*"...) :
[*url=http://www.dpreview.com/reviews/sony-alpha-slt-a99/images/Intro.jpg][*attachment=0]A99.jpg[*/attachment][*/url]

En virant les 4 *, ça donne ça :

#167103: Consulté 7785 fois

Aimé fois - dont moi Exifs

Bons exercices

[Manus]

C'est toujours bon à prendre ce genre de tuto !

[rascal]

ça me semble être la meilleure solution pour les grand format et autre HD...

[zeufman]

Bonjour

Sinon, une méthode alternative avec les balises, mélangeant balises URL et IMG
A saisir comme ceci ( l'image contenue entre les balises img est la miniature de l'image )

Code : Tout sélectionner

[url=http://www.force27.com/images/zeuf/BOS/02.jpg][img]http://www.force27.com/images/zeuf/BOS/02.jpg[/img][/url]

Sinon, la version du forum supporte les balises thumb, qui permet de mettre en lien directement une image maxi taille, qui sera affichée en miniature sur le forum. L'activation doit se faire dans l'admin du forum.

Pour info voici le texte du code HTML de remplacement html

Code : Tout sélectionner

<a href="{URL}" class="highslide" target ="_blank" onclick="return hs.expand(this, { captionId: 'caption1' } )">
<img src="{URL}" title="Cliquez pour agrandir" width="240" height="160"  /></a>
<div class='highslide-caption' id='caption1'></div>

[Lionel]

après on peut aussi mélanger texte et image. Je l'ai fait pour mes retours de matériel. Ca donne assez bien. C'est comme Jujucoline avec la partie texte en plus

[*url=http://www.alphadxd.fr/viewtopic.php?f=18&t=100086]caisson Meike nex5 40m
[*img]https://farm9.staticflickr.com/8740/17080941588_ca0edbff41_o.jpg[/img][/url]

[Dami1]

ca ne marche pas

[zeufman]

Un exemple pour les balises thumb, pour apprécier la facilité

http://www.force27.com/forum/viewtopic.php?f=16&t=3727