Aller au contenu
Zebulon

  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

diaporama photo sur son site[resolu]

flogti

Par flogti
dans Programmation

 Partager

Messages recommandés

flogti Power Member

flogti

Posté(e)
Posté(e) (modifié)

salut a tous

j'aimerais savoir comment on fait pour mettre un diaporama qui fait défiler les photos en continu sur sont site.

le diaporama doit être dans le coin gauche ou droit du site dans un petit carré de 200 x 200.

meric a tous

Modifié par flogti
Lien vers le commentaire
Partager sur d’autres sites

  • Modérateurs
Dylav Devil Member !

Dylav

Posté(e)
  • Modérateurs
Posté(e)

Voici un petit script tout simple, que nous devons à Mike Canonigo, et qui fonctionne au moins sous FF et IE. Il fait défiler un ensemble d'images (table Pictures) à une cadence paramétrable (variable delay).

 

Fais un copier/coller du source ci-dessous dans un fichier texte que tu appelleras par exemple diaporama.html, remplace la liste d'images par une liste d'images à toi (de dimensions au plus égales à 200px), et lance-le dans ton navigateur pour voir ce que cela donne.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>

<title>Diaporama</title>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<meta http-equiv="Content-Language" content="fr" />

<meta http-equiv="Content-Script-Type" content="text/javascript" />

<meta http-equiv="Content-Style-Type" content="text/css" />

<script type="text/javascript">

<!-- Diaporama.js =========================================================

//

// This slideshow allows you to browse through

// the images, manually or automatically.

// Easily customize this slideshow to fit your site !

//

// Original: Mike Canonigo (mik[email protected])

// Web Site: http://www.munkeehead.com

// This script and many more are available free online at

// The JavaScript Source -> http://javascript.internet.com

//

// Tableau énumérant les images du diaporama

//

Pictures = new Array ('AA001.jpg','AA002.jpg','AA003.jpg',

'AA004.jpg','AA005.jpg','AA006.jpg','AA007.jpg');

//

// Cadence du défilement automatique (en millisecondes)

//

var delay = 2000;

//

var ImgNum = 0;

var ImgLength = Pictures.length - 1;

function chgImg() {

if (document.images) {

ImgNum = ImgNum + 1;

if (ImgNum > ImgLength) {

ImgNum = 0;

}

with (document.getElementById("slideshow")) {

src = Pictures[imgNum];

alt = Pictures[imgNum];

title=Pictures[imgNum];

}

}

}

setInterval("chgImg()", delay);

//

// ================================================================ End -->

</script>

<style type="text/css">

#diaporama {

float:left;

position:fixed;

height:200px;

width:200px;

left:0;

top:0;

}

#corps {

float:left;

padding-left:5px;

}

img {border:0;}

</style>

</head>

<body>

<div id="diaporama"><a href="java script:chgImg()">

<img id="slideshow" src="AA001.jpg" alt="AA001.jpg" title="AA001.jpg" />

</a></div>

<div id="corps">Diaporama

<br />

<br />Le bloc div 'diaporama' est fixé en haut à droite de la page.

<br />C'est un carré de 200px de côté.

<br />Il est destiné à contenir des images dont les dimensions

<br />ne doivent excéder 200px ni en hauteur ni en largeur.

<br />

<br />Le script fait défiler les images dont les noms sont précisés

<br />dans le tableau Pictures (ici, AA001.jpg à AA007.jpg).

<br />La vitesse de défilement est fixée dans la variable delay,

<br />exprimée en millisecondes (donc ici, 2 secondes pour chaque image).

<br />

<br />Le bloc div 'corps' vient s'adosser au bloc 'diaporama',

<br />avec une petite marge interne de 5px.

</div>

</body>

</html>

Il ne te restera plus qu'à travailler la présentation de ta page... :P

Lien vers le commentaire
Partager sur d’autres sites
  • Modérateurs
Dylav Devil Member !

Dylav

Posté(e)
  • Modérateurs
Posté(e)

Si dans l'immédiat tu considères ton problème comme résolu, n'oublie pas de l'indiquer en ajoutant à son titre le mot [Résolu], ce qui ne t'empêchera pas de créer ici d'autres sujets au détour des difficultés que tu rencontreras.

 

Pour modifier le titre de ton topic, tu édites ton premier post :P

Lien vers le commentaire
Partager sur d’autres sites

Rejoindre la conversation

Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.
Remarque : votre message nécessitera l’approbation d’un modérateur avant de pouvoir être visible.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

×
 Partager
Aller sur la liste des sujets

  • En ligne récemment   0 membre est en ligne

    • Aucun utilisateur enregistré regarde cette page.
×
×
  • Créer...