[HTML/Javascript] gallerie avec image survolée et affichage séparé

gallerie avec image survolée et affichage séparé [HTML/Javascript] - HTML/CSS - Programmation

Marsh Posté le 07-02-2005 à 14:40:47    

Hello,
 
Bon mon titre n'est pas très explicite, faut que je développe: voilà, j'aimerais faire une gallerie qui fonctionne de la même manière que le site http://www.grimemonster.com/tattoos.html
 
Mon problème est double: je ne comprends pas l'architecture de la page (cadres? tableaux?) et par conséquent, je n'arrive pas à bien faire, de manière que lorsqu'on survole une vignette, l'image correspondante s'affiche dans un espace séparé. Quelle doit être la cible de l'image survolée? j'ai essayé _self, _parent, etc, mais rien n'y fait, je n'arrive pas à obtenir le même résultat :(
 
Ce ne doit pas être très compliqué, mais je débute dans le HTML donc je patauge un peu :/

Reply

Marsh Posté le 07-02-2005 à 14:40:47   

Reply

Marsh Posté le 07-02-2005 à 14:43:08    

Ne prend déjà pas exemple sur cette page, le code HTML est tellement pourrit que j'ai jamais vu ça :D
En gros lorsque tu survoles la minitature, ça change la source de l'image version grande...

Reply

Marsh Posté le 07-02-2005 à 14:45:27    

Inspire toi de ça
(check le menu à gauche)


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 07-02-2005 à 18:03:54    

désolé, j'ai une erreur 404 quand j'accède via ton lien :/ même en partant de l'adresse http://www.meyerweb.com/eric/css/edge/ je ne vois rien...

Reply

Marsh Posté le 07-02-2005 à 18:24:53    

Yarok a écrit :

désolé, j'ai une erreur 404 quand j'accède via ton lien :/ même en partant de l'adresse http://www.meyerweb.com/eric/css/edge/ je ne vois rien...


 [:moule_bite]  
 
Fonctionne nickel chez moi, je viens de re-tester (et c'est pas le cache)


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 07-02-2005 à 20:22:07    

:'( essayé sur deux ordis et deux navigateurs différents, ça ne marche pas... tu n'as pas un autre bon exemple?

Reply

Marsh Posté le 07-02-2005 à 20:43:04    

mmm?


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 07-02-2005 à 21:39:54    

yep ça marche! merci :jap: 'vais analyser ça ;)

Reply

Marsh Posté le 08-02-2005 à 08:40:25    

C'est relativement simple a faire en css.
 
Tu mets tes tites vignettes dans un <a class="img_petite" href="meuh.com"><img src="ta_vignette.jpg" alt="vignette" /></a> par exemple.
Puis tu mets un <span class="img_grande"><img src="ton_imagine" alt="grande image" /></span>
 
Ensuite avec du css
.img_petite:hover .img_grande{ //lorsqu'on passe sur le <a> alors la balise <span> n'est plus cachée. Ici en fait on selectionne toute les style img_grande qui se trouvent dans des img_petite:hover (hover c'est quand on passe sur un truc)
 position:absolute; //(ou fixed ou autre : http://www.aidejavascript.com/scripts/css_pos_demo.htm
top:10px;
//etc En gros la tu choisis l'endroit sur ta page ou doit s'afficher ta grande image
}
.img_grande{ //quand on arrive sur la page et qu'on ne fait rien, le span avec la grande image est cachée
display:none;
}
 
Voila en gros tu devrai avoir ce que tu veux, a toi d'aller apprendre un peu le CSS pour mieu faire ca. Y'a ptet des erreurs j'ai pas testé, mais normalement c'est bon :)

Reply

Marsh Posté le 08-02-2005 à 15:41:42    

Merci :jap:
 
jusqu'à présent, j'arrive à modifier certains trucs (remplacer le texte par des images, modifier les couleurs etc) mais ya un truc qui coince (deux en fait...): comment déplacer ma "palette" le long du bas de l'écran, centré et comment faire afficher ça sur une ligne plutôt que sur une colonne? Est-ce avec les critères "block" et "inline"?

Reply

Marsh Posté le 08-02-2005 à 15:41:42   

Reply

Marsh Posté le 08-02-2005 à 15:42:16    

Ouais, ou alors avec un truc style float: left

Reply

Marsh Posté le 08-02-2005 à 15:52:41    

left? pas bottom?

Reply

Marsh Posté le 08-02-2005 à 16:12:15    

float: bottom n'existe pas ;)

Reply

Marsh Posté le 08-02-2005 à 16:17:14    

pff je patauge... est-ce réellement possible d'utiliser cette technique pour avoir un résultat similaire à celui du lien que je donne en premier post? Surtout, comme la gallerie changerait régulièrement, tout ceci doit être flexible!

Reply

Marsh Posté le 08-02-2005 à 17:39:12    

Yarok a écrit :

pff je patauge... est-ce réellement possible d'utiliser cette technique pour avoir un résultat similaire à celui du lien que je donne en premier post? Surtout, comme la gallerie changerait régulièrement, tout ceci doit être flexible!


bien sûr que oui [:spamafote]  
http://masklinnscans.free.fr/scrol [...] opoir.html
 
À noter que ça fonctionne sous IE, mais que celui ci fait son lourd:
on est obligé d'invoquer "#foo a:hover" dans le CSS avant de pouvoir utiliser correctement "#foo a:hover bar", ce qui explique le totalement inutile

#gallery a:hover {border: none;}


de la ligne 13
 
 [:spamafote]  
 
À noter également que j'ai mis des "alt" vides alors que sur une "vraie" page il faudrait les penser sérieusement
 
Last but not the least, il arrive que l'affichage bug sous Firefox, après le 4e thumbnail la 4e image s'affiche, j'ai du mal à comprendre pourquoi, ni Opera ni MSIE n'ont ce problème
 
PS: juste au cas où, je joint ce que vous devriez théoriquement voir s'afficher en allant sur la page [:moule_bite] :
http://img201.exs.cx/img201/2455/majigallerie6tj.th.png


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 08-02-2005 à 20:11:20    

Masklinn a écrit :

bien sûr que oui .....[explication]


 
rôh mortel :love: mille mercis! je vais étudier ça de plus près demain ;) trop fort!! :jap:

Reply

Marsh Posté le 09-02-2005 à 08:36:54    

Masklinn, en partant de ta page, j'ai pu mettre les vignettes dans un cadre, elles sont maintenant dans le bas de la page, comme il faut :jap:
J'ai des ptites questions: c'est avec <SPAN> que les images des vignettes se centrent automatiquement? ou alors c'est grâce à ça que la ligne de vignettes s'ajuste à la largeur de la page en partant par le milieu?
Aussi, à quoi sert le fichier pl.htm dans le dossier des fichiers?


Message édité par Yarok le 09-02-2005 à 08:46:22
Reply

Marsh Posté le 09-02-2005 à 09:03:07    

Toute lam ise en page est assurée par le fichier CSS, jette-y un coup d'oeil ;)

Reply

Marsh Posté le 09-02-2005 à 09:13:03    

ouep, j'ai le nez dedans :p
 
je l'ai modifié de cette manière:
 

#gallery {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; TEXT-ALIGN: center
}
#gallery LI {
 PADDING-RIGHT: 0px; DISPLAY: inline; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 5px; PADDING-TOP: 0px
}
#gallery A:hover {
 BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none
}
#gallery A IMG {
 BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none
}
#gallery A SPAN {
 DISPLAY: none
}
#gallery A:hover SPAN {
 DISPLAY: block; LEFT: 35%; POSITION: absolute; TOP: 100px
}


 
Ok, c'est "TEXT-ALIGN: center"... j'avais pas capté au premier abord, je ne me fais toujours pas au fait que TEXT-ALIGN peut aussi s'appliquer à des images :p
 
Next step: refaire une page "from scratch", et l'intégrer à ce que j'ai déjà fait de mon site :)

Reply

Marsh Posté le 09-02-2005 à 09:16:57    

Par contre, écrit tout en minuscules, par convention on ne met jamais les mot-clés en majuscule ;)


Message édité par FlorentG le 09-02-2005 à 09:17:13
Reply

Marsh Posté le 09-02-2005 à 09:23:47    

ah tiens, je n'ai rien changé... il s'est mis en majuscules tout seul... mais soit, je dois de toute façon retapper tout ça pour mon site :)

Reply

Marsh Posté le 09-02-2005 à 14:33:23    

Salut,
 
j'ai une question au sujet de ces menus CSS.
 
J'ai fait mon site (www.gogo.fr) avec l'aide de plein de javsacript (merci le rollover). J'aimerai le passer en CSS pour éviter tous les problèmes d'incompatibilité mais je ne sais pas comment on pourrait intégrer des liens dans ces menus...
 
J'ai testé ça :  
[code]
<ul class="menu">
<li><a href="">Menu 1<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href=rou.htm>Vivamus</a> ipsum dui, vulputate ut, eleifend pretium, tristique a, velit. Morbi lacus</span></a></li>
<li><a href="">Menu 2<span>Cras (...)
[code]
 
Comme prévu ça foire, deux liens imbriqués c'est normal que ça ne passe pas. Y'a t il une autre balise que <a> qui gère l'évenement hover ? Des idées ?


---------------
Hattrick : Les aléas #586351 - Stats HFR @Alltid
Reply

Marsh Posté le 09-02-2005 à 14:41:53    

Toutes les balises gèrent la pseudo-classes hover. Sauf sous Internet Explorer :cry:

Reply

Marsh Posté le 09-02-2005 à 14:57:17    

Ah oui tiens c'est curieux...
 

Code :
  1. <HTML>
  2. <style type="text/css">
  3. ul {
  4. list-style-type: none;
  5. margin:0;
  6. padding:0;
  7. position: absolute;
  8. top: 2em; /* positionnement du menu, que vous pouvez changer à loisir */
  9. left: 3em;
  10. }
  11. li {
  12. float: left;
  13. }
  14. .menu p { /* définition de chaque bouton du menu */
  15. width: 100px; /* largeur du bouton, que vous pouvez changer à loisir */
  16. height: 20px;
  17. float: left;
  18. display: block;
  19. text-align: center;
  20. border: 1px solid #fff;
  21. text-decoration: none;
  22. color: #000;
  23. background: #fff;
  24. }
  25. .menu p:hover {
  26. color: #411;
  27. background: #AAA;
  28. border: 1px solid gray;
  29. border-bottom: 0px;
  30. color: #fff;
  31. }
  32. .menu p span { /* définition de la balise <span> inclue dans <a> */
  33. display: none;
  34. }
  35. .menu p:hover span { /* définition de la balise <span> au survol */
  36. display: block;
  37. position: absolute;
  38. top: 40px;
  39. left: 0;
  40. width: 600px; /* largeur de la zone de commentaires, selon la taille du menu */
  41. text-align: left;
  42. border-top: 1px solid gray;
  43. color: #000;
  44. }
  45. </STYLE>
  46. <BODY>
  47. <ul class="menu">
  48.      <li><p>Menu 1<span>Lorem ipsum dolor sit amet, consectetuer
  49.      adipiscing elit. <a href=""rou.htm">Vivamus</a> ipsum dui, vulputate ut, eleifend pretium, tristique
  50.      a, velit. Morbi lacus</span></p></li>
  51.      <li><p>Menu 2<span>Cras eu mi vel pede
  52.      tempus dignissim. Etiam malesuada scelerisque massa. Maecenas metus sem,
  53.      consectetuer
  54.      quis, rhoncus non, euismod id, elit</span></p></li>
  55.      <li><p>Menu 3<span>Cras
  56.      fringilla. Integer in neque. Nulla massa. Vestibulum eleifend mattis
  57.      erat</span></p></li>
  58.      <li><p>Menu 4<span>Sed bibendum vehicula sem. Donec venenatis diam eu
  59.      erat. Ut rutrum sem ut erat</span></p></li>
  60.      <li><p>Menu 5<span>Phasellus tristique,
  61.      turpis in nonummy luctuss, eros enim pellentesque felis, sed venenatis quam
  62.      orci quis nisl. Nulla id nunc. Nam porttitor volutpat erat<em>can't</em> she do?</span></p></li>
  63.      <li><p>Menu 6<span>Dernière phrase bidon !</span></p></li>
  64. </ul>
  65. </BODY>
  66. </HTML>


 
Ca marche très bien sous Firefox, pas du tout avec IE...


---------------
Hattrick : Les aléas #586351 - Stats HFR @Alltid
Reply

Marsh Posté le 09-02-2005 à 14:59:57    

C'est pas curieux, c'est une limitation de IE, comme tu peux le lire dans la MSDN :

Citation :

Sets the style of an a element when the user hovers the mouse pointer over the link.

Reply

Marsh Posté le 09-02-2005 à 15:17:33    

Et à part le Javascript y'a pas moyen de contourner ça ?

Reply

Marsh Posté le 09-02-2005 à 15:18:36    

Attendre la prochaine version d'IE :/

Reply

Marsh Posté le 09-02-2005 à 15:22:09    

lol ok. Et attendre que tous les gens y soient passés... 2012 ça devrait le faire. ;)

Reply

Marsh Posté le 09-02-2005 à 15:29:54    

FlorentG a écrit :

Attendre la prochaine version d'IE :/


dans tes rêves oui [:gilbert gosseyn]  
 
la dernière fois que j'en ai entendu parler, la dev team d'IE7 n'avait aucun intention de travailler une seule seconde sur l'implémentation des CSS [:gilbert gosseyn]  
 
Ca a peut être changé depuis, mais bon [:spamafote]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 09-02-2005 à 15:30:49    

Masklinn a écrit :

dans tes rêves oui [:gilbert gosseyn]  
 
la dernière fois que j'en ai entendu parler, la dev team d'IE7 n'avait aucun intention de travailler une seule seconde sur l'implémentation des CSS [:gilbert gosseyn]  
 
Ca a peut être changé depuis, mais bon [:spamafote]


Sisi, c'est au programme :D Y'a pleins de gens de la Team IE qui en parlent en faisant tout pleins d'allusions...

Reply

Marsh Posté le 09-02-2005 à 15:31:54    

FlorentG a écrit :

Sisi, c'est au programme :D Y'a pleins de gens de la Team IE qui en parlent en faisant tout pleins d'allusions...


il va pleuvoir des curés à bicyclette [:youpi]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 12-02-2005 à 13:55:14    

Salut :hello:
 
Le site avance bien :jap:
 
J'ai un petit problème malgré tout: si j'arrive à centrer les vignettes, je n'arrive pas à faire de même avec la grande image, celle qui apparaît quand une vignette est survolée. j'aimerais qu'elle se centre automatiquement sur la page :/

Reply

Marsh Posté le 13-02-2005 à 11:58:13    

plus personne ? :(

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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