Modifier un script image defilante !

Résolu
remi.s Messages postés 376 Date d'inscription   Statut Membre Dernière intervention   -  
pols12 Messages postés 1143 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,
j'ai trouver ce scipt sur le net :

<script>
var imgs=new Array();
imgs[0]="exemples/photos/1.jpg";
imgs[1]="exemples/photos/2.jpg";
imgs[2]="exemples/photos/3.jpg";
imgs[3]="exemples/photos/4.jpg";
imgs[4]="exemples/photos/5.jpg";
imgs[5]="exemples/photos/6.jpg";
var cpt=0;
function changeimages()
{
document.getElementById("ima").src=imgs[cpt];
cpt++;
if(cpt>=imgs.length) cpt=0;
setTimeout("changeimages()",1500);
}
</script>

j'aimerai le modifier legerement c'est à dire que quand la souris passe sur l'image elle s'arrete et qu'il y ait des fleches en bas pour faire defiler les images (deux fleches)

Voila merci bonne journée

Rémi STEINMANN


A voir également:

4 réponses

Réponse 1 / 4
pols12 Messages postés 1143 Date d'inscription   Statut Membre Dernière intervention   119
 
Voici le code corrigé: 
<head>
<script type="text/javascript">
var imgs=new Array(); 
imgs[0]="http://www.mac4ever.com/images/images_actu/42287_62_iphone_4g_concept.jpg"; 
imgs[1]="http://www.blogiphone.fr/wp-content/uploads/2009/02/iphone-4g-3.jpg"; 
imgs[2]="http://demonter.net/wp-content/uploads/2009/11/iphone-4g-concept3.jpg"; 
imgs[3]="exemples/photos/4.jpg"; 
imgs[4]="exemples/photos/5.jpg"; 
imgs[5]="exemples/photos/6.jpg"; 
var cpt=0; 
function changeimages() 
{ 
document.getElementById("ima").src=imgs[cpt];
cpt++; 
if(cpt>=imgs.length) cpt=0; 
setTimeout("changeimages()",1500);
}
function changeimages2() 
{ 
document.getElementById("ima").src=imgs[cpt]; 
cpt--; 
if(cpt<=0) cpt=imgs.length; 
} 
</script>
</head>

<body onLoad="changeimages()">
	<p>
<img src="" onHover="clearTimeout()" id="ima" />
<a href="#" onclick="changeimages2()"><img src="image d'une fleche gauche" /></a>
<a href="#" onclick="changeimages()"><img src="image d'une fleche droite" /></a>
	</p>
</body>


Je t'ai tout mis: tu dois mettre le script dans les balises head, et mettre un événement onLoad à la balise body.
Ton image s'affichera là où est placée la balise img.
Juste en dessous, tu as 2 liens, ce sont les liens des deux flèches. Le lien est une image, mais je ne la possède aps. Tu peux mettre du texte à la place, ou créer ou télcharger deux images de fleche: une vers la droite et une vers la gauche. ;)
Ou bien tu effacaces les img et tu mest du etxte: "image précédente" et "image suivante". ;)
Voilà!
Je pense que tout est là dedans, après, il faut que tu testes. ;)
1
pols12 Messages postés 1143 Date d'inscription   Statut Membre Dernière intervention   119
 
Attends 5 minutes stp: je rajoutes quelques corrections, car je viensde tester... ;)
J'édite, donc ne copies aps tout de suite, je reposte pour te dire quand l'édition est terminée.
0
remi.s Messages postés 376 Date d'inscription   Statut Membre Dernière intervention   2
 
vraiment merci y a vraiment des gens supers sur ce forum !
0
remi.s Messages postés 376 Date d'inscription   Statut Membre Dernière intervention   2
 
j'ai un autre gros service à demander as tu team viewer 5 ? ca sreia tpour configurer deux trois trucs sur joomla.....
0
remi.s Messages postés 376 Date d'inscription   Statut Membre Dernière intervention   2
 
tes plus la ?
0
remi.s Messages postés 376 Date d'inscription   Statut Membre Dernière intervention   2
 
quelq'un peut m'aider svp ?
0
Réponse 2 / 4
pols12 Messages postés 1143 Date d'inscription   Statut Membre Dernière intervention   119
 
Cette fis-ci, tout est correct, et tout est ici... ;) 
<script type="text/javascript">
var imgs=new Array(); 
imgs[0]="http://www.mac4ever.com/images/images_actu/42287_62_iphone_4g_concept.jpg"; 
imgs[1]="http://www.blogiphone.fr/wp-content/uploads/2009/02/iphone-4g-3.jpg"; 
imgs[2]="http://demonter.net/wp-content/uploads/2009/11/iphone-4g-concept3.jpg"; 

var cpt=0;
var stop=false;

function changeimages()
{ 
	if (stop) return;
	if(cpt>=imgs.length) cpt=0;

	document.getElementById("ima").src=imgs[cpt];
	cpt++; 

window.setTimeout("changeimages()",3000);
}

function Stop()
{
	stop = true;
}

function Go()
{
	stop = false;
	window.setTimeout("changeimages()",3000);
}

function Change()
{
	if(cpt>=imgs.length) cpt=0;

	document.getElementById("ima").src=imgs[cpt];
	cpt++;
}

function ChangeGauche() 
{
	if(cpt<=0) cpt=imgs.length;

	document.getElementById("ima").src=imgs[cpt];
	cpt--;
}

Go()
</script>
</head>

<body>
	<p>
<a onMouseOver="Stop()" onMouseOut="Go()" ><img src="" height="350" id="ima" /></a> <br />
<a href="#" onclick="Stop();ChangeGauche();">Précédente</a>
<a href="#" onclick="Stop();Change();" >Suivante</a>
	</p>
</body>
1
pols12 Messages postés 1143 Date d'inscription   Statut Membre Dernière intervention   119
 
Plus de onLoad au body!
Le hover marche, et les précédente et suivant aussi... ;)
0
remi.s Messages postés 376 Date d'inscription   Statut Membre Dernière intervention   2
 
merci beaucoup en tt ca mais tu peux repondre a mon message privé stp ?
0
remi.s Messages postés 376 Date d'inscription   Statut Membre Dernière intervention   2
 
???
0
pols12 Messages postés 1143 Date d'inscription   Statut Membre Dernière intervention   119
 
Désolé, j'étais pas là pendant une semaine... ;)
Je réponds de suite à ton MP.
Mais si tu pouvais mettre une bonne note à mon dernier message, et passer ton sukeet en résolu, ce serait sympa pour ceux qui ont le même problème que toi! ;)
Pols12
0
Réponse 3 / 4
remi.s Messages postés 376 Date d'inscription   Statut Membre Dernière intervention   2
 
aide svp !
0
Réponse 4 / 4
pols12 Messages postés 1143 Date d'inscription   Statut Membre Dernière intervention   119
 
Salut
e suis extrement nul en JS, mais je pense que:
Il faut rajouter quelque chose comme: 
onHover="clearTimeout()"


Pour les flèche, je suppose qu'il faut deux liens avec des onClick
Et pour la fleche, gauche, il faut changer de sens, donc rajouter une fonction qui va en sens inverse, mais sans timer, celle-ci: 

[ici, tu mets tout l'autre script, mais tu feremes pas la balise script eyt tu rajoutes ca:]
function changeimages2() 
{ 
document.getElementById("ima").src=imgs[cpt]; 
cpt--; 
if(cpt<=0) cpt=imgs.length; 
} 
</script>


<a href="#" onclick="changeimages2()"><img src="fleche gauche" /></a>
<a href="#" onclick="changeimages()"><img src="fleche droite" /></a>

Et je suis trop content, parce que j'ai jamais appris le JS, et je viens de faire un truc plausible. Après, je sais aps si il marche... =D
0
remi.s Messages postés 376 Date d'inscription   Statut Membre Dernière intervention   2
 
merci bcp mais faut le rajouter ou onHover="clearTimeout()" ? merci
0
pols12 Messages postés 1143 Date d'inscription   Statut Membre Dernière intervention   119
 
Heu... Je pense que ca doit être ici:
Juste après la ligne là:
document.getElementById("ima").src=imgs[cpt];
Tu rajoutes:
document.getElementById("ima").onHover="clearTimeout()";

Mais je ne suis aps très sur... :)

Si ca marche aps, supprime le, et mets le comme attribut de la balise qui a l'ID "ima". ;)
0
remi.s Messages postés 376 Date d'inscription   Statut Membre Dernière intervention   2
 
re le code comma ca est til correct ?

<script>
var imgs=new Array();
imgs[0]="http://www.mac4ever.com/images/images_actu/42287_62_iphone_4g_concept.jpg";
imgs[1]="http://www.blogiphone.fr/wp-content/uploads/2009/02/iphone-4g-3.jpg";
imgs[2]="http://demonter.net/wp-content/uploads/2009/11/iphone-4g-concept3.jpg";
imgs[3]="exemples/photos/4.jpg";
imgs[4]="exemples/photos/5.jpg";
imgs[5]="exemples/photos/6.jpg";
var cpt=0;
function changeimages()
{
document.getElementById("ima").src=imgs[cpt];
document.getElementById("ima").onHover="clearTimeout()"
cpt++;
if(cpt>=imgs.length) cpt=0;
setTimeout("changeimages()",1500);
function changeimages2()
{
document.getElementById("ima").src=imgs[cpt];
cpt--;
if(cpt<=0) cpt=imgs.length;
}
</script>


<a href="#" onclick="changeimages2()"><img src="fleche gauche" /></a>
<a href="#" onclick="changeimages()"><img src="fleche droite" /></a>
}
</script>
0

Discussions similaires

PIX
plart -
jordane45 -

1 réponse
probleme sommet
urgent -
Raymond PENTIER -

2 réponses