Faire défiler en boucle une image dans un <table>

Soyez le premier à donner votre avis sur cette source.

Vue 13 943 fois - Téléchargée 1 066 fois

Télécharger le projet
Commenter

Description

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 / Exemple : 


<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
Télécharger le projet

Codes Sources

A voir également

Ajouter un commentaire

Commentaire

Signaler
djtadpole
Messages postés
11
Date d'inscription
vendredi 28 septembre 2007
Statut
Membre
Dernière intervention
14 avril 2011
 -
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>

DÉFILEMENT D'UNE IMAGE DANS UN TABLEAU

<!--

-->

<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>

</html>
S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.