Afficher des images dans une page....

[narishma]

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]

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]

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]

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=&quot;http://mon_url_de_site/ma_photo1.jpg" name=show>

A testé

Portekoi

[Perrine]

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]

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]

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]

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]

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]

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]

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