11485 sujets

JavaScript, DOM et API Web HTML5

Faire un defilement horizontal d'images au passage de la souris ?

Pages :
Bonjour à tous,

Je suis photographe et je souhaiterai faire un défilement d'images au passage de la souris comme cet exemple:
http://www.mydesign.com/fr/espace~ph~108~39.html

J'ai trouvé toutes sortes de diaporama en javascript mais pas ce genre là.

Si vous avez des liens à me donner ou autre, je suis preneuse.
Merci d'avance, Smiley smile
Modifié par zooming (03 Jan 2007 - 11:14)
Dans ta page d'exemple ils utilisent Flash. Cependant c'est faisable sans. Ce que tu cherches c'est un script tout fait ou tu veux/peux le faire toi-même ?

Si tu veux le faire toute seule il faut que tu cherches du coté de la gestion du temps du style setTimeout ensuite tu joues avec les évènements onmouseover et onmouseout sur les boutons qui font défiler le tout et après je pense qu'il est possible de trouver qqch à faire avec le positionnement css.

Si tu cherches un script tout fait je peux pas t'aider j'en ai jamais vu et j'en ai jamais cherché.
Merci de ta réponse. Effectivement je cherche une solution sans flash.
Le positionnement css ça je peux me débrouiller mais je n'ai jamais utiliser "settimeout" je ne sais pas comment le mettre en place.

Si quelqu'un peut m'en dire un peu plus... Smiley confused
Je veux bien t'aider mais quel est ton niveau en javascript ?

1 - Vraiment nul : je sais pas ce qu'est une fonction ni comment on l'appelle ni à quoi çà sert, etc.
--> Trouve un site pour apprendre les bases.

2 - Intermédiaire : je connais les bases ( syntaxe, instructions de base, évènements ) mais je sais pas comment fonctionne setTimeout.
--> Cherche setTimeout sur google et tu vas trouver tout de suite.
Modifié par CNeo (03 Jan 2007 - 11:50)
Pour répondre à ta question:

mon niveau en javascript est vraiment nul.

Pour le moment je me suis concentrée uniquement sur les bases du xhtml et du css (par les sites qui justement t'apprennent les bases)

Il y a encore quelques semaines je ne savais pas mettre en forme avec du css. Je fait petit à petit c'est plus facile à digerer.

Actuellement, tous les javascripts que j'utilise sont des codes tout fait copier/coller et je t'avoue que je remercie les gars qui comme toi sont plus calés dans le domaine et aident les débutants comme moi.

Tu comprends que pour moi le flash c'est pas pour demain.

Peut être aussi que je pourrais me contenter d'un diaporama tout simple.
Mais bon je demande à ceux qui savent, on sait jamais

Smiley smile et puis c'est pas dans ma nature de laisser tomber parce que c'est compliqué Smiley murf

Je vais effectivement faire une recherche sur google pour time out.

Merci,
Tu n'as fait que du XHTML et des CSS jusqu'à maintenant ? Tu ne connais rien à la programmation ?

C'est pas un reproche, c'est juste une question, on a tous commencé un jour.
Modifié par CNeo (03 Jan 2007 - 13:49)
Et oui!

Et le pire c'est que plus t'en apprends et moins tu as l'impression d'en savoir !

C'est un peu déroutant mais bon un pas après l'autre ... pas vrai? Smiley cligne
zooming a écrit :
Et le pire c'est que plus t'en apprends et moins tu as l'impression d'en savoir !
Oui je ressent çà aussi des fois.
Donc si tu n'y connais rien du tout à la programmation il faut apprendre les bases de la "vrai" programmation. Personnellement je te conseillerais de trouver un bon bouquin mais bon si tu es pressée tu peux essayer d'apprendre sur un site internet. Un exemple de site pas trop mal : ici.
Bonjour,

Juste pour être averti des réponses, car c'est aussi ce qu'il me faudrait pour mon site.

J'ai des pages contenant de très grandes images dans des div, et la barre de défilement en bas n'est vraiment pas pratique. J'aimerais un bouton sur le côté pour déplacer l'image...
Modifié par ARGo (14 Sep 2008 - 11:17)
Je suis en train de developper un site avec un diaporama défilant dans le style, c'est tout a fait possible, mais effectivement c'est compliqué. Si il n'y a pas d'utilisation de base de données, peut-être que avec flash cela reste plus simple à coder.
Voilà un exemple:
http://www.gdbautomotive.com

Le code est le suivant:

Top.onmouseover = function(){
    
    timer = setInterval(function() {
        if (Diapo.offsetTop-20) > 0){
          clearInterval(timer);
          Diapo.style.top = '0px';
          }
        else {
          slide -= 20;
          Diapo.style.top = slide+'px';
          }
      }, 50);
    }

Le principe est le suivant, on a un premier div en overflow:hidden qui contient un autre div qui contient les images, et on fait varier la valeut top du second div celon la position de la souris ou avec un onmouseover sur les fleches.

Pour voir le code complet regarder là:
http://www.gdbautomotive.com/scripts/slide.js

Le petit secret pour que le code soit reactif c'est d'imbriquer un onmouseover dans un onmousemove.

Je confirme qu'il faut connaitre un peu js pour l'adapter à son site, de plus comme vous le remarquerez il y a aussi d'autre fonctions utilisées, par exmple pour adapter le diaporama à la taille de l'écran.
Modifié par matmat (08 Feb 2008 - 18:30)
Bonsoir
Je sais que cela ne se fait pas mais voici un exemple de code pour faire défiler du texte dans une page. Tu peux mettre des images à la place du texte

D'abord dans ta page HTML

<body>
<div id="ici"></div>
<script  type="text/javascript" src="defile.js">
</script>

</body>


puis le fichier defile.js


function defilement(message)
{
	var ici = document.getElementById("ici");
	ici.innerHTML = msg.substring(pos,msg.length)+msg.substring(0,pos);
	pos++;
	if (pos > msg.length) pos = 0;
	window.setTimeout("defilement()",100);
}
var pos = 0;
var msg = "tu peux faire defiler des images ou du texte ?";
msg ="...                     ..."+msg;
defilement(msg);


adapte ce petit bout de code pour essayer

bon courage
S'il n'est pas trop tard pour une réponse...
J'ai trouvé une source que j'ai adaptée à mon usage...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

  <HEAD>
    <TITLE>Défilement horizontal d'images...</TITLE>
    <style type="text/css">
<!--
      BODY {
        BACKGROUND-COLOR: #ffffff;
        border: 0px;
        MARGIN: 0px 0px 0px 0px;
        text-align: center;
      }
-->
    </style>
  </HEAD>

<BODY oncontextmenu="return false" ondragstart="return false" onselectstart="return false">


<TABLE cellSpacing=0 cellPadding=0 width="100%" align=center border=0>
  <TBODY>
  <TR>
    <TD align=middle>
      <DIV>
        <TABLE cellSpacing=0 cellPadding=0 width=768 align=center border=0>
          <TBODY>
            <TR><TD height=3></TD></TR>

<script language="javascript" type="text/javascript">
  document.write('<script language="javascript" type="text\/javascript" src="cinema.js"><\/script>');
</script>

<script language="javascript" type="text/javascript">
var sliderwidth="50px"
var sliderheight="120px"
var slidespeed=2
slidebgcolor="00OO00"
var finalslide=''
var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(" ")+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide
function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+4+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+4
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup
function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+0))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+4+"px"
if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+0))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+4+"px"
}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+0))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+4
if (ns_slide2.left>(actualwidth*(-1)+0))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+4
}
}
if (iedom||document.layers){
with (document){
if (iedom){
write('<table width=768 align=center border=0 id="cinesearch"><tr><td>')
write('<div style="position:relative;top:1px;left:0px;width:100%;height:1;" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div style="position:absolute;top:1px;left:0px;width:100%;height:85;overflow:hidden;">')
write('<div id="test2" style="position:absolute;width:100%;left:0px;top:1px"></div>')
write('<div id="test3" style="position:absolute;width:100%;left:-1000px;top:1px"></div></div></div>')
write('</td></tr></table>')
}
else if (document.layers){
}
}
}
</SCRIPT>

            <TR><TD height=3></TD></TR>
          </TBODY>
        </TABLE>
      </DIV>
    </TD>
  </TR>
  </TBODY>
</TABLE>

</BODY>

</HTML>



et le fichier de commande cinema.js


var leftrightslide = new Array();

leftrightslide[0] ='<a href="#" OnClick="javascript:;return false;"><IMG width=60 height=80 bordercolor=000000 src="timbres/t1114.jpg" border=1 alt="  1114 (DVD) - INDIGENES  "></img></a>';
leftrightslide[1] ='<a href="#" OnClick="javascript:;return false;"><IMG width=60 height=80 bordercolor=000000 src="timbres/t1113.jpg" border=1 alt="  1113 (DVD) - LE DIABLE S`HABILLE EN PRADA  "></img></a>';
leftrightslide[2] ='<a href="#" OnClick="javascript:;return false;"><IMG width=60 height=80 bordercolor=000000 src="timbres/t1112.jpg" border=1 alt="  1112 (DVD) - LA METHODE  "></img></a>';
leftrightslide[3] ='<a href="#" OnClick="javascript:;return false;"><IMG width=60 height=80 bordercolor=000000 src="timbres/t1111.jpg" border=1 alt="  1111 (DVD) - FAIR PLAY  "></img></a>';
leftrightslide[4] ='<a href="#" OnClick="javascript:;return false;"><IMG width=60 height=80 bordercolor=000000 src="timbres/t1110.jpg" border=1 alt="  1110 (DVD) - BARBIE FAIRYTOPIA : LA MAGIE DE L`ARC-EN-CIEL  "></img></a>';
leftrightslide[5] ='<a href="#" OnClick="javascript:;return false;"><IMG width=60 height=80 bordercolor=000000 src="timbres/t1109.jpg" border=1 alt="  1109 (DVD) - LITTLE MISS SUNSHINE  "></img></a>';
leftrightslide[6] ='<a href="#" OnClick="javascript:;return false;"><IMG width=60 height=80 bordercolor=000000 src="timbres/t1108.jpg" border=1 alt="  1108 (DVD) - DEMANDE A LA POUSSIERE  "></img></a>';
leftrightslide[7] ='<a href="#" OnClick="javascript:;return false;"><IMG width=60 height=80 bordercolor=000000 src="timbres/t1107.jpg" border=1 alt="  1107 (DVD) - AGE DIFFICILE OBSCUR  "></img></a>';
leftrightslide[8] ='<a href="#" OnClick="javascript:;return false;"><IMG width=60 height=80 bordercolor=000000 src="timbres/t1106.jpg" border=1 alt="  1106 (DVD) - MARIE-ANTOINETTE  "></img></a>';
leftrightslide[9] ='<a href="#" OnClick="javascript:;return false;"><IMG width=60 height=80 bordercolor=000000 src="timbres/t1105.jpg" border=1 alt="  1105 (DVD) - LE VENT SE LEVE  "></img></a>';
leftrightslide[10] ='<a href="#" OnClick="javascript:;return false;"><IMG width=60 height=80 bordercolor=000000 src="timbres/t1104.jpg" border=1 alt="  1104 (DVD) - QUAND J`ETAIS CHANTEUR  "></img></a>';
leftrightslide[11] ='<a href="#" OnClick="javascript:;return false;"><IMG width=60 height=80 bordercolor=000000 src="timbres/t1103.jpg" border=1 alt="  1103 (DVD) - PIEGES (INCAUTOS)  "></img></a>';
leftrightslide[12] ='<a href="#" OnClick="javascript:;return false;"><IMG width=60 height=80 bordercolor=000000 src="timbres/t1102.jpg" border=1 alt="  1102 (DVD) - BRICK  "></img></a>';
leftrightslide[13] ='<a href="#" OnClick="javascript:;return false;"><IMG width=60 height=80 bordercolor=000000 src="timbres/t1101.jpg" border=1 alt="  1101 (DVD) - MIAMI VICE - DEUX FLICS A MIAMI  "></img></a>';
leftrightslide[14] ='<a href="#" OnClick="javascript:;return false;"><IMG width=60 height=80 bordercolor=000000 src="timbres/t1100.jpg" border=1 alt="  1100 (DVD) - RIDING ALONE FOR THOUSANDS OF MILES  "></img></a>';
leftrightslide[15] ='<a href="#" OnClick="javascript:;return false;"><IMG width=60 height=80 bordercolor=000000 src="timbres/t1099.jpg" border=1 alt="  1099 (DVD) - NOS VOISINS, LES HOMMES  "></img></a>';
leftrightslide[16] ='<a href="#" OnClick="javascript:;return false;"><IMG width=60 height=80 bordercolor=000000 src="timbres/t1098.jpg" border=1 alt="  1098 (DVD) - VOL 93  "></img></a>';
leftrightslide[17] ='<a href="#" OnClick="javascript:;return false;"><IMG width=60 height=80 bordercolor=000000 src="timbres/t1097.jpg" border=1 alt="  1097 (DVD) - HOOLIGANS  "></img></a>';
leftrightslide[18] ='<a href="#" OnClick="javascript:;return false;"><IMG width=60 height=80 bordercolor=000000 src="timbres/t1096.jpg" border=1 alt="  1096 (DVD) - ENTRE DEUX RIVES  "></img></a>';
leftrightslide[19] ='<a href="#" OnClick="javascript:;return false;"><IMG width=60 height=80 bordercolor=000000 src="timbres/t1095.jpg" border=1 alt="  1095 (DVD) - LITTLE MANHATTAN  "></img></a>';


les 20 images se trouvant dans le sous/répertoires timbres...

upload/11707-t1095.jpg
upload/11707-t1114.jpg
upload/11707-t1113.jpg
upload/11707-t1112.jpg
upload/11707-t1111.jpg
upload/11707-t1110.jpg
upload/11707-t1109.jpg
upload/11707-t1108.jpg
upload/11707-t1107.jpg
upload/11707-t1106.jpg
upload/11707-t1105.jpg
upload/11707-t1104.jpg
upload/11707-t1103.jpg
upload/11707-t1102.jpg
upload/11707-t1101.jpg
upload/11707-t1100.jpg
upload/11707-t1099.jpg
upload/11707-t1098.jpg
upload/11707-t1097.jpg
upload/11707-t1096.jpg

Si ça peut servir...
J'espère que les 20 vignettes seront passées...
Salut,

C'est cool ! Merci.
Dis moi, comment fait tu pour rajouter un lien sur chacune de tes images?

Merci de ta réponse,
Salut Zellige,

tu vas dans le fichier de commande cinema.js,
et pour chacune des 20 lignes,
tu insères ta fonction javascript là où j'ai mis les 3 étoiles...

leftrightslide[0] ='<a href="#" OnClick="javascript:***;return false;"><IMG width=60 height=80 bordercolor=000000 src="timbres/t1114.jpg" border=1 alt=" 1114 (DVD) - INDIGENES "></img></a>';

Dis-moi si ça fonctionne...
A+
Comment fais-tu pour remplacer le texte par une image ?

Merci
Régis

coucou a écrit :
Bonsoir
Je sais que cela ne se fait pas mais voici un exemple de code pour faire défiler du texte dans une page. Tu peux mettre des images à la place du texte

D'abord dans ta page HTML

<body>
<div id="ici"></div>
<script  type="text/javascript" src="defile.js">
</script>

</body>


puis le fichier defile.js


function defilement(message)
{
	var ici = document.getElementById("ici");
	ici.innerHTML = msg.substring(pos,msg.length)+msg.substring(0,pos);
	pos++;
	if (pos > msg.length) pos = 0;
	window.setTimeout("defilement()",100);
}
var pos = 0;
var msg = "tu peux faire defiler des images ou du texte ?";
msg ="...                     ..."+msg;
defilement(msg);


adapte ce petit bout de code pour essayer

bon courage
phenix91 a écrit :
Salut Zellige,

tu vas dans le fichier de commande cinema.js,
et pour chacune des 20 lignes,
tu insères ta fonction javascript là où j'ai mis les 3 étoiles...

leftrightslide[0] ='<a href="#" OnClick="javascript:***;return false;"><IMG width=60 height=80 bordercolor=000000 src="timbres/t1114.jpg" border=1 alt=" 1114 (DVD) - INDIGENES "></img></a>';

Dis-moi si ça fonctionne...
A+

*----------------------------------------------------------------

Bonjour,

J'arrive à faire défiler les images mais quand je mets mon lien à l'emplacement que tu préconises... Ca ne fonctionne pas.
Pouvez m'aider
Merci
Hello Phenix91,
To script est extra, et fonctionne à merveille.
J'ai cependant une question : lorsque je l'insère dans une "template" de dreamweaver pour qu'il se répète sur toutes les pages qui l'utilisent, le script ne fonctionne plus (il fonctionne très bien quand il est mis sur chaque page individuellement). J'ai bien sur fait attention au chemin qui mêne au fichier "cinema.js" (qui ne s'appelle en fait plus comme ça mais peu importe).
Est ce que tu as une idée du pourquoi ça ne marche pas?
Sinon, comment faire pour que ce script ne soit pas répété à chaque fois sur les 15 pages qui l'utilisent ?
Merci pour la réponse, et aussi encore merci pour ce script très utile!
A.
Bonjour,
J'aimerai savoir comment vous faites pour ouvrir une page depuis la commande javascript (les trois étoiles)
D'avance merci
phenix91 a écrit :
Salut Zellige,

tu vas dans le fichier de commande cinema.js,
et pour chacune des 20 lignes,
tu insères ta fonction javascript là où j'ai mis les 3 étoiles...

leftrightslide[0] ='<a href="#" OnClick="javascript:***;return false;"><IMG width=60 height=80 bordercolor=000000 src="timbres/t1114.jpg" border=1 alt=" 1114 (DVD) - INDIGENES "></img></a>';

Dis-moi si ça fonctionne...
A+
Pages :
Sujet clos
Aller à