Ouvrir des liens externes dans une nouvelle fenêtre pb

bonjour,
je fais mon site en html et css, ce qu'il y a c'est que je mets plein de photos, alors au lieu de mettre target="_blank" et de ne pas informer le visiteur que la photo va s'ouvrir sur une autre fenetre, je veux utiliser un tuto d'alsa celui-là :http://css.alsacreations.com/Accessibilite-du-Web/liens-externes-nouvelle-fenetre
http://css.alsacreations.com/Accessibilite-du-Web/liens-externes-nouvelle-fenetre.
mais il faut placer un class="lien_ext" je sais pas où ?
après plus bas il y a des style css a.lien_ext:after {
content: "\0000a0[\2197]";
}
celui-ci par exemple que je place dans mes styles css, mais qui ne donne rien.
merci de votre aide

Bonsoir omango,

a écrit :
mais il faut placer un class="lien_ext" je sais pas où ?

Si tu as des photos qui s'ouvrent dans une nouvelle fenêtre, je suppose que tu présentes une miniature qui au clic mêne à un agrandissement ou à une autre page ?
Pour se faire tu as mis ton image dans une balise de lien, ce qui doit ressembler à quelque chose dans le genre :

<a href="http://blabla.truc" title="Si besoin">
<img alt="l'alternative textuelle qui va bien" 
src="http://nomimage.extention de l'image en question" 
width="#" height="#" />
</a>

Il suffira donc de rajouter ta classe "lien_ext" sur le(s) lien(s) (la balise a) qui ouvre(nt) une nouvelle fenêtre, pour que les styles définis s'appliquent à ce(s) lien(s) :

<a [b][#blue]class="lien_ext"[/#] [/b] href="http://blabla.truc" title="Si besoin">
<img alt="l'alternative textuelle qui va bien" 
src="http://nomimage.extention de l'image en question" 
width="#" height="#" />
</a>

Lorsque tu auras placé le code css dans ta feuille de styles, les liens ayant la classe "lien_ext" appliqueront bien tes déclarations :

a[#blue](lien)[/#][b].lien_ext[/b][#blue](ayant la classe "lien_ext")[/#]:after[#blue]
(on place après ce(s) lien(s) particulier(s))[/#]{
content: "\0000a0[\2197]"; 
[#blue](ce contenu :ie les caractères unicode blabla...)[/#]

Ou une icone en image, ou un texte explicatif comme tu as pu le lire dans ce tutoriel...

Tu auras également noté :

Le tutoriel a écrit :

NOTE : rappelons que Internet Explorer, qui n'implémente pas encore la pseudo-classe standard :after, ne va pas générer ni afficher l'icône de la flèche.

Ne t'attends donc pas à ce que cela fonctionne sur Internet Explorer
Il te faudra trouver une autre solution

En espérant avoir répondu à ta question,
Cdt,
Sylvain

merci Sylvain pour ta réponse ça marche .

une autre question, j'ai mis 30 photos, à chaque lien sur une image le "a href" je dois insérer class="lien_ext".

je pense que oui mais peux-tu me le confirmer où n'y a-t-il pas une façon de l'appliquer pour toutes mes images.

encore une fois merci.
bien à toi
omango

Bonjour,

si les 30 photos sont dans le même cas, tu peux mettre une classe ou un id sur un élément HTML parent de ces images puis les cibler en CSS avec le sélecteur:

div.nom_de_la_classe a:after {
(ce que tu avais précédemment)
}

Et si tu as une 31ème image qui NE doit PAS être ciblée ainsi, tu lui rajoutes une classe .pas_moi et en CSS tu annules ce que tu viens de faire:

div.nom_de_la_classe a.pas_moi:after {
content: ""; /* pas de content */
}

Comme il y a une classe .pas_moi en plus, c'est forcément plus spécifique donc prioritaire donc on peut l'écrire avant ou après l'autre règle (voir l'inoubliable moyen mnémotechnique in english sur la priorité des sélecteurs)

Bonjour Felipe,

Merci pour ta réponse, là il est un peu tard.
J'essayerais demain et si il n'y a pas d'autre message de ma part...
on pourra dire que j'ai réussi.


Bien à toi
omango

6l20 a écrit :
Ne t'attends donc pas à ce que cela fonctionne sur Internet Explorer

Sur IE 6-7. Fonctionnera sur IE 8.

Florent V. a écrit :

Sur IE 6-7. Fonctionnera sur IE 8.

C'est pas faux, il va falloir modifier les "réflexes d'écriture"...

Moi même (très modestement) a écrit :

<!--[if lt IE 8]> Ne t'attends pas à ce que cela fonctionne