narishma Posté 18 Octobre 2005 Posté 18 Octobre 2005 Bonjour! Je ne sais pas si je suis dans la bonne section, j'espère qu'on pourra me répondre. Voilà ce que je voudrais faire, je n'ai aucune idée de comment m'y prendre.: Je voudrais faire une page web avec en haut, une série d'icones (des images de taille réduite) et je voudrais que quand on clique sur l'une de ces icones, l'image s'affiche en grand en dessous. Dois-je utiliser des frames ou autre chose? Comment faire pour que cela soit le moins compliqué possible afin que je puisse faire plusieurs pages avec ce système sans que ça ne me prenne un temps fou Merci d'avance. Narishma
jeanpierre949 Posté 18 Octobre 2005 Posté 18 Octobre 2005 Bonjour. tu as la methode des include en php qui est certainement la plus simple hormis les frames html mais qui sont fortement deconseillées
narishma Posté 18 Octobre 2005 Auteur Posté 18 Octobre 2005 Merci pour ta réponse! Mais comment faire alors pour utiliser les includes? Dois-je faire une page par image? Quel code mettre pour que lorsque je clique sur une icone, l'image correspondante s'affiche en dessous sans faire une page complète?
Portekoi Posté 18 Octobre 2005 Posté 18 Octobre 2005 Bonjour, Je suis une bille en javascript et certans feront surement mieux que moi. Dans ton Head, rajoute ceci : <script language=JavaScript> function Image(chemin) { document.images.show.src = chemin; } </script> Ensuite, pour les liens, tu fais comme ceci <a href="#" onclick="Image('http://mon_url_de_site/ma_photo1.jpg');"> mon lien </a> <a href="#" onclick="Image('http://mon_url_de_site/ma_photo2.jpg');"> mon lien </a> Et l'image : <img src="http://mon_url_de_site/ma_photo1.jpg" name=show> A testé Portekoi
Perrine Posté 18 Octobre 2005 Posté 18 Octobre 2005 Salut Narishma Je suis tombée récemment sur un article de A List Apart qui fera surement ton bonheur : JavaScript Image Gallery Bonne chance
thierryf Posté 18 Octobre 2005 Posté 18 Octobre 2005 En fait, plusieurs solutions s'offrent à toi. A mon avis, si tu dois présenter plusieurs série de photos dans cet esprit, le mieux est un script en PHP qui affiche une page contenant 2 cadres (frame), l'un affiche le menu avec tes vignettes, l'autre la photo selectionnée en taille normale. Mais j'avoue que c'est un peu compliqué à mettre en place. Une autre méthode, que je trouve assez simple, consiste à utiliser une balises <iframe> pour l'affichage de la photo en taille normale. J'ai fait ça pour cette page http://www.hernan-gazmuri.com/galerie_tableaux.htm voici la parie du code que tu peux utiliser <iframe name="cover" scrolling="no" src="galerie-gazmuri/pages/page-1.htm" height="280px" width="480px" frameborder="0"></iframe> <p>Cliquez sur l'une des vignettes ci-dessus pour afficher le tableau</p> <div id="galerie"><a href="galerie-gazmuri/pages/page-1.htm" target="cover" onFocus="this.blur()"><img src="galerie-gazmuri/vignettes/DIA_0002.jpg" width="30" height="40"></a> <a href="galerie-gazmuri/pages/page-2.htm" target="cover" onFocus="this.blur()"><img src="galerie-gazmuri/vignettes/DIA_0003.jpg" width="30" height="23"></a> <a href="galerie-gazmuri/pages/page-3.htm" target="cover" onFocus="this.blur()"><img src="galerie-gazmuri/vignettes/DIA_0013.jpg" width="30" height="37"></a> <a href="galerie-gazmuri/pages/page-4.htm" target="cover" onFocus="this.blur()"><img src="galerie-gazmuri/vignettes/DIA_0014.jpg" width="30" height="34"></a> <a href="galerie-gazmuri/pages/page-5.htm" target="cover" onFocus="this.blur()"><img src="galerie-gazmuri/vignettes/DIA_0025.jpg" width="30" height="38"></a> <a href="galerie-gazmuri/pages/page-6.htm" target="cover" onFocus="this.blur()"><img src="galerie-gazmuri/vignettes/DIA_0026.jpg" width="30" height="38"></a> <a href="galerie-gazmuri/pages/page-7.htm" target="cover" onFocus="this.blur()"><img src="galerie-gazmuri/vignettes/DIA_0030.jpg" width="30" height="36"></a> <a href="galerie-gazmuri/pages/page-8.htm" target="cover" onFocus="this.blur()"><img src="galerie-gazmuri/vignettes/DIA_0034.jpg" width="30" height="37"></a> <a href="galerie-gazmuri/pages/page-9.htm" target="cover" onFocus="this.blur()"><img src="galerie-gazmuri/vignettes/DIA_0038.jpg" width="30" height="22"></a> <a href="galerie-gazmuri/pages/page-10.htm" target="cover" onFocus="this.blur()"><img src="galerie-gazmuri/vignettes/DIA_0043.jpg" width="30" height="39"></a> <a href="galerie-gazmuri/pages/page-11.htm" target="cover" onFocus="this.blur()"><img src="galerie-gazmuri/vignettes/DIA_0044.jpg" width="30" height="42"></a> Tu dois évidememnt changer quelques parametres et créer des pages html normales (elles s'appellent "page-n" dans mon exemple) qui affichent chacune de tes images.
narishma Posté 18 Octobre 2005 Auteur Posté 18 Octobre 2005 Je vous remercie tous pour vos gentilles réponses. C'est vraiment très sympa de votre part d'avoir pris le temps de me répondre. Je vais étudier tout ça de plus près mais c'est clair que ça va bien m'aider. Merci encore! C'est rare de trouver des forums si sympa Narishma
narishma Posté 18 Octobre 2005 Auteur Posté 18 Octobre 2005 Merci beaucoup, Thierry! Ca marche super ta méthode! Je vais prendre celle là car c'est celle qui sera la plus rapide pour moi. Si je mets directement le nom de l'image, je n'ai même pas à créer de page html avec l'image dessus. Je suis bien contente Un gros merci à tout le monde!!!!! Narishma
denti Posté 18 Octobre 2005 Posté 18 Octobre 2005 Tu as aussi la solution d'utiliser picasa. ( offert par google ) Il te fait ça tout seul et avec des pages en pur html. Choisis "dossier" et "exporter sous forme d'une page web". Un exemple sur mon site: h*tp://perso.wanadoo.fr/locporticcio/ports-corse/cpa-ports.html Tu peux bidouiller dans les templates ( dommage que ce soit en anglais ) pour ajouter du code html. Moi j'adore
Le_Phoenix Posté 19 Octobre 2005 Posté 19 Octobre 2005 Bonjour, J'avais trouvé un petit truc sympa en CSS au survol de l'image au lieu d'afficher une légende, tu affiche une image avec du texte. en plus des que tu enléve le pointeur de l'image, elle disparait, une sécurité de + pour ne pas se les faire copier. Je joins le code que j'ai utilisé, peut être pas le top, a améliorer. il faut juste faire autant de code "photo" que d'image (photo1+tout le code, photo2+ tout le code, etc...) dans le CSS. Y a peut être plus simple, a voir HTML : <a href=""><span><img src="design/ta_grande_image"><br>texte</span><img src="design/ta_petite_image" class="photo1" alt="texte" /></a> CSS : a img { border: none; /* Suppression de la bordure d'image */ } /* image zoom au survol debut*/ a span { display: none; } a:hover span { display: inline; position: absolute; top: 0px; /*position de l'image en hauteur*/ left: 0px; /*position de l'image a partir du bord gauche*/ width: 0px; /*largeur de l'image*/ height: 0px;/*hauteur de l'image*/ background: #B1E939; text-align: center; color: black; border: dotted; } /*image zoom au survol fin*/ .photo1 /* Affichage image */ { float: right; /*alignement à droite*/ margin-right: 5px; /* placement droit dans le bloc */ margin-top: 10px; /* placement haut dans le bloc */ border: 0; } Voilà, sinon recherche "image zoom" en CSS pour plus de détails. Cordialement. P.S. : je ne suis pas un pro et il y a peut être des erreurs. voir aussi s'il fonctionne avec tous les navigateurs.
narishma Posté 19 Octobre 2005 Auteur Posté 19 Octobre 2005 Merci! Vous m'avez tous proposé des solutions qui marchaient, c'est sympa de votre part! Il y a beaucoup de possibilités pour arriver à faire ce que je voulais. Et moi qui n'en voyait pas! Narishma
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant