Bonjour,
J'ai un petit souci: j'ai créé une gallerie photo dont je vais mettre le code ci dessous, et j'aimerais afficher dans la balise description le contenu d'un champ d'une BDD SQL lors ce que je clique sur une photo.Bien entendu chaque photo a un descriptif bien different.
Sur les forum on me parle de AJAX (j'ai bien compris que c'etait une association de language mais j'y pige rien du tout.Alors un petit coup de main serai le bien venu.
Merki
Voici le code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Galerie photos</title>
<style type="text/css">
<!--
#Titre {
position:absolute;
width:640px;
height:34px;
z-index:2;
left: 0px;
top: 1px;
}
#Grande {
position:absolute;
width:352px;
height:525px;
z-index:3;
left: 3px;
top: 41px;
}
#Mini01 {
position:absolute;
width:68px;
height:102px;
z-index:4;
left: 360px;
top: 41px;
}
#Mini02 {
position:absolute;
width:68px;
height:102px;
z-index:5;
left: 431px;
top: 41px;
}
#Mini03 {
position:absolute;
width:68px;
height:102px;
z-index:6;
left: 502px;
top: 41px;
}
#Mini04 {
position:absolute;
width:68px;
height:102px;
z-index:7;
left: 573px;
top: 41px;
}
#Mini06 {
position:absolute;
width:68px;
height:102px;
z-index:8;
left: 431px;
top: 147px;
}
#Layer5 {
position:absolute;
width:50px;
height:50px;
z-index:1;
left: 567px;
top: 62px;
}
#Mini08 {
position:absolute;
width:68px;
height:102px;
z-index:9;
left: 573px;
top: 147px;
}
#Mini07 {
position:absolute;
width:68px;
height:102px;
z-index:10;
left: 502px;
top: 147px;
}
#Mini09 {
position:absolute;
width:68px;
height:102px;
z-index:11;
left: 360px;
top: 252px;
}
#Mini11 {
position:absolute;
width:68px;
height:102px;
z-index:12;
left: 502px;
top: 252px;
}
#Mini10 {
position:absolute;
width:68px;
height:102px;
z-index:13;
left: 431px;
top: 252px;
}
#Mini12 {
position:absolute;
width:68px;
height:102px;
z-index:14;
left: 573px;
top: 252px;
}
#Mini14 {
position:absolute;
width:68px;
height:102px;
z-index:15;
left: 431px;
top: 357px;
}
#Mini15 {
position:absolute;
width:68px;
height:102px;
z-index:16;
left: 502px;
top: 357px;
}
#Mini13 {
position:absolute;
width:68px;
height:102px;
z-index:17;
left: 360px;
top: 357px;
}
#Mini16 {
position:absolute;
width:68px;
height:102px;
z-index:18;
left: 573px;
top: 357px;
}
#Mini18 {
position:absolute;
width:68px;
height:102px;
z-index:19;
left: 431px;
top: 462px;
}
#Mini17 {
position:absolute;
width:68px;
height:102px;
z-index:20;
left: 360px;
top: 462px;
}
#Layer18 {
position:absolute;
width:50px;
height:50px;
z-index:1;
left: 62px;
top: 1px;
}
#Layer19 {
position:absolute;
width:50px;
height:50px;
z-index:1;
left: 66px;
top: -2px;
}
#Layer20 {
position:absolute;
width:50px;
height:50px;
z-index:1;
left: -67px;
top: 29px;
}
#Mini05 {
position:absolute;
width:68px;
height:102px;
z-index:21;
left: 360px;
top: 147px;
}
#Mini19 {
position:absolute;
width:68px;
height:102px;
z-index:22;
left: 502px;
top: 462px;
}
#Mini20 {
position:absolute;
width:68px;
height:102px;
z-index:23;
left: 573px;
top: 462px;
}
#Description {
position:absolute;
width:640px;
height:80px;
z-index:24;
left: 2px;
top: 573px;
}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
//-->
</script>
</head>
<body onload="MM_preloadImages('Contenu/galerie/collectioncs/photos/02.jpg','Contenu/galerie/collectioncs/photos/01.jpg')" bgcolor="#CCCCCC">
<!-- DEBUT DU SCRIPT -->
<script language="JavaScript1.2">
/*
SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT
http://www.editeurjavascript.com
*/
function ejs_nodroit()
{
alert('Clic droit interdit');
return(false);
}
document.oncontextmenu = ejs_nodroit;
</script>
<!-- FIN DU SCRIPT -->
<!--Déclaration du cadre ou s'affiche le titre de la galerie -->
<div id="Titre" align="center">
<iframe src="Contenu/galerie/collectioncs/titre.htm"scrolling="no" height="30" marginheight="0" ></iframe></div>
<!--Déclaration du cadre ou s'affiche les photos en grand;par defaut la photo 1 sera affichée-->
<div id="Grande"><img src="Contenu/galerie/collectioncs/photos/01.jpg" name="_affichage" width="352" height="525" id="_affichage" marginheight="0" marginwidth="0" scrolling="no" /></div>
<div id="Mini01"><img src="Contenu/galerie/collectioncs/photos/mini/01.jpg" alt="photo_01" width="68" height="102" onclick="MM_swapImage('_affichage','','Contenu/galerie/collectioncs/photos/01.jpg',1)" marginheight="0" scrolling="no" marginwidth="0"></div>
<div id="Mini02"><img src="Contenu/galerie/collectioncs/photos/mini/02.jpg" alt="photo_02" width="68" height="102" onclick="MM_swapImage('_affichage','','Contenu/galerie/collectioncs/photos/02.jpg',1)" marginheight="0" scrolling="no" marginwidth="0"></div>
<div id="Mini03"><img src="Contenu/galerie/collectioncs/photos/mini/03.jpg" alt="photo_03" width="68" height="102" onclick="MM_swapImage('_affichage','','Contenu/galerie/collectioncs/photos/03.jpg',1)" marginheight="0" scrolling="no" marginwidth="0"></div>
<div id="Mini04"><img src="Contenu/galerie/collectioncs/photos/mini/04.jpg" alt="photo_04" width="68" height="102" onclick="MM_swapImage('_affichage','','Contenu/galerie/collectioncs/photos/04.jpg',1)" marginheight="0" scrolling="no" marginwidth="0"></div>
<div id="Mini05"><img src="Contenu/galerie/collectioncs/photos/mini/05.jpg" alt="photo_05" width="68" height="102" onclick="MM_swapImage('_affichage','','Contenu/galerie/collectioncs/photos/05.jpg',1)" marginheight="0" scrolling="no" marginwidth="0"></div>
<div id="Mini06"><img src="Contenu/galerie/collectioncs/photos/mini/06.jpg" alt="photo_06" width="68" height="102" onclick="MM_swapImage('_affichage','','Contenu/galerie/collectioncs/photos/06.jpg',1)" marginheight="0" scrolling="no" marginwidth="0"></div>
<div id="Mini07"><img src="Contenu/galerie/collectioncs/photos/mini/07.jpg" alt="photo_07" width="68" height="102" onclick="MM_swapImage('_affichage','','Contenu/galerie/collectioncs/photos/07.jpg',1)" marginheight="0" scrolling="no" marginwidth="0"></div>
<div id="Mini08"><img src="Contenu/galerie/collectioncs/photos/mini/08.jpg" alt="photo_08" width="68" height="102" onclick="MM_swapImage('_affichage','','Contenu/galerie/collectioncs/photos/08.jpg',1)" marginheight="0" scrolling="no" marginwidth="0"></div>
<div id="Mini09"><img src="Contenu/galerie/collectioncs/photos/mini/09.jpg" alt="photo_09" width="68" height="102" onclick="MM_swapImage('_affichage','','Contenu/galerie/collectioncs/photos/09.jpg',1)" marginheight="0" scrolling="no" marginwidth="0"></div>
<div id="Mini10"><img src="Contenu/galerie/collectioncs/photos/mini/10.jpg" alt="photo_10" width="68" height="102" onclick="MM_swapImage('_affichage','','Contenu/galerie/collectioncs/photos/10.jpg',1)" marginheight="0" scrolling="no" marginwidth="0"></div>
<div id="Mini11"><img src="Contenu/galerie/collectioncs/photos/mini/11.jpg" alt="photo_11" width="68" height="102" onclick="MM_swapImage('_affichage','','Contenu/galerie/collectioncs/photos/11.jpg',1)" marginheight="0" scrolling="no" marginwidth="0"></div>
<div id="Mini12"><img src="Contenu/galerie/collectioncs/photos/mini/12.jpg" alt="photo_12" width="68" height="102" onclick="MM_swapImage('_affichage','','Contenu/galerie/collectioncs/photos/12.jpg',1)" marginheight="0" scrolling="no" marginwidth="0"></div>
<div id="Mini13"><img src="Contenu/galerie/collectioncs/photos/mini/13.jpg" alt="photo_13" width="68" height="102" onclick="MM_swapImage('_affichage','','Contenu/galerie/collectioncs/photos/13.jpg',1)" marginheight="0" scrolling="no" marginwidth="0"></div>
<div id="Mini14"><img src="Contenu/galerie/collectioncs/photos/mini/14.jpg" alt="photo_14" width="68" height="102" onclick="MM_swapImage('_affichage','','Contenu/galerie/collectioncs/photos/14.jpg',1)" marginheight="0" scrolling="no" marginwidth="0"></div>
<div id="Mini15"><img src="Contenu/galerie/collectioncs/photos/mini/15.jpg" alt="photo_15" width="68" height="102" onclick="MM_swapImage('_affichage','','Contenu/galerie/collectioncs/photos/15.jpg',1)" marginheight="0" scrolling="no" marginwidth="0"></div>
<div id="Mini16"><img src="Contenu/galerie/collectioncs/photos/mini/16.jpg" alt="photo_16" width="68" height="102" onclick="MM_swapImage('_affichage','','Contenu/galerie/collectioncs/photos/16.jpg',1)" marginheight="0" scrolling="no" marginwidth="0"></div>
<div id="Mini17"><img src="Contenu/galerie/collectioncs/photos/mini/17.jpg" alt="photo_17" width="68" height="102" onclick="MM_swapImage('_affichage','','Contenu/galerie/collectioncs/photos/17.jpg',1)" marginheight="0" scrolling="no" marginwidth="0"></div>
<div id="Mini18"><img src="Contenu/galerie/collectioncs/photos/mini/18.jpg" alt="photo_18" width="68" height="102" onclick="MM_swapImage('_affichage','','Contenu/galerie/collectioncs/photos/18.jpg',1)" marginheight="0" scrolling="no" marginwidth="0"></div>
<div id="Mini19"><img src="Contenu/galerie/collectioncs/photos/mini/19.jpg" alt="photo_19" width="68" height="102" onclick="MM_swapImage('_affichage','','Contenu/galerie/collectioncs/photos/19.jpg',1)" marginheight="0" scrolling="no" marginwidth="0"></div>
<div id="Mini20"><img src="Contenu/galerie/collectioncs/photos/mini/20.jpg" alt="photo_20" width="68" height="102" onclick="MM_swapImage('_affichage','','Contenu/galerie/collectioncs/photos/20.jpg',1)" marginheight="0" scrolling="no" marginwidth="0"></div>
<div id="Description" >
<!--C'est ici que je dois retrouver le resultat de ma requete SQL en fonction de la photo sur la quelle j'ai cliqué. -->
</div>
</body>
</html>
En attendant votre aide je continu a chercher......
@+