[HTML/CSS/Javascript] z-index avec rollover sur image ( zoom CSS )

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [HTML/CSS/Javascript] z-index avec rollover sur image ( zoom CSS )

bl@p_psx

Admin G15-france

Bonjours à tous !

Voilà mon problème :

Je travaille en ce moment meme sur un petit site perso en XHTML1.1 CSS et surtout tableless ... mais bref.

J'ai un petit soucis au niveau de ma galerie d'image.
En effet, j'ai creer un petit rollover qui zoom la vignette quand on la survole. Hors, cette vignette, une fois agrandis, est sous les autres. j'aimerais comprendre en fait comment faire pour la mettre dessus.

j'ai bien un z-index:10 quand j'utilise le style .miniature_select img:hover mais ca ne fonctionne pas

merci d'avance !

@+

ps: voilà ce que j'ai :

Code :

<div class="centre">
<div id="centre_miniature">
<span class="title">divers</span>
<div class="miniature" onmouseover="this.className='miniature_select'" onmouseout="this.className='miniature'">
<img src="photos/small/small_UnrealII_artwork.jpg" alt="" />
</div>
<div class="miniature" onmouseover="this.className='miniature_select'" onmouseout="this.className='miniature'">
<img src="photos/small/small_KatzeExtreme.jpg" alt="" />
</div>
[... pleins d'images ...]
<span class="piednews">page - <a href="/index.php?page=4&cat=1&view=0.11">1</a>
- <a href="/index.php?page=4&cat=1&view=12.23">2</a>
-
</span>
</div>
</div>

et pour le CSS :

Code :

#centre {
padding: 0 10px 0 10px;
border: dashed 1px black;
background-color:#FFFFFF;
margin-left: 150px;
margin-right: 150px;
margin-top: 5px;
margin-bottom: 10px;
}
.miniature {
font-size: 70%;
float: left;
padding: 5px;
width: 110px;
height: 70px;
margin-top: 25px;
margin-right: 13px;
}
.miniature img {
width: 80%;
border: solid 1px #CCCCCC;
border-right: solid 2px #CCCCCC;
border-bottom: solid 2px #CCCCCC;
}
.miniature_select {
z-index:500;
font-size: 70%;
float: left;
padding: 5px;
width: 110px;
height: 70px;
margin-top: 25px;
margin-right: 13px;
}
.miniature_select img{
border: solid 1px black;
border-right: solid 2px black;
border-bottom: solid 2px black;
}
.miniature_select img:hover{
cursor:pointer;
z-index: 10;
width: 110%;
}
#centre_miniature {
width: 400px;
height: auto;
min-height: 460px;
/*_height: 500px;*/
margin-left: 150px;
margin-right: 150px;
margin-top: 15px;
margin-bottom: 15px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
padding: 0 20px 0 20px;
border: solid 1px black;
border-right: solid 2px black;
border-bottom: solid 2px black;
background-color:#EBFCFF;
}
.title { /*titre de news*/
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
width:150px;
border: solid 1px black;
border-right: solid 2px black;
border-bottom: solid 2px black;
padding: 5px 5px 5px 5px;
background-color: #ECD8EA;
font-weight: bold
}
.piednews { /*pied de news*/
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
width:150px;
border: solid 1px black;
border-right: solid 2px black;
border-bottom: solid 2px black;
padding: 5px 5px 5px 5px;
background-color: #DDF5C7;
}

edit: l'url ou l'on peux voire le code : http://step.moultiplayers.net/inde [...] ge=4&cat=1 ...
edit²: avec IE c'est comment dire ... affreux ... je vais y travailler bientot ...

edit again :

petite illustration :
http://step.moultiplayers.net/images/css-image.png

l'image au centre (tux_la_poste) est agrandie au passage de la souris, mais reste sous l'image de yoda, je voudrais qu'elle soit dessus.

Message édité par bl@p_psx le 11-07-2005 à 16:08:45

Publicité

ceyquem

E falso sequitur quodlibet

et le zindex de 500 pourquoi 500 et pas 0 ?
sinon j'aurai aussi ajouté un
margin-left: -10px;
margin-top: -10px;
en plus du zoom non ?

Code :

# .miniature_select {
# z-index:500;
# font-size: 70%;
# float: left;
# padding: 5px;
# width: 110px;
# height: 70px;
# margin-top: 25px;
# margin-right: 13px;
# }
# .miniature_select img{
# border: solid 1px black;
# border-right: solid 2px black;
# border-bottom: solid 2px black;
# }
# .miniature_select img:hover{
# cursor:pointer;
# z-index: 10;
# width: 110%;
# }

bl@p_psx

Admin G15-france

le 500, bein à force de tester tout et n'importe koi ^^

je regarde pour le 0 ( c'est ptetre le seul truc que j'ai pas essayé )

++

bl@p_psx

Admin G15-france

Merci bien pour le margin ! c'est vrai que c'est mieux, j'y avais pas penser encore ...

par contre, toujours rien pour le z-index ...

maintenant, j'ai ca :

Code :

.miniature {
font-size: 70%;
float: left;
padding: 5px;
width: 110px;
height: 70px;
margin-top: 25px;
margin-right: 13px;
}
.miniature img {
width: 80%;
border: solid 1px #CCCCCC;
border-right: solid 2px #CCCCCC;
border-bottom: solid 2px #CCCCCC;
}
.miniature_select {
z-index:0;
font-size: 70%;
float: left;
padding: 5px;
width: 110px;
height: 70px;
margin-top: 25px;
margin-right: 13px;
}
.miniature_select img{
z-index: 0;
width: 110%;
margin-left: -10px;
margin-top: -10px;
border: solid 1px black;
border-right: solid 2px black;
border-bottom: solid 2px black;
}
.miniature_select img:hover{
cursor:pointer;
/*width: 110%;*/
}

ceyquem

E falso sequitur quodlibet

en fait je ne comprends pas pourquoi tu t'embêtes avec du javascript pour changer la classe de ton div. Si tu vires tout le javascript dans onmouseover et onmouseout et que tu utilise une CSS du genre :

Code :

.miniature {
font-size: 70%;
float: left;
padding: 5px;
width: 110px;
height: 70px;
margin-top: 25px;
margin-right: 13px;
}
.miniature img {
width: 80%;
border: solid 1px CCCCCC;
border-right: solid 2px CCCCCC;
border-bottom: solid 2px CCCCCC;
}
.miniature:hover {
z-index:0;
font-size: 70%;
float: left;
padding: 5px;
width: 110px;
height: 70px;
margin-top: 25px;
margin-right: 13px;
}
.miniature:hover img{
z-index: 1;
width: 110%;
margin-left: -10px;
margin-top: -10px;
border: solid 1px black;
border-right: solid 2px black;
border-bottom: solid 2px black;
}

ça fait quoi ?

Message édité par ceyquem le 08-07-2005 à 15:42:10

bl@p_psx

Admin G15-france

pas mieux, meme en mettant des z-index:-1 à .miniature_select, .miniature_select img et .miniature_select img:hover, rien à faire ... ( meme chose en mettant -1 aux autres )

ceyquem

E falso sequitur quodlibet

j'ai édité entre temps

plainsofpain

Pingouino's lover

(et mets un doctype xhtml 1.0 Stric, le xhtml1.1 n'est compris que par firefox, IE te fera n'imp)

---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be

bl@p_psx

Admin G15-france

c'est pas con ca ^^ ( le css full à la place du js )

concernant le xhtml1.1, c'est fait expres ... je prevois une redirection vers le site mozilla en cas d'utilisation d'IE

( serieusement, je vais surement faire ca, pour le moment, je teste pas avec IE, mais je referais une feuille se style pour IE en corrigant les pb de box par exemple ... )

merci bien ! je vous tient au courant !

ceyquem

E falso sequitur quodlibet

moi quand on ouvre mon site avec IE, y'a un petit renard rouge qui se case en haut à droite sur toutes les pages -> www.clarkwan.com

Publicité

bl@p_psx

Admin G15-france

cool pour le petit renard rouge ^^

par contre, j'ai virer les JS, mais ca ne marche pas mieux ...

et les border de .miniature img ne fonctionne plus ... je capte pas là

bl@p_psx

Admin G15-france

bon, j'ai essayer autre chose, j'ai virer les z-index du fichier CSS et j'ai mis en dur, lors de la generation de la page, des z-index sur la balise img ( degressif, de 11 à 0 ) ... et bein ca marche pas ...

snifff ...

bl@p_psx

Admin G15-france

question subsidiaire : est-ce le mal de choisir un doctype strict et d'ouvrir mes images en pop-up ?? ( simple question, je n'ai pas encore statuer definitivement sur ce que je compte faire pour mon site )

@+

ps: sinon, j'y arrive tjrs pas et en virant le JS des rollover, j'ai perdu le cadre autour des images alors meme que le style est cencer le definir

---------------
:Moultiplayers:.:Quatuor Chevalier:.:Admin G15-france.com:.:Wiki -G15-france:.:-Papa-:.

bl@p_psx

Admin G15-france

toujours pareil, les images sous zoomer en dessous ....

ca m'enerve de pas trouver !

cerel

Si je me trompe pas, le z-index ne fonctionne que sur les elements dit "positionnes".
Un element est dit positionne, lorsqu'il a comme "position" "fixed, relative, absolute".

Essaye donc de metre ton element en relative (sans forcement le bouger reelement).

PS : J'ai pas regarde ta css, alors si c'etait deja le cas, desole.

sibelius

Vous êtes sûr ?

cerel a écrit :

Si je me trompe pas, le z-index ne fonctionne que sur les elements dit "positionnes".
Un element est dit positionne, lorsqu'il a comme "position" "fixed, relative, absolute".

Exact.

Sinon, ceci peut-il t'aider ?
http://css.alsacreations.com/xmedi [...] /maps2.htm

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com

bl@p_psx

Admin G15-france

yep, j'avais bien lu ce passage sur les z-index sur w3schools ...
et effectivement, ma structure est à base de div en float et de clear:both ...
je vais voir si j'ai le courage de modifier le css pour mettre en relative.

sinon, au pire, je gere ca dans mon script d'ajout d'image ... ( pour le moment, je travaille que sur la largeur - 110px - pour calculer la hauteur ) je vais regarder ca à tête reposer.
En meme temps, j'ai encore pas mal de code à produire ( en particulier tout les formulaire admin ) !
[3615MYLIFE] je recois les tapis demain ! faut que soit pret !![/3615MYLIFE]

++

merci encore ! je vous tient au courant !

ps: personne pour ma question sur les pop-up pour les images ? d'apres ce que j'ai lu 'url=http://blog.alsacreations.com/]ici[/url] vraudrais mieux pas ... histoire de respecter l'XHTML1.1 et pas le detourner ...

---------------
:Moultiplayers:.:Quatuor Chevalier:.:Admin G15-france.com:.:Wiki -G15-france:.:-Papa-:.

sibelius

Vous êtes sûr ?

bl@p_psx a écrit :

question subsidiaire : est-ce le mal de choisir un doctype strict et d'ouvrir mes images en pop-up ??

Si tu parles de target blank, la réponse n'est pas que c'est mal, c'est tout simplement impossible : tu ne peux pas avoit d'attibut target en doctype scrict : http://forum.alsacreations.com/faq/#item21

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com

bl@p_psx

Admin G15-france

je parlais pas de target ... mais bien de pop-up en js ( ce qui est une facon de detourner le target )

en y reflechissant bien, il vaux mieux que je mette un lien simple vers l'image, parceque si le JS est desactivé, pas d'ouverture ...

mais je me tate encore, j'aimais bien mon petit pop-up ^^ ( http://step.moultiplayers.net/inde [...] ge=4&cat=1 )

---------------
:Moultiplayers:.:Quatuor Chevalier:.:Admin G15-france.com:.:Wiki -G15-france:.:-Papa-:.

sibelius

Vous êtes sûr ?

bl@p_psx a écrit :

je parlais pas de target ... mais bien de pop-up en js ( ce qui est une facon de detourner le target )

Dans ce cas, à moins d'une technique bizarre, je ne vois pas l'inconvénient : JS est autorisé en Strict.
Ensuite il s'agit d'imposer sa manière de surfer au visiteur, ce qui est un autre problème :-/

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com

bl@p_psx

Admin G15-france

c'est clair ! mais effectivement, sans JS, point d'ouverture ...

bon, c'est pas le plus grave ! je retroune sur mes formulaires d'insertion en BD

merci !

@+

ps: je testerais les modifs CSS demain au taf si j'ai un moment

---------------
:Moultiplayers:.:Quatuor Chevalier:.:Admin G15-france.com:.:Wiki -G15-france:.:-Papa-:.

cerel

Pour tes images, tu peux faire un truc du genre :

Code :

<a href="monimage.jpg" onclick="ouvrir(this.href); return false">Mon image</a>

De cette facon, ceux qui ont le js d'active auront une popup, et ceux qui n'ont pas js d'active, auront le lien direct vers l'image.
Ensuite tu peux meme faire avec un petit js "dedie", c'est a dire un js qui va ajouter, lors du chargement de ta page, le onclick aux liens qui en ont besoin.

Et pour aller encore plus loin, tu pourrais rajouter egalement une petite image a cote des liens qui s'ouvrent dans une popup, histoire d'indiquer a l'utilisateur que l'image s'ouvre dans une popup.
Et si t'es motive, pkoi ne pas egalement prevoir un systeme pour desactiver les popups. Comme ca tout le monde est content

FlorentG

Unité de Masse

cerel a écrit :

Pour tes images, tu peux faire un truc du genre :
[...]

Bravo, tu as mérité cette image :

bl@p_psx

Admin G15-france

cerel a écrit :

Pour tes images, tu peux faire un truc du genre :

Code :

<a href="monimage.jpg" onclick="ouvrir(this.href); return false">Mon image</a>

bon, je vient de faire ca et effectivement, ca fonctionne une fois le JS desactivé ^^ ( j'avais tester mais en oubliant le return false ... )

merci bien !

@+

Publicité

FORUM HardWare.fr

Programmation

HTML/CSS

[HTML/CSS/Javascript] z-index avec rollover sur image ( zoom CSS )

Sujets relatifs
taille d'image	encadrement d'une image
[HTML] Gros problème de Checkbox	Document Word dans une cellule d'un tableau HTML
[HTML] Combo box choix multiple	[CSS] Probleme de bordure
apercu d'une page html	style CSS dans user web control
[HTML/CSS]alignement texte différents das une même cellule[résolu]
Plus de sujets relatifs à : [HTML/CSS/Javascript] z-index avec rollover sur image ( zoom CSS )

Page générée en 0.119 secondes