28220 sujets

CSS et mise en forme, CSS3

Rollovers sur images ?? (avec des exemples c'est mieux)

Bonsoir a tous,

J'ai besoins de vous Smiley cligne !!!

Voila sur mon site photo, je refait ma galerie. Je vais donc avoir bcp de vignettes.

J'aimerai, pour palier au manque de place, mettre dans une <div> de 20px de haut une succetion de petit carré gris d'environ 5px de côté.

Et la must du must, je souhaiterais que lorsque l'on passe la souris sur un de ces petit carré, la vignette de la photo qui doit s'afficher, apparaisse... cette vignette fera 25px de côté.

Cas pratiques:

http://www.apoilleux.com/new/images/demo.jpg

Puis au passage de la souris, la vignette apparait:

http://www.apoilleux.com/new/images/demo1.jpg

Et la seulement après si je cliques sur la vignette, l'agrandissement apparait dans la pseudo frame..

Est ce possible ??

Merci a tous
Modifié par Lekouti (22 Sep 2005 - 19:33)
Bonsoir,

Non, je ne veux pas que met vignettes soient visible à premiere vue.
Seul les carrés sont alignés et quand on passe la souris sur ces dit carrés, alors là, la vignette correspondante apparait.
Modifié par Lekouti (19 Sep 2005 - 19:04)
Bonjour,
C'est simple, tu mets l'image en background seulement sur 
a:hover
dans les exellents éxemples de chu.
ok, mais 
a:hover
c'est l'image qui s'active quand on passe la souris dessus non ?

Sinon pas bien compris ton histoire d'example de chu ???? Smiley cligne
AAAH ok, jme suis certainement mal exprimé.

En faite je veux reprendre le style actuelle de mes galerie type:

http://www.apoilleux.com/indefini.php

Je pense donc garder la meme structure. En revanche, je veux remplacer mes ptite vignette du bas par des petits carré.

Et j'aimerai par la suite que lorsque l'on passe la souris sur un de ces carré, la vignette vienne remplacer le carré et apres losque l'on clique dessus, là l'image apparait dans ma pseudo fram !!!

Euuuh c'est claire ou pas ? je mis pert un peu moi meme Smiley rolleyes

Merci
Comme le disait chmel, l'utilisation de a:hover me parait correspondre.
Le moins prise de tête et peut-être le plus compatible entre navigateur serait de créer une image de la taille de tes vignettes qui serait ton petit carré centré entouré de fond ; tu en fais un gif avec le fond transparent qui prendra une centaine d'octets.

Ensuite en état a(:link) tu places cette image en background et en état a:hover tu mets ta vignette soit en background (mais il faut un id par vignette), soit en img. J'imagine que ça fonctionne.
ok merci, j'vance mais comment je fait pour mettre une id par vignette ?

Pour le moment mon code c'est ça :

CSS:

a{background-color: orange; display: block; height: 25px; width: 10px; margin: 3px;} 


a:hover {display: block;
background: url(vignette2/151.jpg);height: 25px; width: 25px;margin: 3px;}
a:hover  {display: block;
background: url(vignette2/152.jpg);height: 25px; width: 25px;margin: 3px;}


HTML:

<a href="#"></a> 
<a href="#"></a> 
<a href="#"></a>


Avec ça, j'ai bien trois rectengle orange et losque je passe la souris dessus, le 1er :hover apparait.

Mais comment faire comprendre, que le rectangle régle dans le .a doit egalement apparatre apres avoir mis des id pour chaque .a:hover ?

Ou dois je programer un .a et .:hover pour chaque vignettes ?

Merci
Bonjour,

C'est amusant : on donne des réponses qui ne sont pas lues. A se demander si cela vaut la peine, surtout quand on a autre chose à faire. Cela devient de plus en plus fréquent sur ce forum.

L'article cité ci-dessus ( http://openweb.eu.org/articles/zoom_image/ ) indique :
- comment combiner deux images (ici le petit carré et la vignette) en une seule image.
- Comment afficher la partie supérieure uniquement (le petit carré) pour le lien a:link
- Et comment utiliser un a:hover pour "déplacer" au survol cette image d'arrière-plan et faire apparaître la vignette (partie inférieure) au lieu du petit carré (partie supérieure).

Cette technique, à la différence de celle que tu tentes d'utiliser, ne nécessite qu'une déclaration a:link et un déclaration a:hover pour la totalité de tes liens.

Maintenant... Comme tu veux tu choises Smiley lol
Modifié par Laurent Denis (23 Sep 2005 - 13:34)
Laurent Denis, j'ai bien pris en compte et crois moi, j'ai esseyer mais moi pas y arriver avec cette technique.

En revanche, je vien de reussir en utilisant un tuto d'ici et en appliquan la balise <span>

http://www.apoilleux.com/new/testgalerie.php

En revanche comment je peux mettre mes carré a l'horisontal ?

Merci a tous
Administrateur
Lekouti a écrit :
Laurent Denis, j'ai bien pris en compte et crois moi, j'ai esseyer mais moi pas y arriver avec cette technique.

Dans ce cas, il ne faut surtout pas hésiter à nous faire part de tes soucis, des parties du code que tu n'arrives pas à appliquer.
C'est à ça que sert une communauté : t'aider dans ton apprentissage et ta compréhension, plutôt que de copier-coller bêtement un code que tu ne comprends pas Smiley cligne

Lekouti a écrit :
En revanche comment je peux mettre mes carré a l'horisontal ?

Le positionnement flottant me semble tout indiqué : voir les explications sur le site Openweb... ou ici-même dans les tutoriels Smiley smile
Modifié par Raphael (23 Sep 2005 - 14:07)
Niveau ergonomie , je trouve que les vignettes sont mieux que les carrés qui se transforment en vignette : on retrouve plus vite une image déjà vue, etc..
Sujet clos
Aller à