Rechercher : dans
Par :

Integrer diaporama dans page html

Dernière réponse le 25 avr 2009 à 17:45:16 MarieLN-ny, le 24 avr 2009 à 14:18:17 
 Signaler ce message aux modérateurs

Bonjour,

je voudrais, sur une page de mon site en html faire en sorte qu une image soit remplacee par une autre de facon automatique, en boucle pour donner un peu de peps a cette page
un java script peut il faire l affaire .... je suis debutante et je patauge la.....
merci d'avance pour vos suggestions

Meilleures réponses pour « integrer diaporama dans page html » dans :
On peut cacher le code source d'une page HTML VoirMythe: On peut cacher le code source d'une page HTML. Réalité: FAUX. Explications: Pour pouvoir afficher une page web (HTML), le navigateur doit - à un moment où un autre - avoir le code HTML en clair. Il y a donc toujours moyen de le...
Les balises HTML VoirHTML, un langage à balises Le HTML n'est pas un langage de programmation. Il s'agit d'un langage permettant de décrire la mise en page et la forme d'un contenu rédigé en texte simple. Une page HTML est ainsi un simple fichier texte...
Structure d'un document HTML VoirNotion de document HTML Une page HTML est un simple fichier contenant du texte formatté avec des balises HTML. Par convention l'extension donnée au fichier est .htm ou .html, mais une page web peut potentiellement porter n'importe quelle...
Les liens hypertextes VoirPrésentation des ancrages Les liens hypertextes (ancrages) sont des éléments d'une page HTML (soulignés lorsqu'il s'agit de texte) permettant aux internautes de naviguer vers une nouvelle adresse lorsque l'on clique dessus. Ce sont les liens...

1

RClog, le 24 avr 2009 à 14:36:27
Répondre à RClog

2

MarieLN-ny, le 24 avr 2009 à 20:00:38

Ok j ai regarde le lien mais il faut mettre tout ca ou exactement?

Répondre à MarieLN-ny

3

RClog, le 24 avr 2009 à 20:07:44

C'est indiqué au dessus de chaque script

en principe le premier entre les balises <head> et </head> le deuxième entre les balise <body> et </body> à l'emplacement où on veut faire apparaître le diaporama

Répondre à RClog

4

MarieLN-ny, le 24 avr 2009 à 20:10:08

Ok je vais essayer .... je commence a tourner en bourrique tu vois j avais meme pas vu ca alors que j ai bien lu le doc... c est la fatigue je n ai plus les yeux en face des trous..... il n est pourtant que 14 heures ici....
merci je vais essayer et reviens a la peche aux infos si necessaire

Répondre à MarieLN-ny

5

MarieLN-ny, le 24 avr 2009 à 20:25:17

Rclog

je viens de commencer a transferer le script java qui se trouve sur le lien que tu m as donne et il y a un truc aue je ne conprends pas
d abord il faut specifier l URL des l image puis le lien....
c est quoi la diffrence entre l url et le lien je ne saisis pas.... desolee suis debutante

merci de ton aide

Répondre à MarieLN-ny

6

RClog, le 24 avr 2009 à 20:35:11

Je dois avouer que ce n'est pas très clair, je ferais un essai demain après midi pour voir ce que ça donne (pas le temps ce soir) je te posterai la réponse.

Répondre à RClog

7

MarieLN-ny, le 24 avr 2009 à 20:57:31

Merci a toi... j attendrai sagement ton post en attendant j ai encore du pain sur la planche, toutes mes pages a recentrer.... donc a demain...
merci encore

Répondre à MarieLN-ny

8

RClog, le 25 avr 2009 à 11:47:00

Bon je me suis penché sur le problème avec un autre script un peu plus simple :

à insérer entre les balises <head> et </head>

<SCRIPT LANGUAGE="javascript">
<!--

/*////////////////////////////////////////////////////////////////////
/ Diaporama (Version 1.0 - 31/07/00)                                 /
/ Copyright Applicanet (1999/2000)                                   /
/ WEB: http://applicanet.com                                         /
/ Mail: webmestre@applicanet.com                                     /
/ !!! Tous droits réservés. Aucune partie de ce script ne peut êtr e /
/ modifiée sans la permission préalable de l'auteur.                 /
////////////////////////////////////////////////////////////////////*/

var img1=new Image(800,600);img1.src="3d_design/Dragon Fly.jpg";
var img2=new Image(800,600);img2.src="3d_design/nymphe04.jpg";
var img3=new Image(800,600);img3.src="3d_design/elfe_light.jpg";
var img4=new Image(800,600);img4.src="";
var img5=new Image(800,600);img5.src="";

/* etc ...etc ... rajouter autant de lignes que d'images, (60,60) sont les dimensions des images en pixels, la hauteur puis la largeur, à définir.*/ 

Total = 3;   /*Nombres d'images, à définir*/

Temporisation = 3;   /*Temporisation du diaporama en secondes, à définir.*/

/* Ne rien éditer sous cette ligne ...!

//////////////////////////////////////////////////////////////////
*/

Temps = Temporisation * 1000;
Flag = false;
//-->
</SCRIPT>


Note : la ligne "Total = 3; correspond au nombre d'image que tu veux faire apparaître, si tu en mets 4 tu changes la valeur à 4.

"Temporisation = 3" correspond au nombre de secondes d'attente entre chaque image, c'est donc modifiable.

les valeur 800 et 600 sont la largeur et la hauteur de chaque image, il suffit d'adapter cette taille selon la grandeur de tes images.

img1.src="3d_design/Dragon Fly.jpg" > correspond à l'url de l'image. Si les images sont dans le même dossier que ta page HTML l'URL sera juste le nom de l'image

si les images sont dans un autre dossier, l'URL sera : le nom_du_dossie/le_nom_de_l'image

Si tu travaille en local sur ton PC , il faut juste mettre le nom du dossier et non pas le chemin complet du type :
C:\Documents and seetings\nom d'user\Mes documents................ etc. sans quoi ça ne fonctionnera plus en ligne.


A mettre entre les balises <body> et </body>

<center><A HREF="#" OnmouseOver="Flag = true;" OnmouseOut="Flag = false;"><IMG SRC="" WIDTH="800" HEIGHT="600" BORDER="0" NAME="Vue"></A></CENTER>
<SCRIPT LANGUAGE="javascript">
<!--
var IncremenTation = 1;
function Afficher(){
if (!document.images){
alert("Votre navigateur ne supporte pas un SCRIPT inclus dans cette page Web \nVous devriez en télécharger une version plus récente.");
return;
}
if (!Flag) {
document.images.Vue.src=eval("img"+IncremenTation+".src")}
if (IncremenTation < Total) 
{
IncremenTation = IncremenTation + 1;
}
else
{
IncremenTation = 1;}
setTimeout("Afficher()",Temps);
}
Afficher();
//-->
</SCRIPT>


Note : sur la ligne : WIDTH="800" HEIGHT="600" penser à régler les valeur comme sur celle des photos.

Il est également possible de ne pas mettre l'image au centre en changeant la balise <center > par <left> ou <right>



je l'ai testé, ça fonctionne , bon courage

Cordialement

Répondre à RClog

9

 MarieLN-ny, le 25 avr 2009 à 17:45:16

C est super gentil merci a toi de toute cette aide.... au boulot alors
!

Répondre à MarieLN-ny