gallerie avec image survolée et affichage séparé [HTML/Javascript] - HTML/CSS - Programmation
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
En gros lorsque tu survoles la minitature, ça change la source de l'image version grande...
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...
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... |
Fonctionne nickel chez moi, je viens de re-tester (et c'est pas le cache)
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?
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
Marsh Posté le 08-02-2005 à 15:41:42
Merci
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"?
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!
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
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
À 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 :
Marsh Posté le 08-02-2005 à 20:11:20
Masklinn a écrit : bien sûr que oui .....[explication] |
rôh mortel mille mercis! je vais étudier ça de plus près demain trop fort!!
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
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?
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
Marsh Posté le 09-02-2005 à 09:13:03
ouep, j'ai le nez dedans
je l'ai modifié de cette manière:
#gallery { |
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
Next step: refaire une page "from scratch", et l'intégrer à ce que j'ai déjà fait de mon site
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
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
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 ?
Marsh Posté le 09-02-2005 à 14:41:53
Toutes les balises gèrent la pseudo-classes hover. Sauf sous Internet Explorer
Marsh Posté le 09-02-2005 à 14:57:17
Ah oui tiens c'est curieux...
Code :
|
Ca marche très bien sous Firefox, pas du tout avec IE...
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. |
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.
Marsh Posté le 09-02-2005 à 15:29:54
FlorentG a écrit : Attendre la prochaine version d'IE |
dans tes rêves oui
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
Ca a peut être changé depuis, mais bon
Marsh Posté le 09-02-2005 à 15:30:49
Masklinn a écrit : dans tes rêves oui |
Sisi, c'est au programme Y'a pleins de gens de la Team IE qui en parlent en faisant tout pleins d'allusions...
Marsh Posté le 09-02-2005 à 15:31:54
FlorentG a écrit : Sisi, c'est au programme 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
Marsh Posté le 12-02-2005 à 13:55:14
Salut
Le site avance bien
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
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