28172 sujets

CSS et mise en forme, CSS3

Active, focus etc... pour créer un popup (sans javascript) [résolu]

bonjour,

j'ai un petit soucis pour créer une popup qui afficherait une image au clicde la souris.
Le code marche sous IE, mais pas sous FF Smiley eek (c'est la première fois que je vois ça !)

code CSS :


    #rando ul li a b em span {display:none;}
    #rando ul li a b em span img {width:0; height:0; border:0; overflow:hidden;}

    #rando ul li a:active,
	#rando ul li a:focus {visibility:visible; color:#000; border:0; cursor:default; width:0; height:0; outline:0;}

	#rando ul li a:active b em span,
	#rando ul li a:focus b em span {position:absolute; display:block; top:-220px; left:-616px; width:998px; height:709px;  z-index:500;  border:1px solid #000;}

	#rando ul li a:active b em span img,
	#rando ul li a:focus b em span img {top:0; left:0; width:996px; height:707px; border:1px solid #000; z-index:500;}


il y a avant le code nécessaire pour le survol souris qui affiche lui un texte à la bonne position demandé.

Quand je clic souris sous IE, ça marche la popup s'affiche et reste à l'écran jusqu'à que je reclique, mais sous FF, elle ne s'affiche que tant que je reste cliqué ! et disparait lorsque je déclique (tiens, je viens d'inventer un nouveau verbe Smiley biggol )

Y'a moyen de pouvoir avoir le même effet sous FF que sous IE ? (sans Javascript, bien sûr !!!)
Modifié par Bill73 (02 Jul 2009 - 11:46)
Bonjour,

Bill73 a écrit :
mais sous FF, elle ne s'affiche que tant que je reste cliqué !

Il se peut que l'implémentation de :active par Firefox soit erronée. Ou que ce soit celle d'IE. Il faudrait tester avec d'autres navigateurs (Safari, Opera...), et pour IE avec IE 8 qui corrige largement l'implémentation de CSS 2.1 dans IE.

Mais quoi qu'il en soit il faut bien comprendre que la pseudo-classe :active n'est pas faite pour ce genre d'usage. Ce que tu as réalisé (ou tenter de réaliser vu que ça ne marche pas dans tous les navigateurs cible) détourne assez largement les CSS de leur rôle et de leurs capacités propres.

Et donc: ça se fait en JavaScript, en prévoyant une utilisation possible sans JavaScript, utilisation au clavier, etc.

Bill73 a écrit :
(sans Javascript, bien sûr !!!)

Pourquoi donc?

Si c'est un problème de compétences, les solutions sont les suivantes (au choix):
1. se former;
2. engager quelqu'un qui soit déjà formé;
3. renoncer à cet effet et faire plus simple (en utilisant les fonctionnalités de base de HTML, c'est à dire l'affichage direct d'un contenu et des liens hypertexte).
Modifié par Florent V. (30 Jun 2009 - 20:42)
ok, mais j'étais parti sur cette base car l'utilisation du hover pour le survol souris marche bien, et je m'étais dit que pourquoi ne pas utiliser le clic.

Pour le "sans javascript", en fait, c'est surtout que certains le désactive ce qui m'ennuie un peut lorsqu'il faut afficher un pavé d'aide ou d'information.

Bon, je vais creuser un peut plus...
Bill73 a écrit :
Pour le "sans javascript", en fait, c'est surtout que certains le désactive ce qui m'ennuie un peut lorsqu'il faut afficher un pavé d'aide ou d'information.

Tu fais un lien qui pointe vers une page donnant le contenu d'aide ou d'information en question. Tu peux éventuellement utiliser target="_blank" (en Transitional) s'il te semble important de ne pas quitter la page en cours, notamment pour les informations d'aide dans un formulaire où l'utilisateur effectue une saisie.

Ensuite, tu fais une surcouche JavaScript qui récupère ce même contenu d'aide (via une requête Ajax) et l'affiche en surimpression du contenu de la page.

Notons tout de même que ce système, s'il est bien pensé, est tout de même lourd à mettre en place et ne sera donc pas adapté pour un petit site. Il convient mieux à un site applicatif.
Smiley eek

... ça m'a l'air quand même de ressembler à une usine à gaz... et je n'ai pas les compétences necessaires !

Je vais voir pour réassembler le tout uniquement sous le hover et sabrer les infos qui ne sont pas véritablement obligatoires.

Merci quand même pour tout.
Sujet clos
Aller à