Je souhaite la fonction :active dans mon CSS le reste si on relache la souris

[Invité]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://www.the-elder-scrolls-by-mysticals.com/

Description du problème

Salutation !

Je teste un moyen de visionner des images ( je ne m'en sort pas avec les codes des diaporama ), et actuellement je bute sur ceci :

Lorsque je clique sur mon image, il faut garder la souris enfoncée pour quelle reste zommée sur le coté, si on relâche, elle disparait.

Hors je voudrais qu'elle reste, et disparaisse soit avec un autre clic, soit un clique ailleurs.

Le sujet du test : http://www.the-elder-scrolls-by-mysticals.com/t463-test

Le CSS associé aux images :

Code:

.testimage { width:100%;}
.testimage:active { z-index:999;margin-bottom:10px;position:fixed; height:100%;width:auto;top:10px; left:10px;border: 2px solid #000000;}

Merci !

PS : avec un click-glissé, l'image reste, mais c'est surement un bug.

[Invité]

Up !

[Neptunia]

Bonjour ^^


Le pseudo-élément :active ne concerne que ce qu'il se passe au clic.
Essayez plutôt le pseudo-élément :hover pour épargner votre souris (et/ou votre doigt)

[Invité]

C'était la première chose que j'avais fait :hover. Le soucis, c'est que comme l'image change de place au survol, l'effet :hover cause un tremblement, l'image apparait et disparait très rapidement et indéfiniment.

Puis j'aimerais que l'image reste quand on continue de naviguer, cela fonctionne actuellement avec une astuce, rester enfoncer et glisser, mais c'est pas le top.

EDIT : J'ai mis hover pour que tu vois ce que ça provoque. http://www.the-elder-scrolls-by-mysticals.com/t463-test dès qu'on bouge le curseur, on a ce défaut, c'est assez désagréable.

[Neptunia]

Puis j'aimerais que l'image reste quand on continue de naviguer, cela fonctionne actuellement avec une astuce, rester enfoncer et glisser, mais c'est pas le top.

Pour ce point ce n'est pas possible par le CSS, il faudra passer par un javascript et je n'ai pas la moindre idée de comment parvenir à ce genre de résultat.
Ou bien un plugin jQuery qui ouvrirait l'image en taille réelle dans une fenêtre surgissante.

Pour ce qui est du hover et vu que c'est l'image qui se déplace (je pensais naîvement qu'il y avait deux images) il faudrait appliquer le hover au niveau de la cellule et non de l'image. Rajouter un class aux cellules et utiliser plutôt un code du genre.

Code:

td.testimage:hover img {
...
}

Dans cet exemple non testé, je pars du principe qu'au lieu d'attribuer un class à l'image, on l'attribue à sa cellule.
Il ne devrait plus y avoir de clignotement tant que le curseur survole la cellule sans en sortir.

[Invité]

Parfait, merci beaucoup!

Pour l'histoire de garder l'image pendant la navigation, je parlais sur la page actuelle, pas sur tout le site.