IdentifiantMot de passe
Loading...
Mot de passe oubli� ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les r�ponses en temps r�el, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

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


Sujet :

JavaScript

Mode arborescent

Message pr�c�dent Message pr�c�dent   Message suivant Message suivant
  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Juillet 2006
    Messages
    54
    D�tails du profil
    Informations personnelles :
    Localisation : Canada

    Informations forums :
    Inscription : Juillet 2006
    Messages : 54
    Par d�faut Barre de d�fillement avec 3 buttons(images) en javascript
    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 : S�lectionner tout - Visualiser dans une fen�tre � part
    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 : S�lectionner tout - Visualiser dans une fen�tre � part
    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>
    Images attach�es Images attach�es  

Discussions similaires

  1. lien avec button image
    Par goldy91 dans le forum D�buter
    R�ponses: 7
    Dernier message: 17/06/2009, 11h22
  2. [HTML 4.0] Pas de barre de d�fillement avec window.showModDialog
    Par beegees dans le forum Balisage (X)HTML et validation W3C
    R�ponses: 4
    Dernier message: 19/02/2009, 20h09
  3. personnaliser une barre d'outils avec une image
    Par rider74 dans le forum MFC
    R�ponses: 2
    Dernier message: 03/01/2007, 21h28
  4. R�ponses: 5
    Dernier message: 08/02/2005, 20h50
  5. R�ponses: 13
    Dernier message: 14/10/2003, 14h31

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo