11548 sujets

JavaScript, DOM et API Web HTML5

Script galerie photo ouvre un pop-up pour chaque image!!!

salut, le script sur votre site à l'adresse

http://css.alsacreations.com/Tutoriels-JavaScript

ne fonctionne pas bien chez moi.

La première miniature s'ouvre en grand dans un pop-up et non en dessus agrandie.

<div id="galerie">
<ul id="galerie_mini">
<li><a href="images/portrait1.jpg" title="Titre de la photo 1"><img src="images/minis/portrait1.jpg" alt="Le titre de la photo 1" /></a></li>

<li><a href="images/photo2.png" title="Titre de la photo 2"><img src="images/minis/m_photo2.png" alt="Le titre de la photo 2" /></a></li>
<li><a href="images/photo3.png" title="Titre de la photo 3"><img src="images/minis/m_photo3.png" alt="Le titre de la photo 3" /></a></li>
<li><a href="images/photo4.png" title="Titre de la photo 4"><img src="images/minis/m_photo4.png" alt="Le titre de la photo 4" /></a></li>

<li><a href="images/photo5.png" title="Titre de la photo 5"><img src="images/minis/m_photo5.png" alt="Le titre de la photo 5" /></a></li>
<li><a href="images/photo6.png" title="Titre de la photo 6"><img src="images/minis/m_photo6.png" alt="Le titre de la photo 6" /></a></li>
<li><a href="images/photo7.png" title="Titre de la photo 7"><img src="images/minis/m_photo7.png" alt="Le titre de la photo 7" /></a></li>

<li><a href="images/photo8.png" title="Titre de la photo 8"><img src="images/minis/m_photo8.png" alt="Le titre de la photo 8" /></a></li>
<li><a href="images/photo9.png" title="Titre de la photo 9"><img src="images/minis/m_photo9.png" alt="Le titre de la photo 9" /></a></li>
</ul>


<dl id="photo">
<dt>Titre de la photo 1</dt>
<dd><img id="big_pict" src="images/photo1.png" alt="Photo 1 en taille normale" /></dd>
</dl>
</div>

le fichier script.js est par défaut dans le repertoire racine de mon site photo ,par ex. d:\documents\mes sites\site photos\script.js

Le script est entre les balises <head> avec un autre script:
voic le code coMPLET.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>PHOTOS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="script.js"></script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}

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];}
}
//-->
</script>
<style type="text/css">
<!--
.Style2 {font-size: 14px}
-->
</style>
<link href="css/galerie.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#CCCC99" text="#000000" link="#990000" vlink="#000099" alink="#0000CC" onLoad="MM_preloadImages('images/symbole-portraits2.gif','images/symbole-paysages.gif','images/symbole-animaux.gif','images/symbole-fleurs.gif')">
<table bgcolor="#CCCC99" cols="1" align="center" width="720" border="0">
<tr>
<td><img src="Images/banniere.gif"></td>
</tr>
</table>
<table bgcolor="#CCCC99" align="center" width="720" border="0">
<tr >
<td width="68">livre d'or</td>
<td width="5">|</td>
<td width="50">contact</td>
<td width="5">|</td>
<td width="37">Liens</td>
<td width="5">|</td>
<td width="501"></td>
</tr>
</table>
<table width="720" bgcolor="#CCCC99" align="center" border="0">
<tr>
<td width="90"><a href="portraits.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Portraits','','images/symbole-portraits2.gif',1)"><img src="images/symbole-portraits1.gif" alt="portraits" name="Portraits" width="90" height="90" border="0"></a></td>
<td width="90"><a href="paysages.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('paysages','','Bilder/symbole-paysages.gif',1)"><img src="images/symbole-paysages.gif" alt="paysage" name="paysage" width="90" height="90" border="0"></a></td>
<td width="90"><a href="animaux.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','images/symbole-animaux.gif',1)"><img src="images/symbole-animaux.gif" alt="animaux" name="Image4" width="90" height="90" border="0"></a></td>
<td width="90"><a href="fleurs.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','image/symbole-fleurs.gif',1)"><img src="images/symbole-fleurs.gif" alt="fleurs" name="Image5" width="90" height="90" border="0"></a></td>
<td width="338"> <p align="left">&nbsp;</p> <p align="left"><img src="images/signature.jpg" width="61" height="20"></p></td>
</tr>
</table>
<div id="galerie">
<ul id="galerie_mini">
<li><a href="images/Portraits/grandes images/portrait-dame.jpg" title="Titre de la photo 1"><img src="images/Portraits/petites images/portrait-dame.jpg" alt="Le titre de la photo 1" /></a></li>

<li><a href="images/photo2.png" title="Titre de la photo 2"><img src="images/Portraits/petites images/fille.jpg" alt="Le titre de la photo 2" width="96" height="146" /></a></li>
<li><a href="images/photo3.png" title="Titre de la photo 3"><img src="images/minis/m_photo3.png" alt="Le titre de la photo 3" /></a></li>
<li><a href="images/photo4.png" title="Titre de la photo 4"><img src="images/minis/m_photo4.png" alt="Le titre de la photo 4" /></a></li>

<li><a href="images/photo5.png" title="Titre de la photo 5"><img src="images/minis/m_photo5.png" alt="Le titre de la photo 5" /></a></li>
<li><a href="images/photo6.png" title="Titre de la photo 6"><img src="images/minis/m_photo6.png" alt="Le titre de la photo 6" /></a></li>
<li><a href="images/photo7.png" title="Titre de la photo 7"><img src="images/minis/m_photo7.png" alt="Le titre de la photo 7" /></a></li>

<li><a href="images/photo8.png" title="Titre de la photo 8"><img src="images/minis/m_photo8.png" alt="Le titre de la photo 8" /></a></li>
<li><a href="images/photo9.png" title="Titre de la photo 9"><img src="images/minis/m_photo9.png" alt="Le titre de la photo 9" /></a></li>
</ul>


<dl id="photo">
<dt>Titre de la photo 1</dt>
<dd><img src="images/Portraits/grandes images/fille.jpg" alt="Photo 1 en taille normale" width="320" height="480" id="big_pict" /></dd>
</dl>
</div>

</body>
</html>


[/i][/i][/i][/i][/i]
Bonjour midiweb et bienvenue sur ce forum.

Est-ce que tu pourrais baliser ton code avec le BBCode [ code][/code ] (sans les espaces) ?
Ça le rendra plus lisible, en puis ça évitera de déformer le forum.

Merci Smiley cligne
Sujet clos
Aller à