Barre de défillement avec 3 buttons(images) en javascript

1 pièce(s) jointe(s)

Bonjour tout le monde,
Je ne sais pas est ce que ma requête est dans le bon endroit.
J’ai un code pour créer un ascenseur personnalité grâce à des buttons (images en bas et en haut).
Ce que je voulais faire, c’est d’ajouter un button au milieu de la barre pour afficher combien du texte il reste.
Voic mon code :
éplacement géré par javascript

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script language="javascript" type="text/javascript">
var Timer;
var Pas = 3;
function moveLayer(Sens) {
	Objet=document.getElementById("contenu");
    if(parseInt(Objet.style.top) + (Pas*Sens)>0)  {
		clearTimeout(Timer);
	}
	else if(parseInt(Objet.style.top) + (Pas*Sens)<-(Objet.offsetHeight-document.getElementById("support").offsetHeight)) {
		clearTimeout(Timer);
	}
    else {
        Objet.style.top = (parseInt(Objet.style.top) + (Pas*Sens)) + "px";
	}
	Timer = setTimeout("moveLayer(" + Sens + ");", 30);
}
</script>

Positionnement des bloque grâce au css

Code:

1
2
3
4
5
6
7
8
9
10
11
<div id="support" style="position:relative; width:150px; height:280px; overflow:hidden; border:1px solid #000;">	
	<div id="contenu" style="position:absolute; top:0;">
		DEBUT<br />ligne1<br />ligne2<br />ligne3<br />ligne4<br />ligne5<br />ligne6<br />
		ligne7<br />ligne8<br />ligne9<br />ligne10<br />ligne11<br />ligne12<br />ligne13<br />
		ligne14<br />ligne15<br />ligne16<br />ligne17<br />ligne18<br />ligne19<br />FIN<br />
	</div>
	<div style="background-color:#0F0; width:22px; height:280px; position:absolute; right:0; border-left:1px solid #000;">
		<img onmouseover="moveLayer(1);" onmouseout="clearTimeout(Timer);" src="slideup.png" style="cursor:pointer; position:absolute; right:0;" alt="" />
		<img onmouseover="moveLayer(-1);" onmouseout="clearTimeout(Timer);" src="slidedown.png" style="cursor:pointer; position:absolute; right:0; bottom:0;" alt="" />		
	</div>
</div>

bonjour,

Il faut donc que tu gères une div ou une image "ascensseur" que tu déplaces dans ta div qui simule la barre de défilement en appliquant pour sa valeur top un ratio entre la taille totale de la div "scrollée" qui a pour équivalent la div "barre de défilement" et la position de la div contenu qui a pour équivalent le bouton ascensseur

Barre de défillement avec 3 buttons(images) en javascript

C'est exactement ce que j'ai pensé au début,mais est ce que vous avez une partie de code?