Commande Onclick agrandir image + afficher du texte

bonjour à tous
je souhaite réaliser une gallery photos ainsi
les photos sont sur la page en petite taille. je click sur une photo et elle s'agrandit à un emplacement précis. Simultanément; déclenché par le même click un texte (10 lignes env.) apparait à un autre emplacement défini pour commenter cette image. on prend le temps de voir, de lire....puis si on click sur autre image elle remplace la première et idem pour le texte...
je n'y arrive pas, j'ai besoin de votre aide
voici le code du fichier de travail

Cordialement Pharen

<script langage="javascript">
function agrandir(im){
document.getElementById("image").src = im
}
function afficheTexte(classe de l'emplacement) {
document.getElementById("id1").style.display="none";
document.getElementById("id2").style.display="none";
document.getElementById("id3").style.display="none";
document.getElementById("id4").style.display="none";
document.getElementById("idn").style.display="none";
document.getElementById(classe de l'emplacement).style.display="block";
}
</script>

<IMG id="image" HEIGHT = "200" WIDTH = "150" SRC = "visuel_1.jpg">
<div>
<img width="60" height="40" src="visuel_1.jpg" title="Maison S Paris" onclick="agrandir(this.src)";"afficheTexte('id1')">
<img width="60" height="40" src="visuel_2.jpg" title=" mon oncle" onclick="agrandir(this.src)";"afficheTexte('id2')">
<img width="60" height="40" src="visuel_3.jpg" onclick="agrandir(this.src)""afficheTexte('id3')">

</div>

<div id="id1"><h1>Pafjohdgoqrhgeorgheorghqodfhqodrgheorghrghqeporighqprhqppqqp !</h1>
</div>
<div id="id2"><h1>Pammmmmmm!</h1>
</div>
<div id="id3"><h1>Pllllppppp!</h1>
</div>

<style>
div
{
position : absolute;
left : 600px;
}
h1 {
color: #b3b3b3;
text-align: center;
font-family: Arial,"Arial Black","Times New Roman",Times,serif;
}
</style>

bonjour
j'ai fait une source facile a comprendre et qui fait ce que tu cherche

ici le lien

salut,

tu peux aussi t'inspirer de ça:

Travailler avec des calques

L.

pas glop !

Merci à vous deux, je vais prendre le temps d'explorer vos suggestions
fondamentalement le petit diaporama marche mais dès que j'ajoute ;afficheText plus rien . j'avais vu le diapo de kazma, mais je n'avais pas vu qu'il offrait cette possibilité de 2 "évenements " pour un seul click !! bon c'est samedi....j'vais faire la heu! non, du java !!! je vous dis si j'y arrive
cordialement
Pharen

bonjour,
oui je crois bien pouvoir trouver la solution à travers vos suggestions mais je voulais voir avec vous ceci:

<script langage="javascript">
function agrandir(im){
document.getElementById("image").src = im}
</script>

<div id="gallery">
<em id="thumbs">
<a href="#">
<span><h2>titre1</h2>le texte explicatif</span>
<img src="visuel_1.jpg" alt="1" title="photo_simple.css"/>

<a href="#">
<span><h2>titre2</h2>le texte explicatif</span>
<img src="visuel_2.jpg" alt="2" title="photo_simple.css" /></a>

<a href="#">
<span><h2>titre3</h2>le texte explicatif</span>
<img src="visuel_3.jpg" alt="3" title="photo_simple.css" /></a>

</em>
</div>

C'est simple et correspond à mon attente à un (gros) détail près: je ne sais pas le faire déclenché par le click mais qu'en "passant dessus" du coup si le pointeur ne reste pas sur l'image en petite taille l'agrandissement de cette image et le texte explicatif disparaissent. avantage dès qu'on est sur la petite image suivante le texte et agrandissement de la n°1 disparaisse pour faire place à la N°2. inconvénient ça n'est pas très pratique à l'usage, ça oblige à veiller de ne pas déplacer le pointeur pendant la lecture. Connaissez vous un moyen simple pour que le déclenchement se fasse avec le click et non le "passe dessus" ? ?

bien cordialement

Pharen

re,

il manque le principal ...

le code qui declanche la fonction agrandir
.

++

L.


pas glop !