Intégrer un script "Swap Image" dans une mise en page CSS ?

Bonjour,

je vous contacte pour avoir vos avis avisés par rapport à un problème que j'ai. J'ai une galerie d'images avec des miniatures d'un côté, et l'image agrandie de l'autre. J'aimerais que quand on survole la miniature, la photo correspondante en taille normale apparait de l'autre coté.

Pour ce faire, j'ai trouvé dans Dreamweaver le comportement "swap image" qui correspond parfaitement à ce que je recherche. Mais le problème c'est que je comprends le fonctionnement de ce script quand la mise en page est faite avec des tableaux, mais pas quand c'est uniqement en CSS...

Dans le cas du site que je suis occupé à faire, mes miniatures sont insérées dans une table, mais l'image agrandie est dans une <div>.

Il y a-t-il moyen de positionner l'endroit où s'affiche l'image de taille normale? (un peu comme on positionne une boite en css). Existe-t-il une astuce entierement en CSS ou plus simple que le "swap image"? merci d'éclairer ma lanterne.

Bien à vous,

Ante


ps: voici l'url de la page ou ma galerie se trouve :

http://www.cedzone.net/jr/travaux.html
Modifié par Ante (13 Mar 2006 - 17:09)

Bonjour,

Avec clic et JS, il y a ce tuto d'Olivier: Galerie photo avec JavaScript.

Faire une zone reactive image map en CSS et l'exemple avec zoom (je crois que c'est pas exactement celui-là que je cherchais mais je n'arrive pas à retrouver le vieux tuto de Raphael ....

Felipe

EDIT: sympathiques images
Modifié par Felipe (13 Mar 2006 - 17:55)

Merci pour la réponse aussi rapide!

Je vais essayer d'adapter le tuto à mon code. Je vous tiens au courant.

Ante

Me revoila deja avec un problème. Dans l'exemple du tuto l'auteur travail avec une div globale qui englobe la liste des miniatures et une autre pour la grande image (liens parents-enfants direct). Dans mon cas (cf.code), il n'y a pas de liens directs. Ma div "zoneGdePhoto" se trouve séparée des miniatures (dans une table).

<div id="zoneGdePhoto"></div>
<div id="zoneMini">
    <div id="titre_galerie"></div>
	<table class="table_galerie">
	  <tr>
	    <td id="td1">
		<div class="pic">
		   <a href="#" title=""><img   src="images/travaux/mini/arbre01.jpg" alt="" /></a>
		</div>
		<div class="pic">
		  <a href="#" title=""><img src="images/travaux/mini/caribou03.jpg" alt="" /></a>
		</div>.....	

Je n'arrive pas a arranger le JS en fonction de ca. Pour rechercher les miniatures, le JS utilise 'getElementById', sans succès. J'ai essayé en utilisant un 'getElementByName' mais sans succès aussi... Je précise que je ne suis pas fortiche en JS. Le script est-il adaptable à ma structure de site?

Voila la structure du JS disponible sur ce site:

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

	// 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
			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

D'avance merci pour vos tuyaux.

Ante [/i]
Modifié par Ante (13 Mar 2006 - 18:57)