Affichage d'une fenetre au survol d'un bouton (sans javascript)

<a class="ShowOption1" href=''>
	<img src='images/showoption1.png' border="none" alt="" />
	<span class="WinOption1">
		<?php foreach($items as $i => $lib){ ?>
		<img src="images/items/<?php echo $lib ?>" border="none" alt=<?php echo substr($textes_items[$i],1,4) ?> />
		<?php } ?>
	</span>
</a>

.ShowOption1 span{
	display: none;
}
a.ShowOption1:hover span{
	display: block;
}
.WinOption1{
	position: absolute;
	background: #eff;
	z-index: 10;
	top: 145px;
	left: 5px;
	width: 547px;
	height: 35px;
	border-style: solid;
	border-color: #445;
	border-width: 1px;
	border-bottom-width: 4px;
}

But de la manoeuvre : afficher une fenetre lorsque que la souris survole le bouton.
Ce code fonctionne parfaitement sous firefox et netscape, mais pas sous Opera et IE6 (non testé sous IE7, il faut que je l'installe avec un reboot etc... )
Si vous avez une petite idée du comment du pourquoi de la chose ^^
merci

Bonjour,

On va la faire courte.

a écrit :
Affichage d'une fenetre au survol d'un bouton (sans javascript)

Non.

Bonus:

a écrit :
netscape

Lol.
Modifié par Florent V. (13 Apr 2009 - 11:56)

Rien compris à ton post
Quand je dis fenêtre, je me suis mal expliqué, il s'agit du span "WinOption1"
Et comme je le dis, ça fonctionne nickel sous ff et netscape

Alors je vais la refaire en plus longue.

1. Pour afficher un contenu important (ou même assez faible) au survol d'un élément, la seule solution raisonnable est d'utiliser JavaScript. Cela permettra notamment, si c'est bien fait, l'affichage du contenu au focus (navigation au clavier) et pas seulement au survol. Cela permettra aussi la compatibilité avec IE6, qui ne comprend pas la pseudo-classe :hover en dehors des liens.

2. Netscape est mort, depuis euh... longtemps. Les navigateurs que tu peux utiliser pour tes tests sont Internet Explorer (versions 6, 7 et 8... et, oui, c'est un peu difficile d'avoir tout ça sur un même système en même temps), Firefox (versions 2 et 3), Safari (3), Opera (9.6), et éventuellement Chrome mais le moteur de Chrome pour le rendu des pages est le même que celui de Safari.

Netscape est mort, je le sais bien, mais il existe toujours des incorruptibles qui l'utilisent et il faut penser à eux tout comme à ceux qui dévalident le javascript pour la plus grande joie des développeurs, et il faut penser à eux également.
Pour ce qui est d'afficher le span au survol de la souris, mon code fonctionne parfaitement sous FF, de plus le :hover n'est pas endehors des liens puisque qu'il est utilisé via la balise <a> :
"<a class="ShowOption1" href=''>"
et
"a.ShowOption1:hover span{
display: block;
}"
FF le comprends très bien... IE non, alors que le hover est bien présent.
De plus le même syteme est utilisé sur clubic pour la sélection d'un smiley lors d'un post avec javascript désactivé ET sous IE6...
Modifié par tsumiko (14 Apr 2009 - 11:02)

Va voir ici l'utilisation des navigateurs : http://gs.statcounter.com/

Il est facile de conclure que l'on doit se concentrer sur le développement pour IE (6-7-8), Firefox 3, Safari 3, Chrome 1 et Opéra 9.6.

Les 3,5% restants sont presque négligeables, mais ils sont très variés (IE4-5, Netscape ?,Vieilles versions d'autres navigateurs, navigateurs spécifiques...)

tsumiko a écrit :
mais il existe toujours des incorruptibles qui l'utilisent

0,1%?

Tandis qu'Opera est dans les 1%, Chrome dans les 1-2%, Safari dans les 3-5%, Firefox 2 dans les 3-5% également. Si tu veux tester des navigateurs «minoritaires», commence par ceux-là.

tsumiko a écrit :
il faut penser à eux tout comme à ceux qui dévalident le javascript

Dans le cas présent, le traitement de l'affichage de ces informations ou options sans JavaScript devrait se faire ainsi: le contenu est affiché directement dans la page, et non pas masqué en CSS. C'est le seul moyen pour que ce contenu reste accessible sans JavaScript avec notamment la navigation au clavier.

tsumiko a écrit :
de plus le :hover n'est pas endehors des liens puisque qu'il est utilisé via la balise <a>

Ce qui est un problème en soi: tu utilises une balise de lien alors qu'il ne s'agit pas d'un lien.

tsumiko a écrit :
De plus le même syteme est utilisé sur clubic

Rien n'interdit de répéter les erreurs des autres, en effet.

Erreur, peut-être, mais utile, car j'affiche des options au cas d'un survol, et FF étant reconnu comme le plus "pro" quant aux respect WC3, ce code fonctionne parfaitement.
Ou alors dans ce cas, IE6 est plus "pro" que FF, qui lui, interprete bien ce code (il réagit mal?)
Je note que sur IE6, maxthon, safari, seul FF traite bien ce code. bug de FF??

->"Ce qui est un problème en soi: tu utilises une balise de lien alors qu'il ne s'agit pas d'un lien."
Que je mette un lien ou pas, le résultat est le même, fonctionne sous FF et pas sous les autres et je ne m'en sert pas en tant que lien, mais uniquement pour profiter du :hover sous IE6 et simuler les onmouseover/out.
Conclusion : FF bug dans ca cas et pour une fois vive IE6 alors?
Modifié par tsumiko (14 Apr 2009 - 13:02)

Salut,

tsumiko a écrit :
->"Ce qui est un problème en soi: tu utilises une balise de lien alors qu'il ne s'agit pas d'un lien."
Que je mette un lien ou pas, le résultat est le même

Un lien devrait être un lien afin de respecter la sémantique de la même façon qu'on n'utilise pas un H3 uniquement parce que c'est exactement la taille de police qu'on voulait mais parce qu'il s'agit d'un titre de niveau 3.

tsumiko a écrit :
ce code fonctionne parfaitement.

Qu'est-ce qu'un code qui fonctionne bien?

Ce n'est pas un questionnement philosophique, mais une simple question d'évaluation de la qualité. Quels sont les critères retenus pour décider si un code fonctionne correctement? Si je conçois une application qui permet à des utilisateurs de saisir des informations personnelles, et que je laisse ces informations visibles aux yeux de tous, parce que j'ai conçu l'application sans prendre en compte les problèmes de confidentialité et de vie privée, il est probable que mon code fonctionne bien, mais que mon application soit mal conçue en amont.

Lorsque les objectifs sont mal définis ou, pire, mauvais, le code peut remplir ces objectifs, mais la qualité globale ne sera pas bonne.

Ici, tu as décidé de créer un effet d'affichage au survol qui n'utilise pas JavaScript. Ton objectif serait que cela soit compatible avec les principaux navigateurs actuels, dont IE6, ce qui t'incite à utiliser un lien pour englober ton contenu à afficher au survol. Tu as donc privilégié les trois critères suivants:

- effet disponible sans JavaScript;
- effet compatible avec les principaux navigateurs actuels;
- utilisation à la souris exclusivement.

Tu as donc ignoré ou rejeté les critères suivants:

- accessibilité de la lecture avec un lecteur d'écran (un lecteur d'écran annoncera un lien alors qu'il ne s'agit pas d'un lien, et passera sous silence le contenu masqué en display: none);
- possibilité d'afficher le contenu avec le clavier;
- facilité d'usage avec un dispositif de pointage peu précis (touchpad d'un ordinateur portable pour un utilisateur moyen...);
- compréhension du contenu avec feuilles de styles désactivées.

Les critères de qualité peuvent varier, mais selon moi on n'est pas très bien parti dans le cas présent.