Posez votre question Signaler

Script défilement d'image

Lilli - Dernière réponse le 27 nov. 2011 à 21:24
Bonjour,

J'utilise un script permettant de faire défiler des images (script récupérer sur Editeurs Java script). Mais ce script défile en boucle tant que l'utilisateur n'a pas cliquez sur une image. Lorsqu'il clique sur une des images, il arrive sur la 2ème page de mon site. Moi, je voudrais, qu'après l'affichage de la dernière image, le script puisse m'ouvrir directement ma deuxième page, sans que l'utilisateur est nécessairement besoin de cliquer sur une image.

Si vous aveez des pistes, merci de me les indiquer. Attention aux languages que vous utiliserez car je suis qu'une débutante en la matière.

Merci d'avance

Lilli
Lire la suite 

Script défilement d'image »

28 réponses
Réponse
+6
moins plus
Mik4d0 3Messages postés 13 janvier 2010Date d'inscription 21 juin 2011Dernière intervention 13 janv. 2010 à 14:08
Bonjour à tous, le script est pas mal du tout.
J'ai mis le code MYSQL/PHP pour ceux que ça intéresse.


imgPath = new Array;
SiClickGoTo = new Array;
if (document.images)
{
<?
$maximum=15; /// maximum de photos que vous souhaitez toutes categories confondues

$reqiu="SELECT * FROM `VOTRE_TABLE_ICI` order by rand() limit $maximum "; /// lecture aléatoire des photos dans la BDD
$resltait= mysql_query("$reqiu")or die("Erreur.. :-)<br>Vous n'avez pas d'autorisation pour faire ce genre de chose !");
$i=0;
while ($ro=mysql_fetch_array($resltait))
{
$i++;
?>
i<?=$i;?> = new Image;
i<?=$i;?>.src = 'galerie/mini-<?=$ro[2];?>'; /// affichage de la photo
SiClickGoTo[<?=$i;?>] = "galerie.php?id=<?=$ro[4];?>"; /// lien vers la photo ou la galerie contenant la photo
imgPath[<?=$i;?>] = i<?=$i;?>.src;
<?
}
?>
}
a = 0;
function ejs_img_fx(img)
{
if(img && img.filters && img.filters[0])
{
img.filters[0].apply();
img.filters[0].play();
}
}

function StartAnim()
{
if (document.images)
{
document.write('<A HREF="#" onClick="ImgDest();return(false)"><IMG SRC="" BORDER=0 ALT="Galeries photos" NAME=defil style="filter:progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=100,Duration=1)"></A>');

//// THEORIQUEMENT IL FAUT METTRE UNE IMAGE.. ici j'en ai pas mis, mais une image serait utile :-)

defilimg()
}
else
{
document.write('<A HREF="galerie.php">Cliquez-ici pour afficher la galerie</A>')
}
}
function ImgDest()
{
document.location.href = SiClickGoTo[a-1];
}
function defilimg()
{
if (a == <?=$maximum;?>)
{
a = 0;
}
if (document.images)
{
ejs_img_fx(document.defil)
document.defil.src = imgPath[a];
tempo3 = setTimeout("defilimg()",1500);
a++;
}
}
//-->

Voilà, En remplaçant le nom de la table ainsi que les numéros des champs, vos photos s'afficheront toutes seules :-)

++
Mikado

 Ajouter un commentaire
aljessy - 17 mai 2011 à 11:29
s'il te plait Mik4do comment pourrais je utiliser ton code car je ne me retrouve pas trop j'ai zone dans une page php ou je souhaitais l'integrer.
PapiPhp- 27 nov. 2011 à 21:24
Bonjour,
pourriez vous m'aider en m'expliquant pourquoi ma fonction Zoom ne fonctionne pas avec des variables dans onMouseOver balise IMG alors qu'elle fonctionne très bien avec des URL ?
A savoir : <img id="photo" name="photo" src="../Images/2010 (1).png"; OnMouseOver="document.photo.src=zoom[i];" OnMouseOut="document.photo.src=diapo[i];">
avec <SCRIPT language=javascript>
<!--
var i=1, j=1, k=0;
diapo = new Array();
diapo[1]="../Images/2010 (1).png";
document.photo.src=diapo[i];
zoom = new Array();
zoom[1]="../Images/800x600/2010 (1).png";
-->
</script>
ALORS que <img id="photo" name="photo" src="../Images/2010 (1).png"; OnMouseOver="document.photo.src='../Images/800x600/2010 (1).png';" OnMouseOut="this.src=' ../Images/2010 (1).png';"> fonctionne très bien.

Merci pour votre aide
Ajouter un commentaire
Réponse
+0
moins plus
Oli 16 mars 2005 à 10:07
Bonjour,

Peux-t-on voir le code source du script pour vous aider ?

 Ajouter un commentaire
Lilli - 16 mars 2005 à 12:35
Bonjour et merci

Voici le script utilisé.

<html>
<head>
<!-- DEBUT DU SCRIPT -->
<SCRIPT LANGUAGE="JavaScript">
/*
SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT
http://www.editeurjavascript.com
*/
imgPath = new Array;
SiClickGoTo = new Array;
if (document.images)
{
i0 = new Image;
i0.src = 'image/entree 2.jpg';
SiClickGoTo[0] = "entree.html";
imgPath[0] = i0.src;
i1 = new Image;
i1.src = 'image/entree 3.jpg';
SiClickGoTo[1] = "entree.html";
imgPath[1] = i1.src;
i2 = new Image;
i2.src = 'image/entree 4.jpg';
SiClickGoTo[2] = "entree.html";
imgPath[2] = i2.src;
i3 = new Image;
i3.src = 'image/entree 5.jpg';
SiClickGoTo[3] = "entree.html";
imgPath[3] = i3.src;
}
a = 0;
function ejs_img_fx(img)
{
if(img && img.filters && img.filters[0])
{
img.filters[0].apply();
img.filters[0].play();
}
}

function StartAnim()
{
if (document.images)
{
document.write('<A HREF="#" onClick="ImgDest();return(false)"><IMG SRC="image/entree 2.jpg" BORDER=0 ALT=Menu NAME=defil style="filter:progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=100,Duration=1)"></A>');
defilimg()
}
else
{
document.write('<A HREF="entree.html"><IMG SRC="image/entree 2.jpg" BORDER=0></A>')
}
}
function ImgDest()
{
document.location.href = SiClickGoTo[a-1];
}
function defilimg()
{
if (a == 4)
{
a = 0;
}
if (document.images)
{
ejs_img_fx(document.defil)
document.defil.src = imgPath[a];
tempo3 = setTimeout("defilimg()",4000);
a++;
}
}
</SCRIPT>
<!-- FIN DU SCRIPT -->
<title> L'oasis de Figuig</title>
</head>
<body>
<!-- DEBUT DU SCRIPT -->
<!--
SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT
http://www.editeurjavascript.com/scripts/scripts_images_1_55.php
-->
<SCRIPT LANGUAGE="JavaScript">
StartAnim()
</SCRIPT>
<!-- FIN DU SCRIPT -->

</html>
dinils - 3 déc. 2008 à 16:20
Bonjour !

Excellent script. Peut-on insérer un paramètre _blank sur le lien de l'image ?

Merci pour la réponse !
Babelle - 15 mars 2011 à 23:08
Bonjour!
je viens de passer 4h à trouver comment ouvrir les liens dans une nouvelle page!
voici le code dans le head : 
<!-- DEBUT DU SCRIPT -->
<script language="JavaScript">
/*
SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT
http://www.editeurjavascript.com
*/
imgPath = new Array;
SiClickGoTo = new Array;
version = navigator.appVersion.substring(0,1);
if (version >= 3)
{
i0 = new Image;
i0.src = 'http://image.gif';
SiClickGoTo[0] = "http://www.adresse.com";
imgPath[0] = i0.src;
i1 = new Image;
i1.src = 'http://image.jpg';
SiClickGoTo[1] = "http://www.adresse.com";
imgPath[1] = i1.src;
i2 = new Image;
i2.src = 'http://image.jpg';
SiClickGoTo[2] = "http://www.adresse.com";
imgPath[2] = i2.src;

}
a = 0;
function StartAnim()
{
if (version >= 3)
{
document.write('<A HREF="#"onClick="ImgDest();return(false)"><IMG SRC="http://www.--------.jpg" BORDER=0 ALT="Lire la news" NAME=defil style="filter:progid:DXImageTransform.Microsoft.Fade(duration=2.5,overlap=5.0)"></A>');
defilimg()
}
else
{
document.write('<A HREF="http://www.---------.htm"><IMG SRC="http://www.--------.jpg" BORDER=0></A>')
}
}
function ImgDest()
{
window.open(SiClickGoTo[a-1],'mainFrame')
}
function defilimg()
{
if (a == 8)
{
a = 0;
}
if (version >= 3)
{
document.defil.src = imgPath[a];
tempo3 = setTimeout("defilimg()",4000);
a++;
}
}
</script><!-- FIN DU SCRIPT -->


Et dans la partie body là ou vous voulez qu'il apparaisse : 

<!-- DEBUT DU SCRIPT -->
<!--
SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT
http://www.editeurjavascript.com
-->
<script language="JavaScript">
StartAnim();
</script><!-- FIN DU SCRIPT --><noscript>


Vous pouvez voir ce que cela donne sur http://creaminois.com
Ajouter un commentaire
Réponse
+0
moins plus
Lilli 16 mars 2005 à 12:31
Merci pour ta réponse, voici le script utilisé :

<html>
<head>
<!-- DEBUT DU SCRIPT -->
<SCRIPT LANGUAGE="JavaScript">
/*
SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT
http://www.editeurjavascript.com
*/
imgPath = new Array;
SiClickGoTo = new Array;
if (document.images)
{
i0 = new Image;
i0.src = 'image/entree 2.jpg';
SiClickGoTo[0] = "entree.html";
imgPath[0] = i0.src;
i1 = new Image;
i1.src = 'image/entree 3.jpg';
SiClickGoTo[1] = "entree.html";
imgPath[1] = i1.src;
i2 = new Image;
i2.src = 'image/entree 4.jpg';
SiClickGoTo[2] = "entree.html";
imgPath[2] = i2.src;
i3 = new Image;
i3.src = 'image/entree 5.jpg';
SiClickGoTo[3] = "entree.html";
imgPath[3] = i3.src;
}
a = 0;
function ejs_img_fx(img)
{
if(img && img.filters && img.filters[0])
{
img.filters[0].apply();
img.filters[0].play();
}
}

function StartAnim()
{
if (document.images)
{
document.write('<A HREF="#" onClick="ImgDest();return(false)"><IMG SRC="image/entree 2.jpg" BORDER=0 ALT=Menu NAME=defil style="filter:progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=100,Duration=1)"></A>');
defilimg()
}
else
{
document.write('<A HREF="entree.html"><IMG SRC="image/entree 2.jpg" BORDER=0></A>')
}
}
function ImgDest()
{
document.location.href = SiClickGoTo[a-1];
}
function defilimg()
{
if (a == 4)
{
a = 0;
}
if (document.images)
{
ejs_img_fx(document.defil)
document.defil.src = imgPath[a];
tempo3 = setTimeout("defilimg()",4000);
a++;
}
}
</SCRIPT>
<!-- FIN DU SCRIPT -->
<title> L'oasis de Figuig</title>
</head>
<body>
<!-- DEBUT DU SCRIPT -->
<!--
SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT
http://www.editeurjavascript.com/scripts/scripts_images_1_55.php
-->
<SCRIPT LANGUAGE="JavaScript">
StartAnim()
</SCRIPT>
<!-- FIN DU SCRIPT -->

</html>

 Ajouter un commentaire
Ajouter un commentaire
Réponse
+0
moins plus
Oli 16 mars 2005 à 13:18
Dans la fonction :
function defilimg()
{
if (a == 4)
{
remplacer ====> a = 0;
par =======> ImgDest();
}
if (document.images)
{
ejs_img_fx(document.defil)
document.defil.src = imgPath[a];
tempo3 = setTimeout("defilimg()",4000);
a++;
}
}

et la boucle s'interrompt à la dernière image et accède à la page entree.html.

 Ajouter un commentaire
Raphaelo - 12 nov. 2009 à 19:53
Bonjour,
J'utilise le même type de script et j'aimerais placer une fonction 'stop''continue' par survol de la souris.
Par avance Merci.
<SCRIPT LANGUAGE="JavaScript">
imgPath = new Array;
SiClickGoTo = new Array;

if (document.images)
{
i0 = new Image;
i0.src = 'http://www.-----jpg';
SiClickGoTo[0] = "http://www.----.htm";
imgPath[0] = i0.src;
i1 = new Image;
i1.src = 'http://www.-----.jpg';
SiClickGoTo[1] = "http://www.----.htm";
imgPath[1] = i1.src;
i2 = new Image;
i2.src = 'http://www.-------.jpg';
SiClickGoTo[2] = "http://www.-----.htm";
imgPath[2] = i2.src;
}
a = 0;
function ejs_img_fx(img)
{
if(img && img.filters && img.filters[0])
{
img.filters[0].apply();
img.filters[0].play();
}
}

function StartAnim()
{
if (document.images)
{
document.write('<A HREF="#"onClick="ImgDest();return(false)"><IMG SRC="http://www.--------.jpg" BORDER=0 ALT="Lire la news" NAME=defil style="filter:progid:DXImageTransform.Microsoft.Fade(duration=2.5,overlap=5.0)"></A>');
defilimg()
}
else
{
document.write('<A HREF="http://www.---------.htm"><IMG SRC="http://www.--------.jpg" BORDER=0></A>')
}
}
function ImgDest()
{
window.open(SiClickGoTo[a-1],'mainFrame')
}
function defilimg()
{
if (a == 3)
{
a = 0;
}
if (document.images)
{
ejs_img_fx(document.defil)
document.defil.src = imgPath[a];
tempo3 = setTimeout("defilimg()",3100);
a++;

}
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

</SCRIPT>

<script language="JavaScript" type="text/javascript">
StartAnim()
</script>

Configuration: Windows XP Internet Explorer 7.0
Lire la suite
Ajouter un commentaire
Réponse
+0
moins plus
gyam 9 févr. 2009 à 00:25
Superbe comme script!!

J'aimerai bien le compliquer un peu en allant chercher dans une base mysql (genre en local avec easyphp pour tester au debut) le chemin de l'image et le lien dédié. Sachant que le nombre d'images peut varier..

Malheureusement, je connais que le php, java, va valoir que je m'y mette serieusement :)

 Ajouter un commentaire
Ajouter un commentaire
Réponse
+0
moins plus
mrdo 30 sept. 2009 à 19:18
salut,
j'ai ce petit script à proposer, glané sur le net.
il marche impeccable: défilement d'images avec lien vers pages, message d'un même blog, ou page, message d'un autre blog
il tourne sur mon blog: http://artgallery-mrdo.blogspot.com/
et sur mon blog: http://mr-do-just-for-fun.blogspot.com/ sur celui-ci le script est visible et copiable.
(il renvoie à des pages sur mon autre blog)
@+

 Ajouter un commentaire
mrdo - 11 oct. 2009 à 14:54
alors,
sympa ou pas ce script? utile à certains?
Ajouter un commentaire
Réponse
+0
moins plus
Calen 12 oct. 2009 à 22:27
Hyper utile !! Exactement ce que je cherchais, en plus sans casse tête.

Un grand merci à toi

 Ajouter un commentaire
Ajouter un commentaire
Réponse
+0
moins plus
mrdo 8Messages postés 12 octobre 2009Date d'inscription 18 juin 2011Dernière intervention 12 oct. 2009 à 22:38
c'est un plaisir

@+

 Ajouter un commentaire - Site web
Afficher les 7 commentaires
mrdo- 23 janv. 2010 à 15:19
sinon essaye de déplacer ton mini lecteur, peut-être un conflit dans le code de ta page
mrdo› mrdo - 2 févr. 2010 à 21:33
j'ai enlevé de mon blog (vu que pas de nouvelles) c'est pas ma pub.
Mikado › xvtl - 24 janv. 2010 à 12:00
Bonjour,

En effet c'est le script marquee qui est sur ton site.

Tu n'oublierais pas de mettre un BR à la fin de chaque lien ?

<br>

Car le code HTML vu le codage tes images se trouveront les unes à cotés des autres soit c'est logique que tu vois toujours la première image.

Bon amusement,
Mikado
Course-folle.com ^^
Ajouter un commentaire
Réponse
+0
moins plus
viamou 27 janv. 2010 à 14:05
bonjour
je cherche le script ou le code source d'un carrousel, images qui se défilent mais avec des numéros
comme sur le site (sur la droite)


http://www.rueducommerce.fr/home/index.htm

merci d'avance

 Ajouter un commentaire
seb - 5 févr. 2010 à 19:31
Dis moi Viamou je cherche exactement le même type de défilement ! AS TU TROUVé un script ? Ce serait trop sympa de le partager


D'avance merci ; )
Ajouter un commentaire
Réponse
+0
moins plus
viamou 8 févr. 2010 à 09:20
malheureusement, non je n'ai pas trouvé , si j'ai quelque chose je te tiens en courant t'inquiète ;)

 Ajouter un commentaire
Ajouter un commentaire
Réponse
+0
moins plus
Mikado 8 févr. 2010 à 10:34
Bonjour, vu le style de l'exemple c'est un canevas sur lequel est lu un fichier XML.
Dans le cas ou c'est sélectionné, à gauche il propose la photo plus grande et affiche le contenu texte du produit.
Le lien du caddy est unique et garde l'id du produit qui sera ajouté au caddy. (reprise de la variable id)

C'est une simple lecture de fichier XML... dans un swf.
Les produits sont toujours identiques. Donc pas de craintes de bases de données.

Si par après vous souhaitez le faire en base de données... vous faites enclencher 1 fichier php à 1h du matin tous les jours, la génération de ce fichier.
Ainsi, vous avez un affichage différent par jour. (ou, à chaque visite d'un internaute.. on génère un xml ... mais là, ça risque de chauffer, c'est du personnalisé.)

Euh... non je n'ai pas ce script non plus lol

 Ajouter un commentaire
Ajouter un commentaire
Réponse
+0
moins plus
MikeMarin 2Messages postés 2 février 2010Date d'inscription 24 septembre 2011Dernière intervention 24 sept. 2011 à 07:20
j'ai la solution tout dépant après en combien de temps les images vont défiler enfin quand la dernière image apparait

<html>
<body>
<?php
header('Refresh: LETEMPSDEDEFILEMENTDESIMAGES;URL=LURAREDIRIGER');
echo'LEMESSAGEQUETUVEUXQUANDLAREDIRECTIONSELANCE'
?>
</body>
</html>

tu dois changer : LETEMPSDEDEFILEMENTDESIMAGES avec le temps de défilement des images

LURAREDIRIGER avec ta page de site (celle vers laquelle tu veux rediriger)

LEMESSAGEQUETUVEUXQUANDLAREDIRECTIONSELANCE avec tout est à gauche ;)

derien sa ma fait plaisir ;)

 Ajouter un commentaire
Ajouter un commentaire
Réponse
+0
moins plus
MikeMarin 2Messages postés 2 février 2010Date d'inscription 24 septembre 2011Dernière intervention 24 sept. 2011 à 07:21
J'espere que je t'ai donné ton bonneur

 Ajouter un commentaire
Ajouter un commentaire
Posez votre question
Ce document intitulé « Script défilement d'image » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
Passage au tout numérique : quel coût pour les particuliers ?