begin process at 2012 05 28 10:02:44
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Trucs Amusants

 > FAIRE DÉFILER EN BOUCLE UNE IMAGE DANS UN <TABLE>

FAIRE DÉFILER EN BOUCLE UNE IMAGE DANS UN <TABLE>


 Information sur la source

Note :
Aucune note
Catégorie :Trucs Amusants Classé sous :dhtml, javascript, scroll Niveau :Débutant Date de création :12/12/2010 Vu / téléchargé :6 118 / 413
Auteur : Isole

Ecrire un message privé
Commentaire sur cette source (1)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
Voici une démonstration simple qui permetra je pense de comprendre comment faire défiler une image dans une cellule d'un tableau. En effet cette technique existe deja avec les <DIV> mais moi je n'est pas encore trouvé de post expliquant comment utiliser ceci avec des <table>

Source

  • <html>
  • <head>
  • <title>D É F I L E</title>
  • </head>
  • <br><H3> DÉFILEMENT D'UNE IMAGE DANS UN TABLEAU</H3><br>
  • <body OnLoad="Defilement();">
  • <input type="button" value="AFFICHÉ" OnClick="DefilementAffiche()">
  • <input type="button" value="CACHÉ" OnClick="DefilementCache()">
  • <br>
  • <input type="texte" disabled="disabled" size=20>
  • <input type="button" value="DÉMARRER" OnClick="Defilement()">
  • <input type="button" value="STOP" OnClick="Stop()">
  • <input type="texte" id="AffCompteur" size=14>
  • <!-- /* Vous pouvez aussi utiliser un <DIV> </DIV>*/
  • <div id="SectImage2" style="background-image:url(GrandProgress.png); position:relative; top:50px; left:30px; height:50px; width:100px;" > </div>-->
  • <table border=3 width=400 height=45 >
  • <td id="SectImage1" width=120 style="color:red; height:10px;"> </td>
  • <td align="center" >Mettez ce que vous voulez</td>
  • </table>
  • <script type="text/javascript" language="javascript">/* POUR LE DEFILEMENT */
  • var Moteur=0;
  • function Defilement(){
  • Moteur +=1;
  • SectImage1.style.background = "black url(GrandProgress.png) repeat scroll 0"+Moteur+"px +0px";
  • AffCompteur.value="Moteur= "+Moteur;
  • if(Moteur >5000){Moteur=0;}
  • Minuteur = setTimeout('Defilement()',25);
  • }
  • </script>
  • <script type="text/javascript" language="javascript">/* POUR LE DEFILEMENT */
  • function DefilementAffiche(){
  • document.getElementById('SectImage1').style.visibility='visible';}
  • function DefilementCache(){
  • document.getElementById('SectImage1').style.visibility='hidden';}
  • function Stop(){
  • clearTimeout(Minuteur);
  • }
  • </script>
  • </body>
  • </html> 
<html>
<head>
<title>D É F I L E</title>
</head>
<br><H3>      DÉFILEMENT D'UNE IMAGE DANS UN TABLEAU</H3><br>

<body OnLoad="Defilement();">
<input type="button" value="AFFICHÉ" OnClick="DefilementAffiche()">
<input type="button" value="CACHÉ" OnClick="DefilementCache()">
<br>
<input type="texte" disabled="disabled" size=20>
         <input type="button" value="DÉMARRER" OnClick="Defilement()">
         <input type="button" value="STOP" OnClick="Stop()">
         <input type="texte"  id="AffCompteur" size=14>



<!-- /* Vous pouvez aussi utiliser un <DIV> </DIV>*/ 
<div id="SectImage2" style="background-image:url(GrandProgress.png); position:relative; top:50px; left:30px; height:50px; width:100px;" >  </div>-->



<table border=3 width=400 height=45 >
<td  id="SectImage1"  width=120 style="color:red; height:10px;"> </td>
<td align="center" >Mettez ce que vous voulez</td>
</table>



<script type="text/javascript" language="javascript">/*  POUR LE DEFILEMENT  */
var Moteur=0;
function Defilement(){
Moteur +=1;
	SectImage1.style.background = "black url(GrandProgress.png)  repeat scroll 0"+Moteur+"px +0px";
	AffCompteur.value="Moteur= "+Moteur;
if(Moteur >5000){Moteur=0;}
	
Minuteur = setTimeout('Defilement()',25);
}

</script>


<script type="text/javascript" language="javascript">/*  POUR LE DEFILEMENT  */
function DefilementAffiche(){
document.getElementById('SectImage1').style.visibility='visible';}
function DefilementCache(){
document.getElementById('SectImage1').style.visibility='hidden';}

function Stop(){
clearTimeout(Minuteur);
}

</script>


</body>
</html>

 Conclusion

RAS

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Sources de la même categorie

Source avec Zip IMAGES DÉFILANT SUR UN CYLINDRE (SCROLLING IMAGES) par william voirol
Source avec Zip IMAGES DÉFILANT VERTICALEMENT (SCROLLING IMAGES) par william voirol
Source avec Zip IMAGES DANSANTES 4: MOUVEMENT DE LA TORTUE par william voirol
Source avec Zip IMAGES DANSANTES 3: MOUVEMENT ALÉATOIRE ORIENTÉ par william voirol
Source avec Zip IMAGES DANSANTES 2: MOUVEMENT ALÉATOIRE SANS SUPERPOSITIONS par william voirol
Toutes les sources de la catégorie Trucs Amusants

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture FORMULAIRE TABLEAU par vic511
Source avec Zip Source avec une capture SUBDIVISER LE RÉSULTAT D'UNE RECHERCHE EN PAGES par kimmp
Source avec Zip Source avec une capture CALCULATRICE HEURE par m22001111
Source avec Zip Source avec une capture COPIER DU TEXTE par m22001111
DHTML IE FILTRE DÉGRADÉ (OUTIL HTML POUR DÉVELOPPEUR) par internetdev

Commentaires et avis

Commentaire de djtadpole le 13/12/2010 12:27:13

Simple et efficace.
J'ai ajouté quelques fonctionnalités/paramêtres comme la vitesse et le sens.

<html>
<head><title>D É F I L E</title></head>
<body OnLoad="Defilement();">
<H3>DÉFILEMENT D'UNE IMAGE DANS UN TABLEAU</H3>
<input type="button" value="AFFICHER" OnClick="DefilementAffiche()">
<input type="button" value="CACHER" OnClick="DefilementCache()">
<br>
<input type="button" value="CHANGE SENS" OnClick="ChangeSens()">
<br>
<input type="button" value="+ VITE" OnClick="DecalageAugmente()">
<input type="button" value="- VITE" OnClick="DecalageDiminue()">
<br>
<input type="button" value="DÉMARRER" OnClick="Defilement()">
<input type="button" value="STOP" OnClick="Stop()">
<input type="text" id="AffCompteur" size=14>
<br>

<div id="SectImage1" style="background-image:url(GrandProgress.png);height:45px;width:200px;"></div>

<!--
<table border="3" width="400" height="45"><td  id="SectImage1"  width=120 style="color:red; height:10px;"></td></table>
-->

<script type="text/javascript" language="javascript">/*  POUR LE DEFILEMENT  */
var Moteur=0;
var Sens=1;
var Decalage=1;
var Reactu=25;
var Vitesse=1;
var Longueur=820;
function Defilement(){
Moteur += Sens*Decalage ;
SectImage1.style.background = "black url(GrandProgress.png)  repeat scroll 0"+Moteur+"px +0px";
AffCompteur.value="Moteur= "+Moteur;
if(Moteur>Longueur){Moteur=0;}
if(Moteur<0){Moteur=Longueur;}
Minuteur = setTimeout('Defilement()',Reactu);
}
</script>
<script type="text/javascript" language="javascript">/*  POUR LE DEFILEMENT  */
function DefilementAffiche(){document.getElementById('SectImage1').style.visibility='visible';}
function DefilementCache(){document.getElementById('SectImage1').style.visibility='hidden';}
function Stop(){clearTimeout(Minuteur);}
</script>
<script type="text/javascript" language="javascript">/*  POUR LE DEFILEMENT  */
function ChangeSens() {Sens*=-1;}
function DecalageAugmente() {Decalage+=1;}
function DecalageDiminue() {if(Decalage>1)Decalage-=1;}
</script>
</body>
</html>

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Spécialiste Javascript : LA QUESTION ! (valeur scroll sous ie5.0) [ par Jin ] Quelqu'un connaîtrait-il l'équivalent de document.body.scrollTopdocument.body.scrollLeft(Valeur de la position des barres de défilements)sous internet BASE DE DONNEES ET JAVASCRIPT(DHTML) [ par dt_web ] ;-)Dt_WebSalut !Je cherche le moyen d'utiliser une base de donn&#233;e Access sous Javascript(DHTML) et la g&#233;rer(lecture/&#233;criture)...Merci d Jeux dhtml javascript [ par Cyreb ] Voila, je regarde depuis longtemps les sources proposé sur ce site et je m'interesse aux jeux en javascripts, pourquoi ne pas créer de veritable proje Besoin d'aide (Je suis un ignare en Javascript et DHTML) [ par anakyl ] Bonjour à tous,Je souhaite solliciter votre aide pour un travail que je dois effectuer, car avant aujourd'hui je ne savais pas ce que l'on pouvait fai Pb de scroll en javascript associer a des ancres... [ par chandler_vodkamartini ] Voilou, bonjour les gens...alors ptit probleme pas sympa, je travaille sur un site sur lequel on trouve deux acces a la navigation. La navigation seff Scroll javascript [ par Azraka ] Bonjour, j'ai fait un petit bout de code javascript pour faire un scroll horizontal, ce code marche très bien sous firefox mais pose problème sous IE. [CS]Un thème HTML [ par rt15 ] Salut, Il y a pas mal de questions sur le HTML qui finissent dans la bar (Ou sur le site du langage côté serveur utilisé, alors que le problème se li Conflit entre bibliotheques javascript [ par SkYbeD ] Bonsoir ! Je développe un site dynamique en php cependant j'ai était amené à utiliser deux effets javascript dans une page : Une lightbox utilisant c intéraction activex/javascript [ par gabole ] bonjour à tous voila mon soucis: j'ai un fichier ocx, qui fonctionne bien avec une application type swf2exe. ce que je souhaite, c'est pouvoir utili Bouton et liste déroulante dans un formulaire [ par lebender33 ] Bonjour à tous, Ca fait super longtemps que je n'avais pas codé et je me suis lancer dans un script grease monkey html/javascript pour rendre l'utili


Nos sponsors


Sondage...

Comparez les prix


Archos 5 Internet Tablette 500 Go
Entre 396€ et 444€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,608 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)