Comment faire un lien sur une image positionné par le css ?

[pat734]

Bonsoir,
Est il possible de faire un lien avec une image qui est en relation avec le fichier css ?

Code htm :
<div id="imageanglais"></div>

Code css :

#imageanglais {
width: 20px;
height: 10px;
left: 2px;
background-image: url(images/anglais.jpg);
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
position: absolute;
top: 380px;
left: 753px;
}

Merci par avance pour votre aide.

 

[Anonyme]

Si c'est une image qui délivre une information, tu ne dois pas l'utiliser avec css mais bien directement dans le code html. Du genre :

<img src="images/anglais.png" alt="Ce site en anglais" />

Et là tu met le lien dessus. Si l'utilisateur a désactivé les images dans son navigateur, il aura le texte contenu dans le alt. Les personnes aveugles avec un lecteur d'écran auront aussi l'information.

Plus d'infos sur l'utilisation de alt avec les images…

 

[momo-fr]

Gloup Gloup, ça peut être un bouton avec un rollover CSS (par déplacement dans l'image par ex.), bref, pour ton image Pat, ajoute l'attribut :

display:block;

pour forcer la "boîte" css.

 

[pat734]

Gloup Gloup, ça peut être un bouton avec un rollover CSS (par déplacement dans l'image par ex.), bref, pour ton image Pat, ajoute l'attribut :

display:block;

pour forcer la "boîte" css.

Bonjour,
display:block; je le mets dans le css mais dans le code htm <div id="imageanglais"></div> que faut il mettre ?
Ce code et ou si c'est celui la ?
<a href="url du site" alt="Bienvenue sur le site"></a>

 

[Anonyme]

Gloup Gloup, ça peut être un bouton avec un rollover CSS (par déplacement dans l'image par ex.), bref, pour ton image Pat, ajoute l'attribut :

display:block;

pour forcer la "boîte" css.

Moi j'ai compris qu'il voulait mettre un lien sur le div qui a une image de fond en css… Mais maintenant je ne sais plus…

 

[Benjamin D.C.]

Moi j'ai compris qu'il voulait mettre un lien sur le div qui a une image de fond en css… Mais maintenant je ne sais plus…

C'est ce que j'ai compris également&#8230;
Peux-tu être plus précis sur le résultat attendu, pat734?

 

[momo-fr]

Bon, reprenons, tu utilises une div avec une image en backgroung, tu veux un lien dans ta div ?

Ta div reste comme elle-est, par contre tu définis un lien a pour ta div qui possède les hauteur/largeur convenues + un display block sur le lien pour forcer sa boîte CSS.

Mais finalement ça me semble tiré par les cheveux, si vraiment c'est ton seul lien dans toute la div tu peux la laisser tomber pour un seul lien a avec ses spécificités et display block pour sa forme.

Il semble que ce soit un drapeau anglais pour un navigation multilangue ?

Je prend un lien générique adossé à une classe ou à son parent (le plus sémantique en fait) et tu définis les attributs de ce lien (format, marge, etc...), puis tu créés les classes de langues (fr, eng, etc...) et tu définis tes liens genre <a class="lien_bandeau fr" href="ton lien" title... etc></a>. Positionnement absolu ou non, en float, bref comme tu le sens.

Mais on peut faire autrement c'est vrai...

 

[pat734]

Bonsoir à tous,
Je n'ai pas pris le temps de vous répondre car j'étais en vacances.
Ce que je souhaite c'est mettre un lien dans le div dont l'image est dans le css.

L'image que je souhaite utiliser est mon drapeau Anglais comme l'a bien compris momo-fr qui m'avais lui même (je crois) conseillé de faire du css pour mes images. Donc pas de problème pour mes images en css mais en arrivant sur une image ayant besoin d'un lien, là je ne sais pas le faire.
Je vais donc lire avec attention le message de momo-fr.
Bonne soirée

 

[Benjamin D.C.]

Ce que je souhaite c'est mettre un lien dans le div dont l'image est dans le css.

À priori, c'est une erreur. Relis la réponse de gloup gloup à ce sujet.

 

[momo-fr]

À priori, c'est une erreur. Relis la réponse de gloup gloup à ce sujet.

Relis ce que demande Pat : c'est une image pour un bouton de navigation (version anglaise ici), je propose une image en CSS si en plus tu veux un hover personnalisé, on peut bien sûr faire autrement.

En cas de bouton minuscule avec des fichiers .gif de 300 octets pas de souci en version "dur", tout ceci est anecdotique car il ne s'agit pas d'une image illustratrice ou explicative, juste un bête lien habillé.

 

[Benjamin D.C.]

Relis ce que demande Pat : c'est une image pour un bouton de navigation (version anglaise ici)

Hé bien oui, justement, c'est un contenu, pas juste une image de fond pour habiller le contenu.
Donc, on devra faire quelque chose comme ceci:

<a href="#">
<img alt="Version anglaise" src="en.png" />
</a>

En cas de bouton minuscule avec des fichiers .gif de 300 octets pas de souci en version "dur", tout ceci est anecdotique car il ne s'agit pas d'une image illustratrice ou explicative, juste un bête lien habillé.

Je ne vois pas trop où tu veux en venir.
Quel est le rapport avec le poids d'une image? Le fichier devra de toute manière être téléchargé, qu'il soit en dur dans le marquage HTML ou dans ta feuille de styles.

 

[fredmac75]

salut, je m'incruste...

l'une des solution, qui n'est peut être pas la plus orthodoxe ni la plus élégante (pas taper) est de placer un gif transparent de la taille de l'image utilisée pour le background. Ce faisant, tu disposes d'un élément sur lequel appliquer ton lien.


Ceci dis j'ai pas bien compris la question

 

[Niconemo]

Une autre solution (pour que ça soit complet au niveau des différentes possibilités), c'est de mettre un texte en lien ("version anglaise") et le drapeau en background du lien et, par un procédé CSS (il y a plusieurs façons de le faire) de masquer le texte.

C'est correct sémantiquement et 100 % accessible (mais on peut faire quelque chose d'approchant avec <img> et l'attribut "alt"> ce qui est plus simple quand-même).

 

[pat734]

Bonjour.
Merci à vous tous de vous être penché sur le problème. J'ai fait mon lien par une image simplement.
Encore merci et bonne journée

 

[p4bl0]

Bonjour.
Merci à vous tous de vous être penché sur le problème. J'ai fait mon lien par une image simplement.
Encore merci et bonne journée

n'oublie pas l'attribut alt quand même, et ce que tu as fait et la meilleur solution

 

[Benjamin D.C.]

Une autre solution (pour que ça soit complet au niveau des différentes possibilités), c'est de mettre un texte en lien ("version anglaise") et le drapeau en background du lien et, par un procédé CSS (il y a plusieurs façons de le faire) de masquer le texte.

C'est correct sémantiquement et 100 % accessible

Justement, non, ce n'est pas 100% accessible. Essaye avec ta méthode de désactiver les images (mais pas les styles), tu as une perte totale de l'information. Rares sont les techniques de remplacement d'images accessibles, crossbrowsers et simples à mettre en œuvre.

On peut également poser la question du "à qui ça profite"? Pourquoi vouloir se passer d'une image et son attribut alt qui sont (1) faits pour ça et (2) robustes et fiables dans tous les cas de figures?

Bref, les images en dur, c'est bon, mangez-en!

 

[Niconemo]

Justement, non, ce n'est pas 100% accessible. Essaye avec ta méthode de désactiver les images (mais pas les styles), tu as une perte totale de l'information.

Dans quel but précisément ? Je veux dire dans quel contexte cela peut-il nuire à l'accessibilité ? et dans quel contexte masquerait-on les images sans toucher aux feuilles de style ?

(même si globalement je suis d'accord avec toi sur le fait que les img, avec la balise alt, sont plus appropriées dans pratiquement tous les cas... C'est juste pour ouvrir la discussion)

 

[Benjamin D.C.]

Dans quel but précisément ? Je veux dire dans quel contexte cela peut-il nuire à l'accessibilité ?

Hé bien si je n'ai pas accès à une information, ce contenu me devient inaccessible.

et dans quel contexte masquerait-on les images sans toucher aux feuilles de style ?

Dans tous les cas où je souhaite accélérer ma vitesse de surf tout en gardant une mise en page un peu correcte.

 

[Niconemo]

Dans tous les cas où je souhaite accélérer ma vitesse de surf tout en gardant une mise en page un peu correcte.

Et ça marche ça ? Les sites qui sont lourds au point de limiter la navigation (sites amateurs en tableaux, etc.) ont peu dans chances d'être navigables sans les images... (en tout cas pour ce qui est de ma propre expérience). Et pour les autres je suis curieux de voir ce que tu appelles une mise en page "un peu correcte" sans les images Ça m' arrive souvent d'afficher un site sans CSS pour le rendre plus lisible, sans CSS et sans images parfois, mais sans images et avec CSS... je vais tester pour voir mais je suis un peu dubitatif, je l'avoue).

 

[Benjamin D.C.]

Et ça marche ça ? Les sites qui sont lourds au point de limiter la navigation (sites amateurs en tableaux, etc.) ont peu dans chances d'être navigables sans les images... (en tout cas pour ce qui est de ma propre expérience). Et pour les autres je suis curieux de voir ce que tu appelles une mise en page "un peu correcte" sans les images Ça m' arrive souvent d'afficher un site sans CSS pour le rendre plus lisible, sans CSS et sans images parfois, mais sans images et avec CSS... je vais tester pour voir mais je suis un peu dubitatif, je l'avoue).

Ce n'est certes pas une utilisation fréquente, mais ça arrive, et un peu plus fréquemment qu'on ne le pense amha.

Donc, en restant pragmatique: pourquoi vouloir limiter même d'un peu l'accessibilité d'un site en utilisant une technique plus complexe à mettre en place et qui n'apporte finalement rien de plus à l'utilisateur?