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

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

Marsh Posté le 08-07-2005 à 14:30:17    

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 :
  1. <div class="centre">
  2. <div id="centre_miniature">
  3.  <span class="title">divers</span>
  4.  <div class="miniature" onmouseover="this.className='miniature_select'" onmouseout="this.className='miniature'">
  5.   <img src="photos/small/small_UnrealII_artwork.jpg" alt="" />
  6.  </div>
  7.  <div class="miniature" onmouseover="this.className='miniature_select'" onmouseout="this.className='miniature'">
  8.   <img src="photos/small/small_KatzeExtreme.jpg" alt="" />
  9.  </div>
  10. [... pleins d'images ...]
  11.  <span class="piednews">page - <a href="/index.php?page=4&amp;cat=1&amp;view=0.11">1</a>
  12. - <a href="/index.php?page=4&amp;cat=1&amp;view=12.23">2</a>
  13. -
  14.  </span>
  15. </div>
  16. </div>


 
et pour le CSS :  

Code :
  1. #centre {
  2. padding: 0 10px 0 10px;
  3. border: dashed 1px black;
  4. background-color:#FFFFFF;
  5. margin-left: 150px;
  6. margin-right: 150px;
  7. margin-top: 5px;
  8. margin-bottom: 10px;
  9. }
  10. .miniature {
  11. font-size: 70%;
  12. float: left;
  13. padding: 5px;
  14. width: 110px;
  15. height: 70px;
  16. margin-top: 25px;
  17. margin-right: 13px;
  18. }
  19. .miniature img {
  20. width: 80%;
  21. border: solid 1px #CCCCCC;
  22. border-right: solid 2px #CCCCCC;
  23. border-bottom: solid 2px #CCCCCC;
  24. }
  25. .miniature_select {
  26. z-index:500;
  27. font-size: 70%;
  28. float: left;
  29. padding: 5px;
  30. width: 110px;
  31. height: 70px;
  32. margin-top: 25px;
  33. margin-right: 13px;
  34. }
  35. .miniature_select img{
  36. border: solid 1px black;
  37. border-right: solid 2px black;
  38. border-bottom: solid 2px black;
  39. }
  40. .miniature_select img:hover{
  41. cursor:pointer;
  42. z-index: 10;
  43. width: 110%;
  44. }
  45. #centre_miniature {
  46. width: 400px;
  47. height: auto;
  48. min-height: 460px;
  49. /*_height: 500px;*/
  50. margin-left: 150px;
  51. margin-right: 150px;
  52. margin-top: 15px;
  53. margin-bottom: 15px;
  54. font-family:Verdana, Arial, Helvetica, sans-serif;
  55. font-size: 11px;
  56. padding: 0 20px 0 20px;
  57. border: solid 1px black;
  58. border-right: solid 2px black;
  59. border-bottom: solid 2px black;
  60. background-color:#EBFCFF;
  61. }
  62. .title { /*titre de news*/
  63. font-family:Verdana, Arial, Helvetica, sans-serif;
  64. font-size: 0.8em;
  65. width:150px;
  66. border: solid 1px black;
  67. border-right: solid 2px black;
  68. border-bottom: solid 2px black;
  69. padding: 5px 5px 5px 5px;
  70. background-color: #ECD8EA;
  71. font-weight: bold
  72. }
  73. .piednews { /*pied de news*/
  74. font-family:Verdana, Arial, Helvetica, sans-serif;
  75. font-size: 9px;
  76. width:150px;
  77. border: solid 1px black;
  78. border-right: solid 2px black;
  79. border-bottom: solid 2px black;
  80. padding: 5px 5px 5px 5px;
  81. background-color: #DDF5C7;
  82. }


 
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
Reply

Marsh Posté le 08-07-2005 à 14:30:17   

Reply

Marsh Posté le 08-07-2005 à 14:58:37    

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 :
  1. # .miniature_select {
  2. #     z-index:500;
  3. #     font-size: 70%;
  4. #     float: left;
  5. #     padding: 5px;
  6. #     width: 110px;
  7. #     height: 70px;
  8. #     margin-top: 25px;
  9. #     margin-right: 13px;
  10. # }
  11. # .miniature_select img{
  12. #     border: solid 1px black;
  13. #     border-right: solid 2px black;
  14. #     border-bottom: solid 2px black;
  15. # }
  16. # .miniature_select img:hover{
  17. #     cursor:pointer;
  18. #     z-index: 10;
  19. #     width: 110%;
  20. # }

Reply

Marsh Posté le 08-07-2005 à 15:10:05    

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é )
 
++

Reply

Marsh Posté le 08-07-2005 à 15:16:53    

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 :
  1. .miniature {
  2. font-size: 70%;
  3. float: left;
  4. padding: 5px;
  5. width: 110px;
  6. height: 70px;
  7. margin-top: 25px;
  8. margin-right: 13px;
  9. }
  10. .miniature img {
  11. width: 80%;
  12. border: solid 1px #CCCCCC;
  13. border-right: solid 2px #CCCCCC;
  14. border-bottom: solid 2px #CCCCCC;
  15. }
  16. .miniature_select {
  17. z-index:0;
  18. font-size: 70%;
  19. float: left;
  20. padding: 5px;
  21. width: 110px;
  22. height: 70px;
  23. margin-top: 25px;
  24. margin-right: 13px;
  25. }
  26. .miniature_select img{
  27. z-index: 0;
  28. width: 110%;
  29. margin-left: -10px;
  30. margin-top: -10px;
  31. border: solid 1px black;
  32. border-right: solid 2px black;
  33. border-bottom: solid 2px black;
  34. }
  35. .miniature_select img:hover{
  36. cursor:pointer;
  37. /*width: 110%;*/
  38. }

Reply

Marsh Posté le 08-07-2005 à 15:35:44    

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 :
  1. .miniature {
  2.      font-size: 70%;
  3.      float: left;
  4.      padding: 5px;
  5.      width: 110px;
  6.      height: 70px;
  7.      margin-top: 25px;
  8.      margin-right: 13px;
  9. }
  10. .miniature img {
  11.      width: 80%;
  12.      border: solid 1px CCCCCC;
  13.      border-right: solid 2px CCCCCC;
  14.      border-bottom: solid 2px CCCCCC;       
  15. }
  16. .miniature:hover {
  17.      z-index:0;
  18.      font-size: 70%;
  19.      float: left;
  20.      padding: 5px;
  21.      width: 110px;
  22.      height: 70px;
  23.      margin-top: 25px;
  24.      margin-right: 13px;
  25. }
  26. .miniature:hover img{
  27.      z-index: 1;
  28.      width: 110%;
  29.      margin-left: -10px;
  30.      margin-top: -10px; 
  31.      border: solid 1px black;
  32.      border-right: solid 2px black;
  33.      border-bottom: solid 2px black;
  34. }


 
ça fait quoi ?


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

Marsh Posté le 08-07-2005 à 15:39:04    

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 )

Reply

Marsh Posté le 08-07-2005 à 15:43:25    

j'ai édité entre temps ;)

Reply

Marsh Posté le 08-07-2005 à 15:51:31    

(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
Reply

Marsh Posté le 08-07-2005 à 15:57:42    

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 :D
 
( 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 !

Reply

Marsh Posté le 08-07-2005 à 16:00:42    

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

Reply

Marsh Posté le 08-07-2005 à 16:00:42   

Reply

Marsh Posté le 08-07-2005 à 16:05:44    

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à

Reply

Marsh Posté le 08-07-2005 à 16:29:57    

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 ...

Reply

Marsh Posté le 08-07-2005 à 18:03:21    

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-:.
Reply

Marsh Posté le 11-07-2005 à 16:00:23    

toujours pareil, les images sous zoomer en dessous ....
 
ca m'enerve de pas trouver !

Reply

Marsh Posté le 11-07-2005 à 20:34:52    

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.

Reply

Marsh Posté le 11-07-2005 à 20:52:56    

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
Reply

Marsh Posté le 11-07-2005 à 21:49:09    

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-:.
Reply

Marsh Posté le 11-07-2005 à 22:33:56    

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
Reply

Marsh Posté le 11-07-2005 à 22:43:01    

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-:.
Reply

Marsh Posté le 11-07-2005 à 22:47:46    

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
Reply

Marsh Posté le 11-07-2005 à 22:51:16    

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-:.
Reply

Marsh Posté le 12-07-2005 à 08:16:00    

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

Code :
  1. <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 :D

Reply

Marsh Posté le 12-07-2005 à 09:17:22    

cerel a écrit :

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


Bravo, tu as mérité cette image :
http://www.w3.org/WAI/wcag1AAA.gif

Reply

Marsh Posté le 12-07-2005 à 09:47:29    

cerel a écrit :

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

Code :
  1. <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 :D


 
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 !
 
@+

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed