photo cliquable

Question

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

RAD ZONE · Accepted Answer

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

gryzzly · Answer

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

RAD ZONE · Answer

loool salut gryz ;))

  ca m apprendra a pas verifier apres tidy :-)) merci

 mais etonanant que tidy est change ca ?? ou c est moi :())??

RAD

gryzzly · Answer

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)

RAD ZONE · Answer

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

RAD ZONE · Answer

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

sophie · Answer

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

ilan27 · Answer

Bonjour, je ne m'y connais pas beaucoup en js, mais je te propose ceci, à l'endroit où tu veux mettre ta grande photo: Pour chaque image-lien:

RAD ZONE · Answer

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

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

ilan27 · Answer

Ah ok, c'est joli en effet, et puis ça a l'air plus simple. :)

sophie · Answer

Bonjour, 
merci mais pourrais tu m'ecrire le code car je ne comprends pas bien quand tu dis en inline

merci

RAD ZONE · Answer

SALUT bon si on prend mon exemple comme base voila ce que tu peux faire si on veux faire simple !!!! POUR 5 IMAGES HTML

CSS seul les gras ont ete modifie !! body { background-color: #000000 } #gallery { position: relative; width: 750px; } #thumbs { width: 300px; <-------- largeurs augmente pour acceuillir 5 OU 6 : 50 px X 6 =300 : images (methode pour eviter trop de changement ) 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: 60; <-------------descente de la grande image par raport au haut de page border: 1px solid #333; } RAD

sophie · Answer

Bonjour, 
merci t'es un chef!!

coquillette64 · Answer

Bonjour, 
je commence a suivre pas a pas ce sujet mais j'avoue que je ne m'en sors pas
j'utilise dreamweaver, je fais un copier coller de ta source sur dreamweaver, je mets mes quelques photos, mais quand je fais un apercu sur explorer je retrouve seulement les petites vignettes, l'aperçu en grand ne se fait pas, que dois je faire?
merci a vous

RAD ZONE · Answer

SALUT

 ca vas marcher si tu  met aussi le css !!!

coquillette64 · Answer

Merci j'ai reussi a comprendre qu'il fallait combiner les 2!! Par contre pour votre deuxieme exemple (là ou il suffi de glisser la souris pour que l'image apparaise) Je pense que le procédé est le même, cependant je n'y arrive pas. Je me doute que je dois changer les éléments que j'ai mentionner en gras avec mes propres données, mais je ne sais pas quoi mettre à la place pour que cela fonctionne Je dois écrire mon site internet? (alors qu'il n'est pas fini) J'avou etre un peu perdue Sophie RAD ZONE

RAD ZONE · Answer

non c est une image sur un lien !

 radservebeer est le lien vers la page cible ( mon site dans cet exemple )

et

rad 2  est le chemin vers l image !

RAD

lilas · Answer

Bonjour,
je suis un peu desepérée parce que l'exemple que tu donnes est génial (photo cliquable qui s'agrandit),c'est exactement ce qu'il me faut pour mon site, mais je débute, et je ne sais pas quoi faire des fichiers que j'ai téléchargés (j'ai cherché un peu partout je ne comprends pas). Je crée mon site avec nvu . Est ce que je dois mettre tous les fichiers sur le webftp? Je te remercie d'avance, j'espère que tu pourras m'éclairer...
Lilas

RAD ZONE · Answer

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

TU PEUX EN METTRE + OU EN ENLEVE ET ET TU ADAPTE LES TAILLES ET POSITION DANS LE CSS RAD

lilas · Answer

Merci Rad!
Mais tu vas voir l'ampleur de mon ignorance : je ne trouve pas où modifier le CSS. Je ne crois pas en avoir utilisé dans mon site (nvu est bien fait mais n'explique pas les fonctionnements) alors comment est ce que je peux acceder au css?
Lilas

RAD ZONE · Answer

sur ta page fais avec nvu , en haut tu cherche ca et tu cole le code ci dessous juste devant

lilas · Answer

Super, ça marche. Mais encore une question pour poffiner le tout: je n'arrive pas à modifier les tailles des  photos (petites et grandes) Où est ce que je dois modifier la taille ?
merci encore de ton aide précieuse
Lilas

RAD ZONE · Answer

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

lilas · Answer

Mais oui bien sûr! ça y est, c''est tout bon.
Merci encore de ton aide , et bravo de donner tes recettes
à Plus
Lilas

milouche · Answer

Bonjour

Je suis partie de ton code merci beaucoup c'est tres sympa
mais ma galerie fait plusieures pages et imposible de rajouter un lien en bas de page
je suppose qu'il faut rajouter une div...mais je debute.
Merci d'avance

milouche · Answer

Bonjour

Je suis partie de ton code merci beaucoup c'est tres sympa
mais ma galerie fait plusieures pages et imposible de rajouter un lien en bas de page :s
je suppose qu'il faut rajouter une div...mais je debute.
Merci d'avance

RAD ZONE · Answer

SALUT oui tu peu rajouter une div et mettre le lien dedans ! tu la met apres la de fermeture de la

milouche · Answer

Merci beaucoup pour ton aide :)

anator · Answer

Salut RAD;

Merci pour cet exemple très clair de manipulation d'image et de css. Je me demandais juste ce qu'il faudrait modifier dans le css pour avoir une image par défaut en taille normal qui s'affiche si on ne fait aucun survol de vignette ?

Merci pour ta réponse.

anator · Answer

ha j'oubliais ! ... et que l'image disparaisse si on survole sur une vignette ?

merci :)

berr · Answer

Quelle rapidité !!!!
Merci.
Ce qui ne va pas, c'est que les images ne s'agrandissent pas et apparaissent en petit. J'ai vidé le cache mais toujours des petites images. Je ne comprends pas.

RAD ZONE · Answer

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

berr · Answer

Remerci.
Oui, j'avais lu que devait s'afficher les images dans leur taille d'origine mais même avec ton exemple, elles apparaissent en petit dans firefox et dans Ie7, pas de problème. J'ai aussi essayé de changer auto en indiquant une taille mais cela ne changer rien, elles apparaissent toujours en 50*50. Je ne comprends pas d'où vient le problème même si je ne vois que mon firefox mais pourquoi?

RAD ZONE · Answer

comment vois tu cet 

Exemple ?

RAD

berraty · Answer

Incroyable, cela fonctionne.
Je pense que je n'avais pas rafraichi depuis que j'avais vidé le cache.
En tous les cas, un immense merci pour ton aide et (surement) à bientôt car je ne suis pas encore très expérimenté et j'aurai probablement encore besoin de l'un ou l'autre conseil.
Bonne soirée et encore merci.

metal_mulisha · Answer

Bonjour RAD
Je ne suis pas fortiche en webmastering et je voudrai mettre un galerie d'image de mes réalisation dans mon site, je 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

metal_mulisha · Answer

Bonjour

Qui peut me dire  à quoi correspond   #nogo.  ?

Merci 
Chris

mim007 · Answer

Razo, super ton script, merci c'est tres sympa de partager ca ..
une question additionel pour 100 balles : t'aurais une idee de comment faire pour ajoute des captions au images grand format?
mmmmeeerci!
M.

Kristell · Answer

Je voulais juste remercier RAD !!!
Après de multiples hésitations et essais, j'ai enfin réussi à comprendre comment mettre en place une page de photographies... Je débute, mon site n'est pas encore en ligne (loin de là), mais me voici motivée pour ranger enfin mes photos !
Merci encore...

boop · Answer

un site de musique et de tchat pour ce problème de photo....Euh j'ai raté un truc

rhp · Answer

Salut Rad, mille merci pour ce super script. Il n' y a que 48 h que j'essaie de faire un site, je n'avais aucune connaisssance avant et ton script fonctionne en ligne chez moi. Certes j'ai quand meme galéré de nuit mais ca roule. Il me reste a chercher tout ce qui pourrait améliorer, genre ajouter un texte sous chaque photo lors de l'aggrandissement... en tout cas c'est super merci pour moi et tous ceux qui profitent de ton aide !

mon début de site : https://www.sfr.fr/fermeture-des-pages-perso.html#nogo

mes tofs de Guadeloupe qui seront bientot toutes sur mon site grace à toi : https://www.flickr.com/photos/rh-p/sets/333574/

amicalement

RAD ZONE · Answer

En voila une ou tu  as les textes dessous !
http://radservebeer.free.fr/demorad/zip.rar

rhp · Answer

génial ca marche tip top, je vais partir sur celui là, encore merci ! 
un message (temporaire) pour toi ici : https://www.sfr.fr/fermeture-des-pages-perso.html
ca serait sympa que tu me dise ce que je dois laisser comme lien vers ta source...je voudrais pas effacer ce qu'il ne faut pas (je débute vraiment et ne me suis pas encore penché sur la notion de réferencement ou meta). Mon fils m'aidera peut etre un peu, la notion de balise n'étant pour l'instant qu'apparentée à une bouée en mer. génial ce script, j'halucine exactement ce que je révais ! 

ca répond aux deux critères principaux à mes yeux 
rapidité compte tenu des habitudes des internautes
c'est sobre pour mettre en valeur un texte court 

super ! (ca va les chevilles)

RAD ZONE · Answer

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

RAD ZONE · Answer

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

rhp0 · Answer

trop top, merci, je suis en train d'essayer... c'est super ca va me demander du boulot mais je vais m'y mettre.

goyugo · Answer

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!

Mrpoons · Answer

Moi je voudrai savoir comment faire pour augmenter le nombre de photo par ligne svp

Photo cliquable

48 réponses

Newsletters