28220 sujets

CSS et mise en forme, CSS3

[résolu] Attribut src d'une <img /> gérée en CSS

Bonjour à tous,

Voici ma problématique : Je souhaite gérer la source d'une image en CSS

Simplement pas possible d'insérer une <img /> sans attribut src. ca valide pas

j'ai essayé avec un <input type="button" /> que je controlais via l image en background mais le pb est que je ne souhaite pas utiliser de <form>. J ai essayé de placer un <a href> sur le button. ok sous FF mais sous IE le lien n ets pas pris en comtpe.

Any ideas ?

merci d avance.

Nicolas
Modifié par MemoClic (21 Sep 2005 - 20:47)
je ne suis pas sûr d'avoir compris ton problème mais peut-être que ca devrait marcher :

en html :
<a href="lien.htm" id="lien1"></a>
en css:
#lien1
{
display: block;
height: 20px; /* varie en fonction de la taille de l'image */
width: 100px; /* varie en fonction de la taille de l'image */
background: url(lien1.png);
}


Attention : cette solution fonctionne mais ta page n'est pas accessibles aux navigateur qui ne tiennent pas compte des images.
merci penguin mais j aimerai bien éviter ce genre de truc. pas super accessible.

Si tu as une autre idée sous la main je suis preneur Smiley smile car toujours pas trouvé ma solution.
Modérateur
Bonjour,

C'est dans quel but MemoClic ? Un menu dont les images changent au passage de la souris ? Peux-tu donner des explications précises sur ce que tu veux faire ? Certaines choses peuvent être réalisées par CSS, et d'autres par Javascript. Il serait donc préférable de connaître ta situation pour te proposer la meilleure solution.
On peut reprendre le code de tout à l'heure pour le rendre au top de l'accessiblité:

en html :
<a href="lien.htm" id="lien1"><span>Titre du lien</spans></a>
en css:
#lien1
{
display: block;
height: 20px; /* varie en fonction de la taille de l'image */
width: 100px; /* varie en fonction de la taille de l'image */
background: url(lien1.png);
a span{display:none;}
}

Modifié par Sylvain (21 Sep 2005 - 18:50)
arf pas mal sylvain Smiley smile je vais tester ... ca me plait bien ta solution

Sinon le but, je développe un système qui sera multi-site et les boutons doivent pouvoir être personnalisé par la feuille de style.
Modérateur
Je ne suis pas certain que la méthode de Sylvain soit idéale. Si je ne me trompe pas, quelqu'un avec un lecteur d'écran n'entendra pas le contenu du span, car il est en display:none. En plus que les images sont des images décoratives de fond, là il n'y a plus aucune chance pour ces utilisateurs. Mais l'idée n'est pas si mal, ce n'est pas très loin de l'objectif voulu. Resterait peut-être à l'améliorer.

Je vais réfléchir à une solution plus accessible.

Est-ce que les boutons doivent être des images avec du texte en image, ou voudrais-tu seulement pouvoir modifier l'image de fond de chaque élément du menu ?
Modifié par Merkel (21 Sep 2005 - 19:49)
Merkel a écrit :
Je ne suis pas certain que la méthode de Sylvain soit idéale. Si je ne me trompe pas, quelqu'un avec un lecteur d'écran n'entendra pas le contenu du span, car il est en display:none. En plus que les images sont des images décoratives de fond, là il n'y a plus aucune chance pour ces utilisateurs. Mais l'idée n'est pas si mal, ce n'est pas très loin de l'objectif voulu. Resterait peut-être à l'améliorer.

Je vais réfléchir à une solution plus accessible.

Est-ce que les boutons doivent être des images avec du texte en image, ou voudrais-tu seulement pouvoir modifier l'image de fond de chaque élément du menu ?

le lien doit effectivement etre une image. C'est bien ma problématique Smiley smile image ou image de fond peu importe.
Modérateur
Peut-être que la solution de Sylvain pourrait être utilisée, mais plutôt que d'utiliser le display:none, il faudrait utiliser une technique semblable à celle qui permet de cacher un titre.
En effet, chose dont je vais dès maintenant m'inspirer pour mon site, j'ignorais que les lecteurs d'écrans comprenaient certaines propriétés CSS (ce qui ne nous arrange pas).
Merci pour le lien Smiley smile
merci à tous.

voici mon code qui fonctionne sous FF. on verra plus tard pour IE Smiley smile 


#mcaTests P.autreTest {   
  clear:left ;
  border-bottom:1px dashed #ccc ;
  padding: .5em 0 ;
}
#mcaTests A.hrefAutreTest {   
  display:block;
  width:188px;
  height:23px;
  width:100%;
  background:url("/i/autretest.png") top right no-repeat ;
}
#mcaTests SPAN.hiddenOne {   
  position: absolute;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
}



<?PHP
  return "<p class=\"autreTest\">
<a href=\"".$_SERVER["PHP_SELF"]."?idSite=".$this->idSite."\" class=\"hrefAutreTest\">
<span class=\"hiddenOne\">Faire un autre test</span>
</a></p>\n\n";
?>


Nico
Modifié par MemoClic (21 Sep 2005 - 20:48)
Bonjour,

S'il s'agit d'une question d'accessibilité, la seule solution véritablement accessible est l'utilisation d'un élément <img ... /> dans le lien, avec texte du lien dans l'attribut alt

Les images d'arrière-plan CSS avec texte HTML caché posent des problèmes quelque-soit la méthode de masquage. Par exemple, un utilisateur ayant coché l'option d'accessibilité "Ignorer les couleurs d'arrière-plan" dans IE Windows n'aura ni l'image ni le texte.
Voir les exemples donnés pour les images de logo dans http://blog-and-blues.org/weblog/2004/08/19/277-mettre-un-titre-en-image
Sylvain a écrit :
dans ce cas, les rollovers, et autres portes coulissantes, deviennent innaccessibles...


Très fréquemment : oui.
Et, dans ce cas, pourquoi tout simplement (je vais me faire des ennemis) mettre une image transparente avec en alt le titre ?

Après tout, l'image transparente ne sert pas à la mise en page ici, mais à l'accessibilité !
Ca ne risque pas d'être interprèté par les moteurs comme l'est le texte ton sur ton et donc déservir ta page ?

Et si on n'affiche pas les images, ça se présentera comment par rapport à ce qu'on veut faire il n'y aura pas deux textes supperposés ?
Sujet clos
Aller à