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
Bonjour,
merci mais pourrais tu m'ecrire le code car je ne comprends pas bien quand tu dis en inline
merci
merci mais pourrais tu m'ecrire le code car je ne comprends pas bien quand tu dis en inline
merci
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 !!
RAD
bon si on prend mon exemple comme base voila ce que tu peux faire si on veux faire simple !!!!
POUR 5 IMAGES
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250" />
<meta name="generator" content="PSPad editor, www.pspad.com" />
<title>
</title>
<link rel="stylesheet" type="text/css" href="photo_simple.css" />
</head>
<body>
<div id="gallery">
<em id="thumbs">
<a href="#nogo">
<img src="1_images.jpg" title="" alt="" /></a>
<a href="#nogo">
<img src="2_images.jpg" title="" alt="" /></a>
<a href="#nogo">
<img src="3_images.jpg" title="" alt="" /></a>
<a href="#nogo">
<img src="4_images.jpg" title="" alt="" /></a>
<a href="#nogo">
<img src="5_images.jpg" title="" alt="" /></a>
</em>
</div>
</body>
</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
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
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
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250" />
<meta name="generator" content="PSPad editor, www.pspad.com" />
<title>
</title>
<link rel="stylesheet" type="text/css" href="imagelinkhover.css" />
</head>
<body>
<a class="screen" href="http:radservebeer.free.fr"> RAD ZONE
<b>
<img src="http://rad2.free.fr//Formulaire_Free/images/avatar/3567.gif" alt="website image"width="200" height="150" title="website image" /></b></a>
</body>
</html>
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250" />
<meta name="generator" content="PSPad editor, www.pspad.com" />
<title>
</title>
<link rel="stylesheet" type="text/css" href="imagelinkhover.css" />
</head>
<body>
<a class="screen" href="http:radservebeer.free.fr"> RAD ZONE
<b>
<img src="http://rad2.free.fr//Formulaire_Free/images/avatar/3567.gif" alt="website image"width="200" height="150" title="website image" /></b></a>
</body>
</html>
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
radservebeer est le lien vers la page cible ( mon site dans cet exemple )
et
rad 2 est le chemin vers l image !
RAD
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
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
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
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
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
merci encore de ton aide précieuse
Lilas
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
Merci encore de ton aide , et bravo de donner tes recettes
à Plus
Lilas
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
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
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
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
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.
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.
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.
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.
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?
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?
comment vois tu cet
Exemple ?
RAD
Exemple ?
RAD
salut
j'ai lu avec attention et fait comme sur les postes mais tous marche a merveille sur internet explo masi sous firefox non
les image s'affiche en grand et non en petit sur le firefox d'autre pc cela ne marche pas non plus
merci de m'aider si tu le veut amicalement claude
http://photopassion80.ifrance.com/ merci d'y jeter un oeil je suis a la ramasse lolll
j'ai lu avec attention et fait comme sur les postes mais tous marche a merveille sur internet explo masi sous firefox non
les image s'affiche en grand et non en petit sur le firefox d'autre pc cela ne marche pas non plus
merci de m'aider si tu le veut amicalement claude
http://photopassion80.ifrance.com/ merci d'y jeter un oeil je suis a la ramasse lolll
OU ??
je ne vois pas cette galery sur ton site ?? donne le lien vers cette page !!
EDIT
C a y est j ai trouve !!
1 tu vas deja corriger le lien vers le CSS
RAD
je ne vois pas cette galery sur ton site ?? donne le lien vers cette page !!
EDIT
C a y est j ai trouve !!
1 tu vas deja corriger le lien vers le CSS
<link rel="stylesheet" type="text/css" href="file:///C|/Users/Administrateur/Downloads/effectcss/photo_simple.css" />CE LIEN MENE A TON PC ET PAS VERS LE CSS EN LIGNE
RAD
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.
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.
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
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
