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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [HTML/Javascript] gallerie avec image survolée et affichage séparé

Yarok

Maschinen Krieger

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

Publicité

FlorentG

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

masklinn

í dag viðrar vel til loftárása

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

---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box by throwing away the limits imposed by overbearing genetic regulations? Isn't that a good thing?

Yarok

Maschinen Krieger

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

masklinn

í dag viðrar vel til loftárása

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)

Yarok

Maschinen Krieger

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

masklinn

í dag viðrar vel til loftárása

mmm?

Yarok

Maschinen Krieger

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

Tempus_Fugit

tempinou

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 <img src="ton_imagine" alt="grande image" />

Ensuite avec du css
.img_petite:hover .img_grande{ //lorsqu'on passe sur le <a> alors la balise 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

Yarok

Maschinen Krieger

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"?

Publicité

FlorentG

Ouais, ou alors avec un truc style float: left

Yarok

Maschinen Krieger

left? pas bottom?

FlorentG

float: bottom n'existe pas

Yarok

Maschinen Krieger

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!

masklinn

í dag viðrar vel til loftárása

Yarok a écrit :

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] :

Yarok

Maschinen Krieger

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:

Yarok

Maschinen Krieger

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

FlorentG

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

Yarok

Maschinen Krieger

ouep, j'ai le nez dedans

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

Next step: refaire une page "from scratch", et l'intégrer à ce que j'ai déjà fait de mon site

FlorentG

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

Yarok

Maschinen Krieger

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

hastings

1066

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 1Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href=rou.htm>Vivamus</a> ipsum dui, vulputate ut, eleifend pretium, tristique a, velit. Morbi lacus</a></li>
<li><a href="">Menu 2Cras (...)
[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

FlorentG

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

hastings

1066

Ah oui tiens c'est curieux...

Code :

<HTML>
<style type="text/css">
ul {
list-style-type: none;
margin:0;
padding:0;
position: absolute;
top: 2em; /* positionnement du menu, que vous pouvez changer à loisir */
left: 3em;
}
li {
float: left;
}
.menu p { /* définition de chaque bouton du menu */
width: 100px; /* largeur du bouton, que vous pouvez changer à loisir */
height: 20px;
float: left;
display: block;
text-align: center;
border: 1px solid #fff;
text-decoration: none;
color: #000;
background: #fff;
}
.menu p:hover {
color: #411;
background: #AAA;
border: 1px solid gray;
border-bottom: 0px;
color: #fff;
}
.menu p span { /* définition de la balise inclue dans <a> */
display: none;
}
.menu p:hover span { /* définition de la balise au survol */
display: block;
position: absolute;
top: 40px;
left: 0;
width: 600px; /* largeur de la zone de commentaires, selon la taille du menu */
text-align: left;
border-top: 1px solid gray;
color: #000;
}
</STYLE>
<BODY>
<ul class="menu">
<li>Menu 1Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. <a href=""rou.htm">Vivamus</a> ipsum dui, vulputate ut, eleifend pretium, tristique
a, velit. Morbi lacus</li>
<li>Menu 2Cras eu mi vel pede
tempus dignissim. Etiam malesuada scelerisque massa. Maecenas metus sem,
consectetuer
quis, rhoncus non, euismod id, elit</li>
<li>Menu 3Cras
fringilla. Integer in neque. Nulla massa. Vestibulum eleifend mattis
erat</li>
<li>Menu 4Sed bibendum vehicula sem. Donec venenatis diam eu
erat. Ut rutrum sem ut erat</li>
<li>Menu 5Phasellus tristique,
turpis in nonummy luctuss, eros enim pellentesque felis, sed venenatis quam
orci quis nisl. Nulla id nunc. Nam porttitor volutpat eratcan't she do?</li>
<li>Menu 6Dernière phrase bidon !</li>
</ul>
</BODY>
</HTML>

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

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

FlorentG

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.

hastings

1066

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

FlorentG

Attendre la prochaine version d'IE

hastings

1066

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

masklinn

í dag viðrar vel til loftárása

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

Ca a peut être changé depuis, mais bon [:spamafote]

FlorentG

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

masklinn

í dag viðrar vel til loftárása

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 [:youpi]

Yarok

Maschinen Krieger

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

Yarok

Maschinen Krieger

plus personne ?

Publicité

FORUM HardWare.fr

Programmation

HTML/CSS

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

Sujets relatifs
Modifier le type d'un élément de formulaire en javascript	[Résolu] Pb dans mon code javascript
Javascript: objet qui FUIT la souris	Controle ASP.NET et javascript ?
incorporer de la videos dans une pages html	probleme d'affichage urgent svp
Problème PHP/Javascript	Affichage des coordonnées de la souris
Plus de sujets relatifs à : [HTML/Javascript] gallerie avec image survolée et affichage séparé

Page générée en 0.176 secondes