18073 sujets

Questions générales et questions de débutants

Galerie image

bonjour a tous
voila si qq un povais m aidé
je veux placé en petit format plusieur images cote a cote et au dessu des autre et quand je survolle avec la sourir ben que l image pleine grandeur s affiche

j ai essaye avec le code image rollover mais ca ne donne pas re resultat que je cherche

mon roll over ok ca fontionne mais l image est de la meme taille et si je donne une taille a mon image qui dit apparaitre ben la le roll over se fait avant que j arrive sur ma petite image

merci si un de vous peux m aidé a vrais dire ca fait au moin une semaine que je bosse ladessu merci
Réal
Bonsoir,

Cela est bien possible de deux manières différentes :
1. JavaScript : 

<!-- DEBUT DU SCRIPT -->
<SCRIPT LANGUAGE="JavaScript">
/*
SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT
 http://www.editeurjavascript.com
 
*/
/******
DEFINITION DES VARIABLE DU SCRIPT
******/
nb_photo_ligne = 3;
numero_photo = 1;

/******
ENREGISTREMENT DES PHOTOS
******/
ejs_vignet = new Array;
ejs_des = new Array;
ejs_big = new Array;

var HazMess=new Array();
	ejs_des[0]= 'description1'
	ejs_vignet[0]= 'vignette1.gif'
	ejs_big[0]= 'image1.png'
	ejs_des[1]= 'description2'
	ejs_vignet[1]= 'vignette2.gif'
	ejs_big[1]= 'image2.png'
	ejs_des[2]= 'description3'
	ejs_vignet[2]= 'vignette3.gif'
	ejs_big[2]= 'image3.png'


/******
FONCTION POUR CHANGER LES PHOTOS
******/
function ChageImage(num)
	{
	if(document.getElementById)
		document.getElementById("ejs_dyn_img").innerHTML = '<A HREF="javascript:killImage()"><IMG SRC="'+ejs_big[num]+'" BORDER=0 HSPACE=5 VSPACE=5 ALT="Cliquez ici pour faire disparaitre"></A><BR><FONT FACE="Verdana, Arial" SIZE=1>'+ejs_des[num]+'</FONT>';
	else
		window.open(ejs_big[num],"_blank")
	}

/******
FONCTION POUR EFFACER LES PHOTOS
******/
function killImage(num)
	{
	if(document.getElementById)
		document.getElementById("ejs_dyn_img").innerHTML = "";
	}

/******
CREATION DU TABLEAU
******/
document.write('<TABLE>')
for(a=0;a<ejs_big.length;a++)
	{
	if(numero_photo == 1)
		document.write('<TR>');
	if(numero_photo == ejs_big.length)
		document.write('<TD ALIGN=center COLSPAN='+(((ejs_big.length)+1)-numero_photo)+'>');
	else
		document.write('<TD ALIGN=center>');
	document.write('<A HREF="javascript:ChageImage('+a+')"><IMG SRC="'+ejs_vignet[a]+'" HSPACE=5 VSPACE=5 ALT="Cliquez ici pour voir en grand" BORDER=0></A></TD>')
if(numero_photo == nb_photo_ligne)
		{
		document.write('</TR>');
		numero_photo=0;
		}
	numero_photo++;
	}
document.write('<TR><TD COLSPAN='+ejs_big.length+' ALIGN=center><DIV ID=ejs_dyn_img></DIV></TD></TR></TABLE>');
</SCRIPT>


2. CSS... (Mais malheureusement je ne retrouve plus la page). Cependant le principe consiste à afficher l'image dont les tailles ont étés définies et qu'au survol, les tailles changent... Cela était correctement expliqué dans un topics / tutorial mais je suis un peu bordélique.

J'essaie de le retrouver as soon as possible
Ouf j'ai retrouvé le principe :

Il est calqué simplement sur un menu lorsque tu passes la souris sur l'image, celle-ci est interchangée... Le menu.
Bon, moi ce que je veux dire ne doit pas forcement se trouver au bon endroit sur le forum mais, pour une galerie d'images, c'est sur c'est pas dynamique, mais quand on débute comme moi et que l'on veut mettre en ligne des photos, c'est assez facile, gratuit, simple et efficace. Je vous conseille, au moins de tester, le logiciel Picasa de google. (longue la phrase la non ? ah bon ? trop ?) http://picasa.google.fr/ Voila, je vous laisse apprécier.

Un exemple ici dans rubrique "perso","photos".

PS : Désolé pour les frames, c'est en cours de changement Smiley cligne
Sujet clos
Aller à