Photo cliquable
potopoto
-
RAD ZONE Messages postés 5230 Date d'inscription Statut Contributeur Dernière intervention -
RAD ZONE Messages postés 5230 Date d'inscription Statut Contributeur Dernière intervention -
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
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
A voir également:
- Image cliquable html
- Editeur html - Télécharger - HTML
- Image iso - Guide
- Acronis true image - Télécharger - Sauvegarde
- Reduire taille image - Guide
- Légender une image - Guide
48 réponses
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!
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!
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
à 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
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+
un exemple qui pose probleme sur certain navigateur , mais pas au niveau du z-index !
a+
;-)) 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
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
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
Ca marche super pour l'instant ca répond trés bien à mes espoirs, bravo
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
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
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
/ 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
ca c est tres facile !
tu met des url a la place des #nogo
<a href="#nogo">
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
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
SALUT
tu ajoute ca a ton css
et dans ton html
TU PEUX EN METTRE + OU EN ENLEVE
ET
ET TU ADAPTE LES TAILLES ET POSITION DANS LE CSS
RAD
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
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.
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.
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
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
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
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
sur ta page fais avec nvu , en haut tu cherche ca </head> et tu cole le code ci dessous juste devant
</head>
<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>
les grandes sont a leurs taille d origine !!
les petites c est la
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;
}
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
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
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 !
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
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
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 ;-)
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 ;-)
loool salut gryz ;))
ca m apprendra a pas verifier apres tidy :-)) merci
mais etonanant que tidy est change ca ?? ou c est moi :())??
RAD
ca m apprendra a pas verifier apres tidy :-)) merci
mais etonanant que tidy est change ca ?? ou c est moi :())??
RAD
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)
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)
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
c est change sur le site mais il vas faloir que je regarde les autres tuto :-((
Merci
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
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
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
RAD
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
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
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
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>
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>
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
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
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
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.
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...
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....