Bonjour à tous!  
 
J'ai une page html, avec deux images superposées image1 et image2. image1 au début ne possède pas d'attribut src car je la veut transparente. Suivant le clic sur l'une des petites photos présentes sur image2 je souhaite que image1 apparaisse avec la petite photo.  
 
J'ai essayé de caché image1 tant qu'on a pas cliqué sur une photo(ce qui complique la chose c'est que les photos ne sont pas des liens <a> mais des <area> )
 
Voici le code javascript
 
function visibilite(thingId)
{
var targetElement;
targetElement = document.getElementById(thingId) ;
if (targetElement.style.display == "none" )
{
targetElement.style.display = "" ;
} else {
targetElement.style.display = "none" ;
}
}
 
voici la partie html
 
<div id="id_div_1" style="display:none;">
 
<img id="zoneimage" src="" style="display:block; position:absolute; left:220px; top:99px; width:500px; height:300px; z-index:1; " width="137" height="132" onclick="javascript:visibilite('id_div'_1); return false;">
 
</div>
 
mais ça ne fonctionne pas. image1 est invisible mais un clic sur une photo ne le rend pas visible.
Ensuite j'essaie de faire l'opération inverse, au début image 1 est visible et un click sur lui même doit le rendre invisible.
 
J'ai cherché partout mais les autres utillisent des liens pour conditions du genre
 
<a href="javascript:cacheId('contenu');">Fermer</a>
 
mais ça ne correspond pas à mon travail.
 
S.O.S  
 
Merci pour votre attention

oops j ai lu trop vite
tu fais un onclick sur une image qui n existe pas
donc tu ne pourras jamais capter le onclick dessus

fais plutot un switch sur opacity que sur display
genre au depart ton image est a opacité:0
comme ca elle prend la bonne taille et tu peux capter l evenement onclick
et la tu fous l opacity a 1

Merci pour ton aide c'est sympa  
finalement j'ai opté pour une image transparente que j'ai crée sous photoshop j'ai mis un onclick dans ma balise img  
 
<img id="image1" src="./image1.jpg" alt="photo1"  style="width:93px; height:69px;" onclick="javascript:ouvreimage1()">
 
un problème persiste cela ne fonctionne pas sous ie :-(
 
Re SOS lol
 
Merci pour votre aide

un jpg transparent hein?
fais voir le js

En faite c'est un .gif; Le code javascript est  
 
function ouvreimage1() {
       // ouvre l'image sur le premier plan de la page à partir du click sur une des photos dans le bandeau
       onclick = document.getElementById('zoneimage').innerHTML='<img src="image1.jpg"  />';
       
       }  
 
La partie html:
 
-de la photo qui est le lien pour changer transparent.gif en image1.jpg dans image1
 
<img id="image1" src="./image1.jpg" title="image 1"  style="width:93px; height:69px;" onclick="ouvreimage1();return false;">
 
- de l'image1
 
<img id="zoneimage" src=" " style="display:block; position:absolute; left:220px; top:121px; width:500px; height:300px; z-index:1; "  onclick="javascript:transparent()">
 
voilà
 
Merci.

ok c est un peu n importe quoi tout ca
ta fonction ouvreImage se lance deja sur un onclick donc pas besoin de le preciser dans ta fonction surtout que ca ne se lance pas du tout comme ca
si tu fais onclick = blabla;
javascript attend de blabla que ce soit une reference a une fonction
la tu essaies de foutre une fonction inline...ca fait deux = sur la meme ligne ca plante
et ca pointe vers aucun objet connu de ton script ca replante
et si jamais ca avait fonctionné ca aurait lancé le onclick sur l objet window (donc en cliquant n importe ou sur ta page)  ...
et un petit dernier pour la route: tu fais un innerHTML sur une image donc ca rereplante

function ouvreimage1() {
       // ouvre l'image sur le premier plan de la page à partir du click sur une des photos dans le bandeau
       document.getElementById('zoneimage').src="image1.jpg";
       
       }

ca devrait aller beaucoup mieux comme ca
 
sinon j ai toujours pas compris ce que tu veux fire et y a peut etre plus simple... un petit schema?

Désolé dans la précipitation j'ai mal expliqué. J'ai "image 2" en background de ma page html, sur le head: des photos sur une bande en petite taille dans une div, puis sous cette div une image1 toujours sur image2 qui conctient l'image en grand de la petite photo sur laquelle on a cliqué. En cliquant à nouveau sur la zone image grandie cela renvoie une image transparent.gif afin que l'utilisateur revoie le background.
 
<div id="conteneur" style="position:absolute; ">
   
    <!-- les images du bandeau -->
    <div style="display:block; position:absolute; left:112px; top:30px; z-index:1; width:760px; height:69px;">
   
    <img id="image1" src="./image1.jpg" title="photo1"  style="width:93px; height:69px;" onclick="ouvre_image('zoneimage','image1.jpg')">&nbsp;&nbsp;&nbsp;
    <img id="image2" src="./image1.jpg" title="photo1"  style="width:93px; height:69px;" onclick="ouvre_image('zoneimage','image2.jpg')">&nbsp;&nbsp;
    <img id="image3" src="./image3.jpg" title="photo 3"  style="width:93px; height:69px;" onclick="ouvre_image('zoneimage','image3.jpg')">&nbsp;&nbsp;
   
    </div>
 
<!-- définition de la zone image où celles ci s'ouvriront en grand -->
    <img id="zoneimage" src=" " style="display:block; position:absolute; left:220px; top:121px; width:500px; height:300px; z-index:1; "  onclick="javascript:transparent()">
 
  <--le background-image -->
   
    <img src="./test.jpg" usemap="#map" alt="Site CMRS" border=0 />
    </div>
 
Les fonctions javascript sont dans un fichier externe dont le lien est dans le head et les voici:
 
function ouvre_image(image, photo)
{
document.getElementById(image).innerHTML='<img src="'+photo+'" alt="photo"/>';
}
 
function transparent()
{                            
    // ouvre l'image transparent
    onclick = document.getElementById('zoneimage').innerHTML='<img src="transparent.jpg"  />';                            
}    
 
Tout est nickel sous firefox mais  rien ne répond sous ie, c'est la néant.
 
Merci pour ta patience.

j ai pas encore tout compris mais ca me semble desastreux
ton image en background c est test.jpg?
pourquoi une map ?
 
mais en gros vla une petite page de test

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
    <head> 
        <title></title> 
        <style> 
            #gallery {background:url(test.jpg);} 
            #gallery div img {width:93px;height:69px;} 
            #target {width:500px;height:300px;visibility:hidden;} 
        </style> 
        <script> 
            onload = function() { 
                var thumbs = document.getElementById('gallery').getElementsByTagName('img'); 
                var target = document.getElementById('target'); 
                for(var i=0;i<thumbs.length;i++) { 
                    thumbs[i].onclick = function() { 
                        target.src = this.src; 
                        target.style.visibility = "visible"; 
                    } 
                } 
                target.onclick = function() { 
                    target.style.visibility = "hidden"; 
                } 
            } 
        </script> 
    </head> 
    <body> 
        <div id="gallery"> 
            <div> 
                <img src="image1.jpg"> 
                <img src="image2.jpg"> 
                <img src="image3.jpg"> 
            </div> 
            <img id="target" src="image1.jpg"> 
        </div> 
    </body> 
</html>

Merci 1000 fois c'est ce que je cherchai!!! :-)
Je l'ai adapté à mon code et ça fonctionne
c'est nickel!
C'est vrai que ton exemple ne donne pas quelque chose de très esthétique lol mais moi, je ne fais que répondre à la demande; lol ;-)
 
MERCI encore.
 
P.S: si ça te gêne vraiment pas pourrais tu me commenter le code stp?
 
@+

loul le coté esthetique c est un peu ton job quand meme
c est juste quelques lignes de css ca devrait pas etre trop compliqué
le script lui fonctionne tout seul tu peux rajouter dix images ca marchera tout aussi bien
et le javascript commenté (en esperant que le reste n ait pas besoinde l etre)

onload = function() {
                // on identifie la cible
                var target = document.getElementById('target');
                
                // on choppe toutes les vignettes
                var thumbs = document.getElementById('gallery').getElementsByTagName('img');
                for(var i=0;i<thumbs.length;i++) {
                    // pour chacune des vignettes on associe un evenement  onclick
                    thumbs[i].onclick = function() {
                        // on remplace la source de la cible par celle de l imge sur laquelle on vient de cliquer
                        target.src = this.src;
                        
                        // on rend la cible visible
                        target.style.visibility = "visible";
                    }
                }
                
                // quand on clique sur la cible on la cache
                target.onclick = function() {
                    target.style.visibility = "hidden";
                }
            }