Sujet Précédent Sujet Suivant

Modifier un script image defilante !

Résolu/Fermé
remi.s Messages postés 376 Date d'inscription samedi 24 juillet 2010 Statut Membre Dernière intervention 10 mars 2017 - 3 août 2010 à 10:35
pols12 Messages postés 1143 Date d'inscription lundi 22 mars 2010 Statut Membre Dernière intervention 31 juillet 2019 - 14 août 2010 à 11:30
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 lundi 22 mars 2010 Statut Membre Dernière intervention 31 juillet 2019 119
3 août 2010 à 12:31
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 lundi 22 mars 2010 Statut Membre Dernière intervention 31 juillet 2019 119
3 août 2010 à 12:34
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 samedi 24 juillet 2010 Statut Membre Dernière intervention 10 mars 2017 2
3 août 2010 à 12:39
vraiment merci y a vraiment des gens supers sur ce forum !
0
remi.s Messages postés 376 Date d'inscription samedi 24 juillet 2010 Statut Membre Dernière intervention 10 mars 2017 2
3 août 2010 à 12:39
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 samedi 24 juillet 2010 Statut Membre Dernière intervention 10 mars 2017 2
3 août 2010 à 13:29
tes plus la ?
0
remi.s Messages postés 376 Date d'inscription samedi 24 juillet 2010 Statut Membre Dernière intervention 10 mars 2017 2
3 août 2010 à 13:41
quelq'un peut m'aider svp ?
0
Réponse 2 / 4
pols12 Messages postés 1143 Date d'inscription lundi 22 mars 2010 Statut Membre Dernière intervention 31 juillet 2019 119
4 août 2010 à 12:53
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 lundi 22 mars 2010 Statut Membre Dernière intervention 31 juillet 2019 119
4 août 2010 à 12:53
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 samedi 24 juillet 2010 Statut Membre Dernière intervention 10 mars 2017 2
4 août 2010 à 18:42
merci beaucoup en tt ca mais tu peux repondre a mon message privé stp ?
0
remi.s Messages postés 376 Date d'inscription samedi 24 juillet 2010 Statut Membre Dernière intervention 10 mars 2017 2
5 août 2010 à 07:48
???
0
pols12 Messages postés 1143 Date d'inscription lundi 22 mars 2010 Statut Membre Dernière intervention 31 juillet 2019 119
14 août 2010 à 11:30
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 samedi 24 juillet 2010 Statut Membre Dernière intervention 10 mars 2017 2
3 août 2010 à 11:22
aide svp !
0
Réponse 4 / 4
pols12 Messages postés 1143 Date d'inscription lundi 22 mars 2010 Statut Membre Dernière intervention 31 juillet 2019 119
3 août 2010 à 11:40
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 samedi 24 juillet 2010 Statut Membre Dernière intervention 10 mars 2017 2
3 août 2010 à 11:46
merci bcp mais faut le rajouter ou onHover="clearTimeout()" ? merci
0
pols12 Messages postés 1143 Date d'inscription lundi 22 mars 2010 Statut Membre Dernière intervention 31 juillet 2019 119
3 août 2010 à 11:51
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 samedi 24 juillet 2010 Statut Membre Dernière intervention 10 mars 2017 2
3 août 2010 à 12:04
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

code couleur associé a une image
magic charly -
pandora -

9 réponses