Sujet Précédent Sujet Suivant

Photo cliquable

potopoto -  
RAD ZONE Messages postés 5362 Statut Contributeur -
bonjour,

je cherche à mettre dans une page une mosaïque de vignettes et quand la souris passe dessus, je boudrais que la photo apparaisse en grand sur un côté de ma page.
Si quelqu'un peut m'aider.
meri d'avance
Configuration: Windows XP
Internet Explorer 6.0
A voir également:

48 réponses

  • 1
  • 2
  • 3
Résumé de la discussion

La demande porte sur la réalisation d'une mosaïque de vignettes où, au survol de chaque image, une photo agrandie s'affiche sur le côté de la page. Plusieurs réponses proposent d'utiliser le CSS pour afficher l'image agrandie en marge via un effet hover, en plaçant une zone galerie et en déplaçant ou affichant l'image complète au passage de la souris. Des conseils évoquent aussi l'utilisation d'un élément div séparé sous la gallery, l'optimisation du poids des images et l'ajout d'un comportement actif sur clic pour verrouiller l'image choisie.

Généré automatiquement par IA
sur la base des meilleures réponses
Réponse 1 / 48
RAD ZONE Messages postés 5362 Statut Contributeur 1 360
 
SALUT

si c est cela que tu veux ICI

telecharge mon exemple ICI et adapte le a ton site

ps: il y as 3 exemples dans le .rar les 2 autres exemples n ont rien a voir avec ce que tu veux :-))

RAD
6
metal_mulisha
 
Bonjour RAD
Je ne suis pas fortiche en webmastering et je voudrai mettre un galerie d'image de mes réalisation dans mon site, ej suis allés download ton codage(http://radservebeer.free.fr/tuto/css.alsacreations.com/effectcss/photo_simple.htm mais là j'y perds mon latin, c trop compliqué pour moi, peux tu me donner un coup de pouce? Merci
Chris
0
malou48
 
Bonjour rad zone

je débute dans un blog , je fais des photos et je souhaiterais fair ela presentation dont tu as mis l'exemple une vignette qui s'aggrandit quand on passe dessus . peux tu m'aider en me donnant les infos necessaires , le logiciel que tu utilises? merci beaucoup. je ne comprends rien , enfin du moins pas grand chose.
0
anneso
 
Bonsoir,
je fabrique un petit site avec des travaux à présenter; et donc une petite galerie avec des vignettes qui s'agrandissent. Ton code me plait beaucoup. Est ce que c'est possible de faire la même chose au "clic" plutôt qu'au survol de la vignette (sans javascript et php) ?
Et bien merci s'y réponse s'en suit...
0
versoph
 
Merci pour le conseil c'est très sympa de communiquer son "savoir" bonne continuation et MOULT MERCI again
0
versoph
 
Salut rad,
J’ai simplement essayé « photo cliquable » pour voir ce que cela donnait, mais ne l’ai pas utilisé pour un site, si jamais je le fais je t’enverrai immédiatement un lien, c’était pour te remercier de communiquer ta « science » au quidam....
0
Réponse 2 / 48
goyugo
 
Salut,
1) pour qu'il y ai toujours une image (la première par exemple ou même une toute autre) il faut ajouter au début un #default dans le css et la déterminer dans le html

2) pour que tes images restent figées quand tu cliques dessus il faut rajouter dans les css un comportement pour l'ensemble #galerie ul li a:active b, #galerie ul li a:focus b {
position:ce que tu as deja mis
right ou left:ce que tu as deja mis
top:ce que tu as deja mis
width:ce que tu as deja mis
height:ce que tu as deja mis
text-align:ce que tu as deja mis
background:ce que tu as deja mis
z-index:40; afin qu'elles ne bougent plus tant que tu n'auras pas cliqué sur une autre.
Tu me diras si ceci t'as aidé
Bonne chance. Très belles tes images!
3
rhp0 Messages postés 7 Statut Membre
 
Bonsoir, je ne pouvais pas répondre plus tôt (boulot) mais tes conseils m'ont hanté toute la journée...
à priori c'est ta deuxième proposition qui correspond le plus à mes attetes mais je galère pour fignoler. ca fonctionne quand meme seules les tailles et emplacements me posent probleme.


merci pour le com sur les img ainsi que pour le coup de pouce (je fais mes essais sur https://www.sfr.fr/fermeture-des-pages-perso.html

après faut que je m'interroge sur la pertinence de faire des liens vers des url (vignette 1) et de faire 150 pages ou de rester sur une seule ... ???

encore un weekend chargé qui s'annonce

et encore merci de ton aide
0
hihi
 
Bonjour
Je voudrai savoir comment faire pour augmenter le nombre de photo par ligne svp
Merci d'avance
0
Enzo
 
Une petite question qui arrive en retard dans ce topic : ta propriété "z-index" fonctionne-t'elle sous css3 sachant que c'est une propriété de la version antérieure ?
0
RAD ZONE Messages postés 5362 Statut Contributeur 1 360
 
bien sur z-index ne pose aucun probleme different en CSS3 ,de ceux qu il posait sur IE en CSS2 !

un exemple qui pose probleme sur certain navigateur , mais pas au niveau du z-index !

a+
0
irongege Messages postés 38993 Date d'inscription   Statut Modérateur Dernière intervention   5 127
 
Hors sujet : merci Rad zone pour ton site, très utile
0
Réponse 3 / 48
RAD ZONE Messages postés 5362 Statut Contributeur 1 360
 
En voila une ou tu as les textes dessous !
http://radservebeer.free.fr/demorad/zip.rar
2
Réponse 4 / 48
RAD ZONE Messages postés 5362 Statut Contributeur 1 360
 
;-)) merci pour le verre :-))

tu remplace le titre par le titre de ta page et c est bon !

il faut aussi que tu optimise tes images en poids ! , si elles sont trops lourdes !

3 liens pour le faire online ,

https://www.sitereportcard.com

http://tools.dynamicdrive.com/imageoptimizer/index.php

http://www.imageoptimizer.net/Pages/Home.aspx

2
rhp
 
merci encore ... j'ai pas encore regardé les outils de compression (mais j'enregistre les liens) j'ai préféré avancer sur ton script. Concernant les tofs, pour l'instant je met des liens vers flickr où elles sont déjà stockées dans plusieurs formats, donc je ne pense pas que ca pèse, ca a l'air fluide, même si je crois qu' il ne s'agit que d'une soluce transitoire et qu'il faudra bien que je passe par une integration au site.

Ca marche super pour l'instant ca répond trés bien à mes espoirs, bravo
0
rhp
 
Salut Rad, c'est vraiment une belle source.

j'abuse mais peut être existe t-il une soluce pour
1/ soit que l'affichage ne se fasse que sur clic (j'ai essayé onclick sans résultat)
2/ soit que l'affichage se fasse tel quel mais que le clic renvoie sur une autre url

Je ne cache pas que le but est un peu interressé et tu le comprendra en voyant la proximité des pubs.
je sais c'est pas bien du tout de compter sur l'erreur de click, j'ai d'autant plus honte que ton aide est gratuite et dénuée d'intéressement, mais tu comprendras en voyant les photos que j'ai hate d'y retourner...

en tout cas c'est super tu verras l'avancée qui t'es entièrement due (et mon gamin de 15 ans pour quelques réglages html) : https://www.sfr.fr/fermeture-des-pages-perso.html

bonne soirée
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 48
RAD ZONE Messages postés 5362 Statut Contributeur 1 360
 
/ soit que l'affichage se fasse tel quel mais que le clic renvoie sur une autre url

ca c est tres facile !

tu met des url a la place des #nogo 
<a href="#nogo">
2
rhp0 Messages postés 7 Statut Membre
 
ouais je sais j'exagere mais le rhum aidant je me suis dit que peut être mon insistance passerait inapercue...
en fait ce qui me perurbe c'est que lorsque l'on sort des zones "<a href=" l'image disparait laissant une vaste plage sans élément.
est il envisageable de figer la dernière action jusqu'a la suivante de facon à ce que la derniere image sur laquelle on soit passé reste apparente jusqu'a l'intervention du "<a href" suivant ??? en gros que ca reste affiché quand la souris est sur le fond noir.

NB : mon fils m'a donné l'adresse de W3c et ton script ne comporte aucune erreur chez moi (ce qui n'est pas du tout le cas des scripts "komposer" de ma page d'accueil ...et des futures pages annexes)



rhp0.perso.neuf.fr, toutes mes images de guadeloupe
0
Réponse 6 / 48
RAD ZONE Messages postés 5362 Statut Contributeur 1 360
 
SALUT

tu ajoute ca a ton css
#gallery {
	position: relative;
	width: 750px;
}
#thumbs {
	width: 180px;
	float: left;
}
#thumbs a {
	display: block;
	float: right;
	margin: 0 0 5px 5px;
	width: 50px;
	height: 50px;
	border: 1px solid #000;
}
#thumbs a img {
	width: 50px;
	height: 50px;
	border: 0;
}
#thumbs a:hover {
	border-color: #ddd;
}
#thumbs a:hover img {
	position: absolute;
	width: auto;
	height: auto;
	left: 185px;
	top: 0;
	border: 1px solid #333;
}


et dans ton html
<div id="gallery">
      <em id="thumbs">
        <a href="#nogo">
          <img src="URL DE TON IMAGE" title="" alt="" /></a>
        <a href="#nogo">
          <img src="URL DE TON IMAGE" title="" alt="" /></a>
        <a href="#nogo">
          <img src="URL DE TON IMAGE" title="" alt="" /></a>
        <a href="#nogo">

          <img src="URL DE TON IMAGE" title="" alt="" /></a>
        <a href="#nogo">
          <img src="URL DE TON IMAGE" title="" alt="" /></a>
        <a href="#nogo">
          <img src="URL DE TON IMAGE" title="" alt="" /></a>
        <a href="#nogo">
          <img src="URL DE TON IMAGE" title="" alt="" /></a>
        <a href="#nogo">
          <img src="URL DE TON IMAGE" title="" alt="" /></a>

        <a href="#nogo">
          <img src="URL DE TON IMAGE" title="" alt="" /></a>
        <a href="#nogo">
          <img src="URL DE TON IMAGE" title="" alt="" /></a>
        <a href="#nogo">
          <img src="URL DE TON IMAGE" title="" alt="" /></a>
        <a href="#nogo">
          <img src="URL DE TON IMAGE" title="" alt="" /></a>
        <a href="#nogo">

          <img src="URL DE TON IMAGE" title="" alt="" /></a>
        <a href="#nogo">
          <img src="URL DE TON IMAGE" title="" alt="" /></a>
        <a href="#nogo">
          <img src="URL DE TON IMAGE" title="" alt="" /></a>
        <a href="#nogo">
          <img src="URL DE TON IMAGE" title="" alt="" /></a>
        <a href="#nogo">
          <img src="URL DE TON IMAGE" title="" alt="" /></a>

        <a href="#nogo">
          <img src="URL DE TON IMAGE" title="" alt="" /></a>
      </em>
    </div>


TU PEUX EN METTRE + OU EN ENLEVE

ET
ET TU ADAPTE LES TAILLES ET POSITION DANS LE CSS

RAD
1
montignac
 
Bonjour,
Après des jours de recherche, j'ai trouvé vos explications qui correspondent exactement à ce que je recherchais.
Mais après avoir tout lu, du moins je le pense, avoir suivi vos explications à la lettre, le résultat sous Internet n'est pas concluant.
Je développe ave KOMPOZER, et après sauvegarde d'une page, lorsque je visualise avec le Navigateur (INTERNET IE7), le resultat est conforme à mon attente. Mais lorsque après avoir transféré sur mon site mes differnets fichiers, j'obtiens un tableau, mis pas de photos, qui son remplacées par une croix rouge et les IMG.
Ais-je oublié quelque chose.
L'adresse de mon site est : http://home.tele2.fr/art-et-creation

Merci à vous si vous pouvez eclairer ma lanterne.
0
boop
 
Bonjour,
Je viens de lire la réponse pour Lilas, moi aussi je travaille avec Nvu mais j'ai dû louper un étape. Ma page galerie est déjà faite (http://dansesophieberra.free.fr) mais j'aimerais dons maintenant que mes vignettes s'agrandissent au passage de la souris.Le code a ajouté au CSS c'est dans la page source de Nvu et le code dans mon html c'est la même page source? Je pêche grave sur ce coup là.Peux tu me ré-expliquer où chaque code doit être mis.Une fois que j'aurais fait ça je dois mettre toutes les URL de mes photos une par une?
Merci d'avance de ton aide
betty boop
0
Julien > boop
 
Bonsoir,
pour Nvu, je ne m'y connais pas trop. Mais apparemment, si j'ai bien compris, la page source correspond à ton code html. Ta CSS, tu dois la créer dans un fichier CSS (outil, éditer une CSS..).
Bonne chance!
Julien
0
Julien
 
Bonsoir,

et merci Rad pour ton modèle de galerie avec mosaïque de vignette. J'ai tenté de reprendre ton modèle et ça marche bien sur Firefox.
Sur IE, j'ai encore un souci avec le hover, mais je vais bien arriver à contourner cette fâcheuse bizarrerie.

Cependant, pour répondre aux internautes qui ont encore du bas débit (et souhaitent garder ce type de connexion), j'aimerais installer des vignettes de taille réduite (sans réduction de taille automatique donc) et ne faire apparaître les images normales qu'à la demande. En gros donc, ce serait une galerie similaire à la tienne, mais avec deux docs image (image1.jpg et image1mini.jpg, image2.jpg etc) pour un téléchargement plus rapide des vignettes. Merci pour les conseils de tous,
Julien
0
Réponse 7 / 48
RAD ZONE Messages postés 5362 Statut Contributeur 1 360
 
sur ta page fais avec nvu , en haut tu cherche ca </head> et tu cole le code ci dessous juste devant 

<style type="text/css">
#gallery {
	position: relative;
	width: 750px;
}
#thumbs {
	width: 180px;
	float: left;
}
#thumbs a {
	display: block;
	float: right;
	margin: 0 0 5px 5px;
	width: 50px;
	height: 50px;
	border: 1px solid #000;
}
#thumbs a img {
	width: 50px;
	height: 50px;
	border: 0;
}
#thumbs a:hover {
	border-color: #ddd;
}
#thumbs a:hover img {
	position: absolute;
	width: auto;
	height: auto;
	left: 185px;
	top: 0;
	border: 1px solid #333;
}
</style>

</head>
1
Réponse 8 / 48
RAD ZONE Messages postés 5362 Statut Contributeur 1 360
 
les grandes sont a leurs taille d origine !!
les petites c est la 
#thumbs a {
	display: block;
	float: right;
	margin: 0 0 5px 5px;
	width: 50px; <-----------------------------------
	height: 50px;<----------------------------------
	border: 1px solid #000;
}
#thumbs a img {
	width: 50px;<----------------------------------
	height: 50px;<-------------------------------
	border: 0;
}
1
Réponse 9 / 48
RAD ZONE Messages postés 5362 Statut Contributeur 1 360
 
SALUT

oui tu peu rajouter une div et mettre le lien dedans ! tu la met apres la </div> de fermeture de la <div id="gallery >

et il sera sous la galery !!
;-))

RAD
1
berr
 
Merci beaucoup pour vos exemples et conseils.
Votre exemple (images cliquables) ne fonctionne pas sous Firefox, est-ce normal ou moi qui ai loupé quelque chose?
Merc d'avance pour votre réponse.
0
berr
 
Merci beaucoup pour vos exemples et conseils.
Votre exemple (images cliquables) ne fonctionne pas sous Firefox, est-ce normal ou moi qui ai loupé quelque chose?
Merc d'avance pour votre réponse.
0
RAD ZONE Messages postés 5362 Statut Contributeur 1 360 > berr
 
SALUT

tu as dus louper quelque chose ;-)) cela fonctionne tout navigateurs !

vide le cache de firefox et reeseaye

RAD
0
Réponse 10 / 48
milouche Messages postés 3 Statut Membre 1
 
Merci beaucoup pour ton aide :)
1
Réponse 11 / 48
RAD ZONE Messages postés 5362 Statut Contributeur 1 360
 
Ce qui ne va pas, c'est que les images ne s'agrandissent pas et apparaissent en petit

quelle est la taille de tes images ? car si tu laisse la taille en auto pour le thumbs a:hover img dans le CSS

tu obtiend la taille d origine de la photo ! 
#thumbs a:hover img {
	position: absolute;
	width: auto;
	height: auto;
	left: 185px;
	top: 0;
	border: 1px solid #333;
}


si c est cela le probleme ? je te conseil de redimensionner l image , plutot que de changer la taille qui risque de pixeliser ton image

RAD
1
Réponse 12 / 48
gryzzly Messages postés 5220 Date d'inscription   Statut Contributeur Dernière intervention   1 340
 
Salut,

dslé pour le hors sujet... Rad : revois tes caractères accentués dans tes tutos = codage iso8859 au lieu de utf8 dans les metas d'entete ;-)
0
Réponse 13 / 48
RAD ZONE Messages postés 5362 Statut Contributeur 1 360
 
loool salut gryz ;))

ca m apprendra a pas verifier apres tidy :-)) merci

mais etonanant que tidy est change ca ?? ou c est moi :())??

RAD
0
Réponse 14 / 48
gryzzly Messages postés 5220 Date d'inscription   Statut Contributeur Dernière intervention   1 340
 
aucune idée, je connais pas tidy... seulement de nom depuis le temps que tu le rabaches ici :-D
mais j'opte plutot pour la solution : TOI héhé... meme si c'est tidy qui fait ca, c'est parce que tu l'as configuré ainsi (ou mal configuré.. voire pas configuré)

enfin, j'dis ca, j'dis rien...

courage (en meme temps, y'a pas grand chose à modifier)
0
Réponse 15 / 48
RAD ZONE Messages postés 5362 Statut Contributeur 1 360
 
oui une petite erreur de config ;-)) sur tidy (dont je suis en train de faire une version .exe francaise )
c est change sur le site mais il vas faloir que je regarde les autres tuto :-((

Merci
0
sophie
 
bonjour Radzone
j'ai téléchargé ton exemple 'photo simple' impec marche super, par contre sur la colonne de gauche lorsqu'on passe la souris sur une des vignettes, ça décale 2 vignettes vers le bas, surton exemple aussi, est ce possible de corriger cela?
autre question, comment changer la taille des vignettes?

merci d'avance
sophie
0
Réponse 16 / 48
RAD ZONE Messages postés 5362 Statut Contributeur 1 360
 
SALUT

pour retirer le decalage des images sur internet explorer ( cela ne le fais que sur explorer)!

il suffit d enlever la "border" 1px! et pour agrandir les vignettes ,tu change leurs taille comme ici je les aient passees a 80px 

#thumbs a {
	display: block;
	float: right;
	margin: 0 0 5px 5px;
	width: 80px;
	height: 80px;
  <--------------------------- supression de cette ligne (border: 1px solid #000;)
}
#thumbs a img {
	width: 80px;
	height: 80px;
	border: 0;
}


RAD
0
sophie
 
salut, je dois etre bigleuse, je ne vois pas ces lignes dans le code html???
0
sophie > sophie
 
ca y est excuses moi
c parfait merci bq
0
Réponse 17 / 48
sophie
 
Bonjour,
c'est encore moi!!
je voudrais utiliser ton exemple sur une page que j'ai deja cree mais comment modifier ton fichier pour avoir 4 ou 5 miniatures en bas à l'horizontale et la photo qui apparaisse au dessus???

merci d'avance
0
Réponse 18 / 48
ilan27 Messages postés 395 Statut Membre 36
 
Bonjour,
je ne m'y connais pas beaucoup en js, mais je te propose ceci, à l'endroit où tu veux mettre ta grande photo:

<script language="javascript">
<!--
function newimg(var){
document.write("<img src='"+var+"' border='0'>");
}
//-->
</script>
Pour chaque image-lien: <a onClick="javascript: newimg(...le nom de l'image qui va suivre...);"><img...ta vignette></a>
0
Réponse 19 / 48
RAD ZONE Messages postés 5362 Statut Contributeur 1 360
 
SALUT ILAN

non il parle d un de mes exemple en pur CSS CELUI LA

il faut que tu modifis cela dans le CSS en positionant la <div id="gallery"> ou tu veux qu elle soit !!

il faut aussi prevoir le passage des thumbs en inline !! mais je t annonce il y as du boulot !!!!

RAD
0
Réponse 20 / 48
ilan27 Messages postés 395 Statut Membre 36
 
Ah ok, c'est joli en effet, et puis ça a l'air plus simple. :)
0
  • 1
  • 2
  • 3

Discussions similaires

Retrouver l'image originale d'une photo modifiée
Raven -
Asta972155 -

10 réponses
Comment recadrer une image avec Inkscape
infofeet -
TELLIEZ -

13 réponses
Faire passer du texte SOUS une image HTML / CSS
Mihai -
animostab -

2 réponses