Discussion :

[Rakken]

Bonjour,

Voila mon problème. Je suis entrain de travailler sur un site qui possède de nombreux mots pouvant necessiter une explication. Pour cele, j'ai mis en place un systeme en javascript qui affiche une infobulle au passage de la souris.
Maintenant, je voudrai étendre ce systeme sur les images. Le problème est que, mes images possèdant un attribut "alt", sous ie l'infobulle "ie" et mon infobulle en javascript se marche dessus, ce qui est du plus mauvais effet.

J'ai tenté de faire deux image, une entre balises '<noscript></noscript>', ou je ne mets pas mon infobulle javascript, et une autre, ou je mets seulement mon infobulle javascript et pas d'attribut title/alt.
Le problème est que quand on affiche le site sans javascript, on a effectivement la nouvelle image (avec son attribut alt) qui s'affiche, mais l'ancienne est encore la !

Bref, existe-t-il un moyen (en javascript ou php ou autre...) d'afficher soit une "image1 si le javascript" est actif, soit "une image2 s'il ne l'es pas" ?

Je ne cherche pas une validation d'accessibilité, mais simplement du confort pour ceux qui vont visiter le site. Ceux avec javascript auront des infobulles améliorée, avec des styles a l'intérieur et un affichage qui ne s'efface pas au bout de quelques seconde, mais j'aimerai également garder les infobulles "classique" pour ceux qui n'ont pas javascript et pour les robots de référencement.

Si quelqu'un a une piste, merci d'avance !

[MasterOfChakhaL]

Salut,

Ce que je ferais à ta place, ce serait de mettre ton image avec le alt.
Ensuite, il suffit que le script qui crée l'info-bulle supprime le contenu de l'attribut alt.
Ainsi, tu gardes ton code propre est accessible. et ceux qui auront javascript d'activer profiteront de tes info-bulles améliorées...

[Rakken]

Excelente idée ca !
Je vais essayer, et je reposte la solution si ca marche ;-)

[Rakken]

And the winner is :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<span onmouseover="show_info('Mon infobulle perso.');" onmouseout="hide_info();"><img src="/images/monimage.jpg" alt="Un texte alternatif classique" title="Un title classique" onmouseover="javascript:this.title = '';this.alt = ''" border="0"></span>

Et voila ;-)
Quand le javascript est activé, il vide les attributs alt et title et affiche mon infobulle "améliorée". Quand il est désactivé, l'infobulle perso ne peux pas s'afficher, mais du coup, les attributs alt et title restent renseignés ce qui permet quand même d'avoir l'information.
Le seul bémol éventuel est quand on desactive l'affichage des images et qu'on laisse le javascript. La balise alt étant vide, on ne voit qu'une croix indiquant la présence d'une image (mais si on passe la souris dessus, on voit tout de meme l'infobulle perso), mais globalement, je vais considérer que quelqu'un qui n'affiche pas les images, n'utilise pas le javascript non plus (genre les robots ou les gens sous lynx).
Bref, ca marche ;-))