Bonjour,

J'ai utilisé le code du tutorial "Galerie photo avec JavaScript", impeccable cela fonctionne parfaitement.
Je souhaitais aller un peu plus loin mais mes connaissances en javascript sont assez limitées... Smiley bawling

Je souhaitais en fait rajouter un lien different sur la grande photo suivant laquelle des petites vignettes a été cliqué...

// JavaScript Document
function displayPics() 
{ 
    var photos = document.getElementById('galerie_mini') ; 
    // On récupère l'élément ayant pour id galerie_mini 

    var liens = photos.getElementsByTagName('a') ; 
    // On récupère dans une variable tous les liens contenu dans galerie_mini 

    var big_photo = document.getElementById('big_pict') ; 
    // Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale
	
    var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ; 
    // Et enfin le titre de la photo de taille normale 
	
    var liens_photo = document.getElementById('photo').getElementsByTagName('a') ;
    // je recupere ici le lien qui est sur la grande image


    // Une boucle parcourant l'ensemble des liens contenu dans galerie_mini 
    for (var i = 0 ; i < liens.length ; ++i) { 
        // Au clique sur ces liens  
        liens[i].onclick = function() { 
        big_photo.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien 
        big_photo.alt = this.title; // On change son titre 
        titre_photo.firstChild.nodeValue = this.title; // On change le texte de titre de la photo
	switch(big_photo.alt){
               case ("titre de la photo 1") : liens_photo.href = "liens1" ;
               case ("titre de la photo 2") : liens_photo.href = "liens2" ;
               case ("titre de la photo 3") : liens_photo.href = "liens3" ;
               ....
        }
	return false; // Et pour finir on inhibe l'action réelle du lien 
        }; 
    } 
} 
window.onload = displayPics; 
// Il ne reste plus qu'à appeler notre fonction au chargement de la page 
        


Dans ce code j'ai tenté les different cas avec le switch mais ca ne fonctionne pas...

Quelqu'un pourrait m'aider ?
Merci d'avance Smiley smile [/i]
Bon j'ai trouver la solution pour que le lien existe et qu'il change suivant la petite vignette qui a été cliqué ! voilà le code JS :


function displayPics() 
{ 
    var photos = document.getElementById('galerie_mini') ; 
    // On récupère l'élément ayant pour id galerie_mini 
    var liens = photos.getElementsByTagName('a') ; 
    // On récupère dans une variable tous les liens contenu dans galerie_mini 
    var big_photo = document.getElementById('big_pict') ; 
    // Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale
	
    //var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ; 
    // Et enfin le titre de la photo de taille normale 
	
	var liens_photo = document.getElementById('hlbigphoto') ;
	
    // Une boucle parcourant l'ensemble des liens contenu dans galerie_mini 
    for (var i = 0 ; i < liens.length ; ++i) { 
        // Au clique sur ces liens  
        liens[i].onclick = function() { 
            big_photo.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien 
            big_photo.alt = this.title; // On change son titre 
            //titre_photo.firstChild.nodeValue = this.title; // On change le texte de titre de la photo
			switch (this.title) {
				case ('Photo Commerciale') : 
					liens_photo.href = 'liens1' ;
					break ;
				case ('Photo Technique 1' ) : 
					liens_photo.href = 'liens2' ;
					break ;
				case ('Photo Technique 2' )  :
					liens_photo.href = 'liens3' ;
					break ;
				case ('Photo Portee' ) : 
					liens_photo.href = 'liens4' ;
					break;
				default : 
					liens_photo.href = 'liens1' ;
					break;
			}
            return false; // Et pour finir on inhibe l'action réelle du lien 
        }; 
    } 
} 
window.onload = displayPics; 


Par contre ce que je voulais faire une fois la grande photo affiché, c'est passer la souris dessus pour voir s'afficher à coté un zoom de la photo..
Je pense être sur la bonne voie, j'ai utilisé jquery.

Cependant le zoom fonctionne qd la page vient de se charger mais des que je clique sur une des petites vignette et que je passe la souris sur la grande photo le zoom n'apparaît plus... le pointeur de la souris change bien en "cible" mais rien d'autre...

voilà mon code,
d'abord dans le head :

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jqzoom.pack.1.0.1.js" type="text/javascript"></script>

<link rel="stylesheet" href="jqzoom.css" type="text/css">
<script type="text/javascript">
$(document).ready(function(){
    var options = {
    zoomWidth: 160,
    zoomHeight: 229,
    xOffset: 100,
    yOffset: 0,
    position: "right" // OPTIONS ..
    };
    $('.jqzoom').jqzoom(options);
});
</script>


puis dans le body au sein de ma balise galerie :


<div id="galerie"> 
    <dl id="photo"> 
	<dd><a href="<% Response.Write(url_img_prod_grde & cls_utile.img_replace(ref_stk) & ".jpg") %>" [#darkred]class="jqzoom"[/#] id="hlbigphoto" title="MYTITLE" ><img src="<%=url_img_com%>" id="big_pict" alt="taille normale" title="MYTITLE" /></a></dd>
					</dl>
					<ul id="galerie_mini"> 
						<li><a href="<%=url_img_com%>" title="Photo Commerciale"><img src="<%=url_img_com%>" alt="titre de la photo 1" width="37" height="50" /></a></li>
						<li><a href="<%=url_img_tech1%>" title="Photo Technique 1"><img src="<%=url_img_tech1%>" alt="titre de la photo 2" width="37" height="50" /></a></li> 
						<li><a href="<%=url_img_tech2%>" title="Photo Technique 2"><img src="<%=url_img_tech2%>" alt="titre de la photo 3" width="37" height="50" /></a></li> 
						<li><a href="<%=url_img_port%>" title="Photo Portee"><img src="<%=url_img_port%>" alt="titre de la photo 4" width="37" height="50" /></a></li> 
					</ul> 
				</div>



Je ne sais comment modifier le javascript pour que le zoom fonctionne qq soit l'image affichée après le clic sur une petite vignette...

Merci d'avance ![/i]