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

Trouvez les solutions à vos problèmes avec le site ici.
Auteur
Message
jujucoline
Avatar de l’utilisateur
Messages : 11271
Photos : 244
Inscription : 22 Juin 2008
Localisation : Vic-Fezensac
Contact :

#1 Message Dim 23 Juin 2013 23:42


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 :topla:

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 :glups:

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 :


Bons exercices :topla:
NEX 6, A6000, Samyang 8 f/2.8, Sony 16-50 PZ et E 55-210, Sigma 30 f/2.8, Minolta 50 et 100 macro Rokkor, Leica 90 f/2 Summicron, Elicar 200 f/3.5, etc...
"Climbing a mountain is never a waste of time."

Manus
Avatar de l’utilisateur
Messages : 31488
Photos : 535
Inscription : 14 Sep 2010
Localisation : Corbeil-Essonnes
/

#2 Message Dim 23 Juin 2013 23:51


:topla:
C'est toujours bon Ă  prendre ce genre de tuto !
Nikon D3s - 18-35/3.5-4.5G ED - 50/1.8D - 85/1.8G - 70-200/2.8G ED VR II ; Sigma 150-600/5-6.3 DG Sport
Sony A7RII - FE 16-35/4 ZA OSS - FE 24-70/4 ZA OSS - FE 70-200/4 G OSS - FE 100/2.8 STF GM OSS ; Samyang AF 45/1.8 FE - AF 75/1.8 FE
Fujifilm X100T - WCL-X100 - TCL-X100

Flickr - Mon fil perso
"kilékon ce Manus" - Papabrandy

rascal
Avatar de l’utilisateur
Site Admin
Messages : 44265
Photos : 671
Inscription : 09 Sep 2005
Localisation : Nantes ou presque...
/

#3 Message Dim 23 Juin 2013 23:58


ça me semble être la meilleure solution pour les grand format et autre HD...
The magnificients 7s ! D7, D700, D7000
Sony HX5V, Nikon 18-55VR, AFS 24-70/2.8, AI 135/3.5, AFS 200/2 VR, Sigmund 500/4,5 HSM, tokina 100 macro. Bague allonges kenko, rotule benro GH2, Benro BH1 Manfrotto 141RC, 128RC, 804RC2, tripod 190 nat, monopode 679...

zeufman
Avatar de l’utilisateur
Messages : 151
Photos : 27
Inscription : 26 Avr 2015

#4 Message Lun 11 Mai 2015 17:32


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>
Dernière édition par zeufman le Lun 11 Mai 2015 17:53, édité 1 fois.
α57 - I am SONY and i'm proud

Lionel
Avatar de l’utilisateur
Site Admin
Messages : 28871
Photos : 4472
Inscription : 27 Avr 2009
Localisation : Valais (Suisse)
/
Contact :

#5 Message Lun 11 Mai 2015 17:38


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]

mes images, matos
"Croire que ce qu'on voit est "réel" c'est un peu comme croire que le monde a disparu quand il fait noir.."
PhotonHunter 06.2016.
"je préfère voir une belle photo de pigeon qu'une moche d'aigle royal" Aguares 07.2010

Dami1
Messages : 25559
Photos : 2
Inscription : 23 Juin 2011

#6 Message Lun 11 Mai 2015 17:51


ca ne marche pas

zeufman
Avatar de l’utilisateur
Messages : 151
Photos : 27
Inscription : 26 Avr 2015

#7 Message Lun 11 Mai 2015 17:54


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

http://www.force27.com/forum/viewtopic.php?f=16&t=3727
α57 - I am SONY and i'm proud


Revenir vers « FAQ »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 5 invités