A voir également:
- [Javascript] Diaporama d'images
- Telecharger javascript - Télécharger - Langages
- Faire un diaporama photo avec musique windows 10 - Guide
- Images gratuites - Guide
- Musique pour diaporama souvenir enfance ✓ - Forum Musique / Radio / Clip
- Copiez l'image dans un logiciel d'édition d'images ou un outil en ligne comme js paint ou pixlr e. remplissez les cases en suivant le code couleur. des cases supplémentaires vont se remplir automatiquement. que représente le dessin ? ✓ - Forum Windows
3 réponses
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MAHF</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="scripts/prototype.js" type="text/javascript"> </script>
<script src="scripts/scriptaculous.js?load=effects" type="text/javascript"></script>
<link href="mahf_css.css" rel="stylesheet" type="text/css">
<script>
var effect = 1;
var time = 3000;
var current_image = 0;
var next_image = 1;
var image = new Array();
function init() {
if(document.getElementsByClassName("image")) {
image = document.getElementsByClassName("image");
for(i=1; i < image.length; i++) {
image[i].style.display = "none";
}
}
if(image.length > 1) galerie();
}
function galerie() {
self.setTimeout("nextimage()",time);
}
function nextimage() {
if(effect == 1) { new Effect.Fade(image[current_image]); new Effect.Appear(image[next_image]); }
if(effect == 2) { new Effect.BlindUp(image[current_image]); new Effect.BlindDown(image[next_image]); }
if(next_image == (image.length-1)) {
current_image = next_image;
next_image = 0;
} else {
current_image = next_image;
next_image++;
}
galerie();
}
</script>
</head>
<body>
<div id="container">
<div id="content">
<div id="header">
<div id="logo"> <img src="logo.gif"> </div>
<div id="museeF"> MUSEE <br>
D'ART ET D'HISTOIRE<br> FRIBOURG <br> <span id="museeD">MUSEUM <BR> FUR KUNST UND GESCHICHTE <BR> FRIBOURG</span> </div>
<div id="menu">
<ul>
<li class="navig"> Home </li>
<li class="navig"> Search </li>
<li class="navig"> Contact </li>
<li class="navig"> News </li>
<li class="navig"> Français </li>
<li class="navig"> Deutsch </li>
</ul>
</div>
</div>
<div id="tableau">
<table cellspacing="0" cellpadding="0">
<tr>
<td id="col1" valign="top">Musée d'art et d'histoire <br> Fribourg</td>
<td id="col2" valign="top">Espace Jean Tinguely <br> Niki de Saint Phalle</td>
<td id="col3"></td>
</tr>
<tr>
<td id="col1_2">
<div class="diaporama"> <img src="test1.jpg" class="image" alt="" /> <img src="test2.jpg" class="image" alt="" />
</div>
</td>
<td id="col2_2"><div class="diaporama">
<img src="test1.jpg" class="image" alt="" />
<img src="test2.jpg" class="image" alt="" /> </div></td>
<td id="col3_2" ><div class="diaporama"> <img src="test1.jpg" class="image" alt="" />
<img src="test2.jpg" class="image" alt="" /> </div></td>
</tr>
<!-- <tr>
<td class="footer">Heures d'ouverture - Coordonnées - Accès</td>
<td valign="right"> </td>
<td class="footer" align="right">>www.fr.ch</td>
</tr>
</table>
</div>-->
</table>
<div id="footer">
<div id="heures">Heures d'ouvertures - Coordonnées - Accès </div>
<div id="web"> > www.fr.ch </div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
init();
</script>
</body>
</html>
CSS: (utilisé uniquement pour les images du diapo)
.diaporama img {
margin: -205px 0 0 0;
position:absolute;
width: 254px
}
ET les scripts qui sont lié à ma page HTML sont des scripts déjà fait, à télécharger ici:
http://script.aculo.us/downloads
(sous Current Version ->scriptaculous-js-1.8.2.zip)
Merci :)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MAHF</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="scripts/prototype.js" type="text/javascript"> </script>
<script src="scripts/scriptaculous.js?load=effects" type="text/javascript"></script>
<link href="mahf_css.css" rel="stylesheet" type="text/css">
<script>
var effect = 1;
var time = 3000;
var current_image = 0;
var next_image = 1;
var image = new Array();
function init() {
if(document.getElementsByClassName("image")) {
image = document.getElementsByClassName("image");
for(i=1; i < image.length; i++) {
image[i].style.display = "none";
}
}
if(image.length > 1) galerie();
}
function galerie() {
self.setTimeout("nextimage()",time);
}
function nextimage() {
if(effect == 1) { new Effect.Fade(image[current_image]); new Effect.Appear(image[next_image]); }
if(effect == 2) { new Effect.BlindUp(image[current_image]); new Effect.BlindDown(image[next_image]); }
if(next_image == (image.length-1)) {
current_image = next_image;
next_image = 0;
} else {
current_image = next_image;
next_image++;
}
galerie();
}
</script>
</head>
<body>
<div id="container">
<div id="content">
<div id="header">
<div id="logo"> <img src="logo.gif"> </div>
<div id="museeF"> MUSEE <br>
D'ART ET D'HISTOIRE<br> FRIBOURG <br> <span id="museeD">MUSEUM <BR> FUR KUNST UND GESCHICHTE <BR> FRIBOURG</span> </div>
<div id="menu">
<ul>
<li class="navig"> Home </li>
<li class="navig"> Search </li>
<li class="navig"> Contact </li>
<li class="navig"> News </li>
<li class="navig"> Français </li>
<li class="navig"> Deutsch </li>
</ul>
</div>
</div>
<div id="tableau">
<table cellspacing="0" cellpadding="0">
<tr>
<td id="col1" valign="top">Musée d'art et d'histoire <br> Fribourg</td>
<td id="col2" valign="top">Espace Jean Tinguely <br> Niki de Saint Phalle</td>
<td id="col3"></td>
</tr>
<tr>
<td id="col1_2">
<div class="diaporama"> <img src="test1.jpg" class="image" alt="" /> <img src="test2.jpg" class="image" alt="" />
</div>
</td>
<td id="col2_2"><div class="diaporama">
<img src="test1.jpg" class="image" alt="" />
<img src="test2.jpg" class="image" alt="" /> </div></td>
<td id="col3_2" ><div class="diaporama"> <img src="test1.jpg" class="image" alt="" />
<img src="test2.jpg" class="image" alt="" /> </div></td>
</tr>
<!-- <tr>
<td class="footer">Heures d'ouverture - Coordonnées - Accès</td>
<td valign="right"> </td>
<td class="footer" align="right">>www.fr.ch</td>
</tr>
</table>
</div>-->
</table>
<div id="footer">
<div id="heures">Heures d'ouvertures - Coordonnées - Accès </div>
<div id="web"> > www.fr.ch </div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
init();
</script>
</body>
</html>
CSS: (utilisé uniquement pour les images du diapo)
.diaporama img {
margin: -205px 0 0 0;
position:absolute;
width: 254px
}
ET les scripts qui sont lié à ma page HTML sont des scripts déjà fait, à télécharger ici:
http://script.aculo.us/downloads
(sous Current Version ->scriptaculous-js-1.8.2.zip)
Merci :)
eba973
Messages postés
32
Date d'inscription
mercredi 12 août 2009
Statut
Membre
Dernière intervention
22 septembre 2009
9
21 sept. 2009 à 15:43
21 sept. 2009 à 15:43
Bonjour,
Peux-tu montrer ton html et ton script ?
A+
Eric
http://www.ameliorer-votre-site.com?s=f1
Peux-tu montrer ton html et ton script ?
A+
Eric
http://www.ameliorer-votre-site.com?s=f1
Pas de solution.. ? :-(
Bonjour, je remarque que dans les 3 colonnes de tu inscris les mêmes images. Fais un essais en ajoutant les images test3 test4 test5 test6 dans to diaporama et en inscrivant dans la colonne 2 test3.jpg et test4.jpg etr dans la colonne 3 les deux autres.
si le diaporama fonctionne correctement actuellement le fait d'ajouter des images te permettant de modifier le nom des images dans le script devrait résoudre ta question.
Serge
si le diaporama fonctionne correctement actuellement le fait d'ajouter des images te permettant de modifier le nom des images dans le script devrait résoudre ta question.
Serge
