Salut

Je suis entrain de creer mon site web pour exposer des photos et je voudrais réaliser une présentation de ce style:
http://jr-art.net

En faite je voudrais avoir une grande image centré sur mon bloc corps, avec les petites images en dessous, et lorsque l'on clique sur une autre des petites images, ca change la grande image et affiche celle sur laquelle on a cliqué. Comme dans l'exemple montré.. mais je voudrais que toutes les petites images soient sur la meme page (en plusieurs ligne).

Chaque chose en son temps (je sais je vais trop vite ) mais autant tout vous demander! Si c'est possible de mettre une fleche sur la droite pour passer d'une image a l'autre une fois tout réaliser!

On m'as dis que c'était avec du javascript que je pourrait faire ca!
Est-ce que vous pourriez m'aider pour les codes s'il-vous plais?

Merci de votre attention

Une flèche à coté de la grande image, qui change la grande image donc?

(edit) sinon dans l'absolu c'est possible et plutot simple

(edit²) débutant en javascript je suppose?

oui voila! mais le plus important c'est plutot de faire aparaitre mes image quand je clique sur celle-ci (comme sur le site en exemple dans mon premier exemple) sans avoir dix mille pages..
Ma ptite fleche j'imagine qu'elle sera la en dernier une fois que j'aurais installer toute mes petites image.. mais je sais pas comment faire :s


Oui débutante en tout c'est mon deuxieme site .. mais j'ai déja mis du javascript pour mon menu déroulant :happy:

Alors, pour le principe, déjà : tu affiches une image en grand, puis de petites images dessous (la mise en page, c'est de l'html et css).
Sur tes petites images, tu mets un lien qui appelle une fonction javascript. Celle-ci va modifier l'attribut "src" de la grande image (en clair, ça va changer l'image affichée).

Mise en place :
1. Une image affichée de base, sur laquelle tu mets un id (ceci servira à repérer cette image en javascript) :

<img src="imagedebase.jpg" id="image_to_change" />

2. Des petites images, sur lesquelles tu mets un lien appelant une fonction javascript :

<a href="javascript:switchImage('imageaafficher.jpg');"><img src="adresseduneminiature.jpg" /></a>

Ces liens appellent donc la fonction switchImage en lui passant en paramètre l'adresse de l'image à afficher. Voyons donc, à présent, cette fonction switchImage :

function switchImage(src_to_display){
	var image_to_change = document.getElementById('image_to_change');
	image_to_change.src = src_to_display;
}

Explication :
1. On commence par repérer l'image dont on doit changer l'adresse, grâce à son id, via la fonction getElementById()
2. On change l'attribut src de cette image par le paramètre qui a été passé à la fonction

Voilà, la partie js est fonctionnelle
Après cela, la mise en page (pour afficher joliment la grande image et les petites dessous), c'est du xHTML et CSS, je ne sais pas si tu maitrises cela, mais si ce n'est pas le cas les tutoriels sur le sujet t'apprendront tout le nécessaire.

Olala merci beaucoup !!!

Je vais tester tout ca ce week-end ( il se fait tard ) Mais tu m'as bien expliqué je pense y arriver! Et sinon je reviendrais vous ennuyer avec mes questions de débutante
Il va etre super mon site je suis trop contente !

Merci encore bonne soirée

je suppose que t'as l'intention d'apprendre alors je vais pas te filer le code tout fait mais pas loin.

Déjà, les images, tu as des miniatures et une version grand format de cette image? ou tu affiches juste la grande image en tout petit?

pour le html on va partir sur une base commune, ça sera plus simple

<div class="un truc"><img id="grande_image" src="image_par_defaut.png"></div>

<ul>
    <li><img src="img1.png"></li>
    <li><img src="img2.png"></li>
    <!-- 
    et autant que tu veux, je te conseille un petit 
    display:inline sur les <li> pour ce que tu veux
    -->
</ul>

Ensuite pour afficher l'image au click, il faut que tu fasses en sorte que lorsque tu click sur une miniature, tu envoie la valeur de src à la grande image. (edit) putaaaaiiin grilled (/edit)

sinon le <a> n'est pas nécessaire je trouve, et surtout le javscript:machin() c'est franchement mauvais. un simple <img src="" onclick="afficher(this.src);"> est beaucoup plus clair…

(edit²) l'avantge avec ma technique c'est que t'as pas a changer la valeur de l'url pour chaque image, c'est automagique.

Citation : nod_

sinon le <a> n'est pas nécessaire je trouve, et surtout le javscript:machin() c'est franchement mauvais. un simple <code type="javascript"><img src="" onclick="afficher(this.src);"></minicode> est beaucoup plus clair…

Bon déjà, le javascript: dans le href, ce n'est pas mauvais en soi (j'ai . C'est pas très conseillé parce que cela pose problème si la fonction possède un return, mais ça s'arrête là.
Par contre, dans une vision plus globale, il est mauvais parce qu'il implique de n'avoir aucune alternative noscript, et ça c'est pas top, donc le href devrait effectivement être réservé à un vrai lien servant à faire une alternative.

Je me suis quand même permis de le faire ici pour deux raisons :
1. Introduire la notion d'alternative noscript aurait impliqué de savoir faire une alternative en PHP, et cela ne semble pas faire partie des connaissances de l'auteur du post
2. Utiliser le return false aurait impliqué des explications technique sur ce qu'est un "return" et pourquoi ça bloque le lien... encore une fois, j'aurais pu le faire, mais j'ai préféré m'adapter à ce qui est compréhensible pour une vraie débutante

Mais s'entêter à vouloir supprimer les javascript: pour du onclick sans expliquer le fonctionnement de l'alternative noscript et sans exploiter le href ne me semble pas très utile.

A part ça, une autre chose importante : mettre le onclick sur la miniature, c'est bien, mais tout seul, ce n'est pas très intuitif. Il faut penser à changer en CSS le curseur lors du survol de l'image, pour que l'utilisateur comprenne qu'il peut peut/doit cliquer dessus (c'est évidemment inutile si la miniature est dans un lien, le changement se fait tout seul).

Merci aussi pour ta réponse nod_

De toute facon vu que je suis nulle (non pas nulle.. débutante!) je vais essayer tout donc en faite je reviendrais surement vous voir !
Mais j'espere y arriver avec vos techniques !

Bonne nuit

j'ai pas mis de <a> pas besoin d'expliquer les subtilités puisque c'est pas utile à la base.

les crawlers rigolent en voyant le lien avec javascript:, bye bye l'accessibilité et y'a plus simple… vouloir s'entêter a utiliser un <a> pour une action qui aurait plus sa place dans un <button> c'est ce qui me semble pas très utile à moi.

Citation : nod_

les crawlers rigolent en voyant le lien avec javascript:, bye bye l'accessibilité

Pour faire du code convivial pour les crawlers, ou encore vraiment accessible, il faut plutôt miser sur une alternative noscript que l'absence de lien, dans ce cas.

une gallerie d'image accessible aux aveugles? ça va, je rigole.

Pour faire accessible, il faut un lien, avec une vraie url qui change effectivement la grande image et un onclick qui fait le reste du travail. <noscript> c'est un signe de mauvaise conception.

Quand je parle d'une "alternative noscript", j'entendais bien évidemment un moyen d'utiliser sans javascript via le href (me semblait que mes posts étaient clairs sur ce point), pas d'une balise noscript

Ensuite, on pourrait disserter sur "Une personne voyant assez bien pour voir une grande image mais trop mal pour voir les liens sur une page s'ils ne sont pas mis en évidence par un navigateur fait pour", ou encore "Une personne ayant un handicap et navigant sur la page en passant de lien en lien avec la touche tab, qui ne s'arrête pas sur les objets avec un onclick mais que sur les <a>" [exemples non fictifs ^^], mais je crois que l'on perdrait un peu de vue le but de ce post, qui est d'afficher une grande image en affichant une petite (c'est d'ailleurs pour cela que j'avais fourni un code minimaliste demandant le moins d'explications possibles, sans this ni nécessité de changer le curseur en css, mais là finalement, on en est à beaucoup d'explications difficilement compréhensibles pour cette pauvre Caro34 ).

Je suggère donc que l'on attende le retour des tests de cette dernière et qu'on l'aide simplement à faire quelque chose qui fonctionne

soyons fous! (mais le <button> done le focus clavier nécessaire).

attendons

Salut !

Alors j'ai essayé ce que vous m'avez dis mais ca ne marche pas..
J'ai dabord fais la mise en page (ma grande photo centré et des petites images en-dessous) puis j'ai ajouté les codes.

Pour le code javascript je l'ai mis dans ma page HTML entouré de "<!--" et "-->" c'est peut-etre la ou ca coince? faut-il que je crée une page javascript?

ou alors je me suis trompé quelque part dans le code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  
<head>
    <title>Site perso de Claire</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" media="screen" type="text/css" title="style1" href="CSS.css" />
	<script type="text/javascript">
<!--
function switchImage (src_to_display) {
       var image_to_change = document.getElementById('Image_to_change');
	   image_to_change.src = src_to_display;
-->
</script>




<div id="corps">

<h2>Ses Photos</h2></br>

 <img src="im1.jpg" class= "grande" id= "image_to_change"/><br /><br />

 
 <a href="javascript:switchImage ('im1.jpg');"><img src="im1.jpg" class= "petite"/></a>
 <a href="javascript:switchImage ('im2.jpg');"><img src="im2.jpg" class= "petite"/></a>
 <a href="javascript:switchImage ('im3.jpg');"><img src="im3.jpg" class= "petite"/></a>
</div>

#corps .grande
{
   width: 500px;
   margin-left: 85px;   
}

#corps .petite
{
   width: 100px;
   margin-left: 5px;
}

Merci de votre aide

Cela ne marche pas car il y a deux erreurs dans ton code.

Premièrement, tu ne fermes pas l'accolade après ta fonction, tu dois rajouter un } à la fin du javascript :

<script type="text/javascript">
<!--
function switchImage (src_to_display) {
       var image_to_change = document.getElementById('Image_to_change');
	   image_to_change.src = src_to_display;
}
-->
</script>

Deuxièmement, le javascript est sensible à la casse. Cela signifie qu'il distingue les majuscules des minuscules. Sur ton image, tu as mis l'id "image_to_change", mais sans ton code tu as écrit document.getElementById('Image_to_change'), avec une majuscule. Tu as juste à corriger cette ligne en enlevant la majuscule :

var image_to_change = document.getElementById('image_to_change');

Pour débuguer du javascript ainsi, je te conseille un excellent plugin pour firefox : firebug. Il indique les erreurs de ce genre dans ton code grâce à une console.
Edit : Effectivement, merci Zoro-zerO

Elias : edite "firebuf" en firebug, erreur de frappe je supose

Merci Elias !
J'ai corriger mes erreurs mais ca marche toujours pas