JavaScript : InnerHTML et argument..

Bonjour!

Je suis actuellement en train de programmer un site contenant plusieurs galeries, et j'ai décidé de me lancer dans le Js (que j'ai abordé qqs fois auparavant, sans vraiment m'y plonger totalement). Afin de créer une galerie dynamique, qui ne nécessite pas de refresh de la page à chaque image, j'ai décidé de séparer ma page en deux blocs : le premier étant une sorte de galerie de thumbnails, et le second étant un cadre affichant l'image.

Ce que je tente de faire, c'est d'éviter d'avoir à recharger la page à chaque fois qu'on change d'image (ça évite également d'avoir à créer une page HTML par image). Je voudrais donc utiliser un onClick sur chaque thumbnail, onClick renvoyant sur une fonction Js globale ordonnant d'afficher l'image dans l'autre cadre. Il me faut donc un argument à chaque thumbnail (normal) correspondant à chaque image.

Voilà le bout de code qui pose souci (j'explique le problème après) :

<script language="javascript" type="text/javascript">
function image(numero)
{document.getElementById('image_affichee').innerHTML = "<img src='./images/" + numero + ".jpg'>" ;}
</script>

<div id="image_affichee">(rien pour l'instant!)</div>
<div id="thumbnail" onclick="image(001)">

Normalement, ça devrait m'afficher, dans le div "image_affichee", un joli <img src='./images/001.jpg'>, ce qui m'afficherait une belle image. J'ai testé la fonction avec un texte tout bête, en n'utilisant aucun argument, et en mettant simplement un innerHTML = "koukou" et ça marchait. Je pense que ça vient de la syntaxe de "<img src='./images/" + numero + ".jpg'>", mais même après moult recherches, je n'ai pas trouvé comment afficher un argument en plein milieu d'un innerHTML.. pourtant il me semblait avoir déjà vu ça..

J'espère avoir été assez précis (et pas trop long à lire ), et merci d'avance pour votre aide.

Bonne journée!
Modifié par Madounet (01 Dec 2009 - 16:50)

Ton code a l'air correcte à première vu.
Le problème viens peut être de ça : "image(001)"
Car quand en programmation (ça vaut en php et je crois ne javascript) on met un 0 devant un nombre ça veut dire que c'est un nombre en octal. Dans cette hypothèse, ça se transforme en 0x01. Enfin autre chose que ton "001".
Alors essaye "image('001')"

Et sinon y'a ça : http://www.google.com/search?q=jquery+slideshow

Ou alors ce tutoriel maison:
http://www.alsacreations.com/tuto/lire/719-galerie-images-simple-jquery.html

Je jette un coup d'oeil au tuto, ça m'a l'air bien sympa et peut-être carrément plus pratique que mon code fait maison (à l'arrache, quoi).

En fait, pour le 001, j'ai pris mes précautions car j'ai environ 50 images par galerie (et je préfère garder le même nombre de caractères quelquesoit le nombre..) mais je vais essayer sans zéro et je verrai ce que ça donne.

Je vous donne des nouvelles depuis le bureau demain.

Merci pour vos réponses!
Modifié par Madounet (03 Dec 2009 - 15:30)

Bon, en tout cas, sans les zéros en trop, ça marche nickel! C'est déjà un soulagement pour moi. L'affichage dynamique était le point-clé à atteindre dans la création du site. Merci pour votre aide.

Pour le tutoriel, je ne sais pas si je vais l'utiliser. En effet, mon code est déjà mis en forme (couleurs, images, code propre etc.) et je suis en retard sur mon tableau d'avancement. Mais le code que j'ai maintenant devrait suffire pour ce que j'ai à faire.

Encore merci, et longue vie à Alsacréations!