Galerie image javascript
Résolu
XeptoR
Messages postés
58
Date d'inscription
Statut
Membre
Dernière intervention
-
XeptoR Messages postés 58 Date d'inscription Statut Membre Dernière intervention -
XeptoR Messages postés 58 Date d'inscription Statut Membre Dernière intervention -
Bonjour à tous
J'explique mon probleme, je suis en train (d'essayer) de developper une galerie d'image en javascript. Donc mon script est fait, seulement le soucis est que lorsque je selectionne une image a afficher elle s'affiche puis redisparait pour laisser place à l'image d'origine.
HTML :
<html>
<head>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
<title>Galerie</title>
</head>
<body>
<!-- DIV DES GRANDES PHOTOS -->
<div id="view">
<div id="openmini1" style="display:block"> <!----- Grande image N°1 -->
<img src="images/090103030935_100.jpg" height="90%" width="90%" />
<p>Image 1</p>
</div>
<div id="openmini2" style="display:none"> <!----- Grande image N°2 -->
<img src="images/090218203912_67.jpg" height="90%" width="90%"/>
<p>Image 2</p>
</div>
<div id="openmini3" style="display:none"> <!----- Grande image N°3 -->
<img src="images/090220173456_31.jpg" height="90%" width="90%"/>
<p>Image 3</p>
</div>
</div>
<!-- DIV DES PETITES PHOTOS DU BAS DE LA PAGE -->
<div id="link">
<a href="" id="mini1" onClick="ouvrir(this);"><img src="images/090103030935_100.jpg" width="10%" height="10%"></a>
<a href=""id="mini2" onClick="ouvrir(this);"><img src="images/090218203912_67.jpg" width="10%" height="10%"></a>
<a href="" id="mini3" onClick="ouvrir(this);"><img src="images/090220173456_31.jpg" width="10%" height="10%"></a>
</div>
<a href="#">Ajouter une photo</a>
</body>
JAVASCRIPT :
function ouvrir(num)
{
var image = num.id;
alert ("id de l'image: "+image);
var gdImage1 = "open"+image;
alert ("nom de l'image gd: "+gdImage1);
for(i=1; i<4; i++)
{
alert("i: "+i);
var gdImage2 = "openmini"+i;
alert ("nom de l'image gd: "+gdImage2);
if (gdImage1==gdImage2)
{
alert("si "+i);
document.getElementById(gdImage1).style.display="block";
return;
} //fin if
else
{
alert("e"+i);
document.getElementById(gdImage2).style.display="none";
} // fin else
} // fin for
} // fin fonction
PS :
J'ai mis des alert pour voir ou on se trouve dans le script
Voila merci d'avance
@+
J'explique mon probleme, je suis en train (d'essayer) de developper une galerie d'image en javascript. Donc mon script est fait, seulement le soucis est que lorsque je selectionne une image a afficher elle s'affiche puis redisparait pour laisser place à l'image d'origine.
HTML :
<html>
<head>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
<title>Galerie</title>
</head>
<body>
<!-- DIV DES GRANDES PHOTOS -->
<div id="view">
<div id="openmini1" style="display:block"> <!----- Grande image N°1 -->
<img src="images/090103030935_100.jpg" height="90%" width="90%" />
<p>Image 1</p>
</div>
<div id="openmini2" style="display:none"> <!----- Grande image N°2 -->
<img src="images/090218203912_67.jpg" height="90%" width="90%"/>
<p>Image 2</p>
</div>
<div id="openmini3" style="display:none"> <!----- Grande image N°3 -->
<img src="images/090220173456_31.jpg" height="90%" width="90%"/>
<p>Image 3</p>
</div>
</div>
<!-- DIV DES PETITES PHOTOS DU BAS DE LA PAGE -->
<div id="link">
<a href="" id="mini1" onClick="ouvrir(this);"><img src="images/090103030935_100.jpg" width="10%" height="10%"></a>
<a href=""id="mini2" onClick="ouvrir(this);"><img src="images/090218203912_67.jpg" width="10%" height="10%"></a>
<a href="" id="mini3" onClick="ouvrir(this);"><img src="images/090220173456_31.jpg" width="10%" height="10%"></a>
</div>
<a href="#">Ajouter une photo</a>
</body>
JAVASCRIPT :
function ouvrir(num)
{
var image = num.id;
alert ("id de l'image: "+image);
var gdImage1 = "open"+image;
alert ("nom de l'image gd: "+gdImage1);
for(i=1; i<4; i++)
{
alert("i: "+i);
var gdImage2 = "openmini"+i;
alert ("nom de l'image gd: "+gdImage2);
if (gdImage1==gdImage2)
{
alert("si "+i);
document.getElementById(gdImage1).style.display="block";
return;
} //fin if
else
{
alert("e"+i);
document.getElementById(gdImage2).style.display="none";
} // fin else
} // fin for
} // fin fonction
PS :
J'ai mis des alert pour voir ou on se trouve dans le script
Voila merci d'avance
@+
A voir également:
- Galerie image javascript
- Galerie photo en ligne gratuite - Guide
- Image iso - Guide
- Acronis true image - Télécharger - Sauvegarde
- Reduire taille image - Guide
- Légender une image - Guide