Discussion :

[Tiresia]

Bonjour à tous, je suis en train de faire un site de photos, j'ai regardé moult forums, j'ai essayé de m'inspirer des différentes techniques que j'ai pu voir ci et la mais je n'arrive toujours pas à faire l'effet que je veux...qui est pourtant simplissime...enfin je suppose...c'est que quand je passe la souris sur la miniature, elle s'agrandisse un peu, ce n'est pas l'affichage de la grande photo que je veux juste un petit agrandissement de la miniature...

Alors je m'explique, quand les répertoires sont choisis par l'utilisateur, les photos contenues dans ce répertoire s'affichent comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

echo ' <div class="ecrin2"><a href=index.php?mapage=' ,$_GET['mapage'], '&mapage2=',$_GET['mapage2'], '&mapage3=' , $tableau[$i] , '><img src="' ,$_GET['mapage'], '/',$_GET['mapage2'], '/mini/' , $tableau[$i] , '" class="centrage2"/></a></div>';

sachant que mini contient mes miniatures...

Voila maintenant mon "ecrin2":

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
.ecrin2{
float:left;
border-color:#000000;
border-style:double;
background-color:#333333;
height:150px;
width:150px;
padding:5px;
text-align:center;
}

Alors j'ai essayé de travailler avec ça en lui mettant des :hover etc...j'ai essayé aussi de faire .ecrin2 img{petit} et .ecrin2 img:hover{grand} et j'ai essayé aussi la même chose avec les balises <a></a>, rien de rien, j'ai l'impression qu'il ne detecte même pas que je passe ma souris dessus...

Dans un deuxième temps, voila ma class "centrage2" :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
img.centrage2{
border-color:#FFFFFF;
border-style:groove;
margin-top:22px;
height:75px;
width:112.5px;
}

Vous l'aurez compris (peut être), ecrin2 et centrage2 gèrent les images en format paysage, j'ai la même chose à peu de détails près pour les images en portrait...

Enfin voila, j'espere avoir donné les infos nécéssaires pour que quelqun puisse m'aider, ce serait vraiment gentil, la je stagne malgré les infos que j'ai pioché un peu partout...

[Gf6HqmTW]

L'evenement HOVER n'est reconnu que pour les balises A (enfin ca depends des browsers)
C'est pourquoi je peut te proposer des methodes un peu barbares avec des
<a><img></a>
et des

a :hover > img ...
Voilou

[mehdijaqir]

Tu trouvera une réponse dans les cours et tutoriels CSS : http://css.developpez.com/cours/

[Tiresia]

Merci de vos réponses et merci du lien, mais ce site fait parti déja des sites que j'ai visité et j'ai appliqué à la lettre ce qu'ils y disent...seulement le sushi, c'est que si je ne met pas mon image en background de mon <a> dans ma feuille css il me fait un grossissement bizarre où il ne me prend que le bord de mon lien et non pas l'image. En plus de ça, sur ce site, il est marqué que l'on peut travailler avec les :hover sur les <img>...ce que j'ai essayé au tout début et qui ne marche absolument pas...

J'ai aussi essayé les <div> autour de l'image, ça ne marche pas non plus...le seul cas où ça a fonctionné, c'est quand j'ai effectivement mis le :hover sur mes balises <a>...mais comme dit plus haut, il ne me grandit pas l'image mais uniquement le bord de l'image...qui correspond au lien (enfin je suppose...).

D'autres idées ? Help !

[Gf6HqmTW]

Oui en modifiant non pas le style de ta balise <a> mais le style des balises <img> inclues dans des balise <a> elles memes survolées ...
et donc ca te donne un css dans ce gout là

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

a :hover > img {ma nouvelle taille}

[Tiresia]

Ouais, ça marche comme ça, merci bien, bon au cas ou ça servirait à d'autres voila en corrigé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href=index.php?mapage=' ,$_GET['mapage'], '&mapage2=' ,$_GET['mapage2'], '&mapage3=' , $tableau[$i] , '  class="centrage"><img src="' ,$_GET['mapage'], '/',$_GET['mapage2'], '/mini/' ,$tableau[$i], '" class="border"/></a>

et sur la feuille de style :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
a.centrage:hover img{
 
height:112.5px;
width:75px;
}
 
a.centrage2:hover img{
 
 
height:75px;
width:112.5px;
}
 
a.centrage img{
 
height:90px;
width:60px;
}
 
a.centrage2 img{
 
height:60px;
width:90px;
}
 
img.border{
border:none;
}

[Gf6HqmTW]

Bah content que ca ait servi ^^ Tu nous envois un lien vers la page quand tu auras terminé qu'on voit ce que ca donne ?

[Tiresia]

Sans soucis, je pense que dans quelques jours ce sera mis en ligne, je viendrai mettre le lien vers le site, merci encore.