[Résolu] Fausse popup CSS valide au W3C.

Bonjour,

J'ai le code ci-dessous sur mon site qui me permet d'afficher une fausse popup en css lors du survol du lien avec la souris.

<a href="#" class="bulle">

<span>
<img src="images_catalogue/grand/5730.jpg" align="right" style="margin-left:10px;">
<h1>Le titre de ma bulle</h1>
<p>La description de ma bulle.</p>
</span>

<img src="images/photo.jpg" border="0" alt="" /></a>

Je ne vous met pas le css qui va avec car cela marche très bien. Le problème est que je me retrouve avec des balise <h1> et <p> dans un <span> ce qui n'est pas valide au W3C.

Auriez-vous une idée sur comment sortir le contenu de ma popup du lien ?
Mettre le contenu dans une autre partie de la page, mais qui s'affiche quand même au survol du lien. Je ne vois pas comment lié les deux. Toute piste ou technique est la bien venu ?

Merci d'avance.
Modifié par yann123 (19 May 2009 - 11:50)

Bonjour,

yann123 a écrit :
Auriez-vous une idée sur comment sortir le contenu de ma popup du lien ?

Oui: ne pas utiliser de lien. Car il ne s'agit pas ici d'un lien, mais d'un vaguer artifice pour pouvoir utiliser la pseudo-classe :hover dans IE6.

yann123 a écrit :
Mettre le contenu dans une autre partie de la page, mais qui s'affiche quand même au survol du lien. Je ne vois pas comment lié les deux.

En un mot: JavaScript.

Merci de ta réponse.

Voici pourquoi j'aimerais utiliser cette technique.

Le contenu que je mets dans ces "popups" est important. Je l'affiche de cette manière pour ne pas avoir des pages trop longues.

L'internaute voie les informations des produits en survolant les images.

Ce que je trouve intéressant dans cette technique c'est que les robots ne vont pas rencontrer de problème pour indexer ce contenu et que les bulles s'affichent pour tout le monde (personne qui désactive javascript).

Javascript pose plus de problèmes pour les robots et est désactivé chez certaines personnes.

Je sais aussi que IE6 est encore beaucoup utilisé, je n'ai pas testé sur cette version.

Pas facile de satisfaire tous le monde. ça m'embête.

Vérification faite, cela fonctionne sous IE6.
Reste mon problème du w3c.

Il faut parfois savoir choisir entre validité, sémantique, élégance, et bidouillage

Si la méthode indiquée par Florent est la plus correcte, il te reste à essayer de ne pas utiliser de balises bloc dans ton lien.

Et puis sinon, le style de tes images... --> CSS

yann123 a écrit :
les bulles s'affichent pour tout le monde (personne qui désactive javascript)

Je crois que tu ne connais pas encore bien (ou du tout) JavaScript. On peut tout à fait gérer correctement l'affichage des contenus sans JavaScript... en utilisant JavaScript pour désactiver les contenus que les scripts JS sont censés faire apparaitre (suite à une action de l'utilisateur).

yann123 a écrit :
Javascript pose plus de problèmes pour les robots

Non.

yann123 a écrit :
et est désactivé chez certaines personnes

Certes. Ça se gère très bien avec un peu de méthode.

Merci de vos réponses, je vais réfléchir à tous cela.