begin process at 2012 02 09 19:09:37
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Trucs Amusants

 > BOUGE DE LA ! DEPLACEMENT D'UN CALQUE.

BOUGE DE LA ! DEPLACEMENT D'UN CALQUE.


 Information sur la source

Note :
5,25 / 10 - par 8 personnes
5,25 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Trucs Amusants Niveau :Débutant Date de création :14/03/2004 Date de mise à jour :14/03/2004 15:56:50 Vu :12 943
Auteur : leris

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

 Description

Ce script permet de déplacer un calque dans 4 directions à la vitesse que l'on veut.
augmentation/diminution de la vitesse par clic sur faux-boutons dhtml ou saisie directe dans zone d'affichage.
Déplacement par survol de faux-boutons dhtml.

Source

  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  • <HTML>
  • <HEAD>
  • <TITLE>calques</TITLE>
  • <META http-equiv=Content-Type content=text/html;charset=iso-8859-1>
  • <STYLE type=text/css>
  • BODY {
  • margin: 0px;
  • color: black;
  • background-color:#D1AB7A;
  • text-align:center;
  • font-size:14px;
  • font-family: arial, helvetica;
  • }
  • #mon_cac {
  • POSITION: absolute;
  • Z-INDEX: 20;
  • LEFT: 250px;
  • TOP: 80px;
  • WIDTH: 100px;
  • HEIGHT: 100px;
  • PADDING: 0px;
  • MARGIN: 0px;
  • BACKGROUND-COLOR: red;
  • border: 1px solid blue;
  • }
  • .but{
  • height:23px;
  • text-align:center;
  • background-color: silver;
  • border-top: 2px solid white;
  • border-left: 2px solid white;
  • border-bottom: 2px solid black;
  • border-right: 2px solid black;
  • }
  • .but02{
  • cursor: pointer;
  • height:23px;
  • text-align:center;
  • background-color: silver;
  • border-top: 2px solid black;
  • border-left: 2px solid black;
  • border-bottom: 2px solid white;
  • border-right: 2px solid white;
  • }
  • </STYLE>
  • </HEAD>
  • <BODY>
  • <!-- boitier de pilotage -->
  • <DIV id=cont style="float:left; width:150px; font-size:14px; font-family: arial; font weight: bold; border:0px solid blue; margin-top: 10px; margin-left: 10px;text-align:center;">
  • <div style="width:50px;" class="but" onmouseover="bouge(1);this.className='but02';" onmouseout="tafini();this.className='but';">haut</div><br>
  • <div style="float:left; width:54;" class="but" onmouseover="bouge(3);this.className='but02';" onmouseout="tafini();this.className='but';">gauche</div>
  • <div style="float:left; width:40;"><INPUT size=3 value=5 id="nb" name="nb" style="background-color:black; color: yellow;border: 1px solid yellow;"></div>
  • <div style="float:left; width:54;" class="but" onmouseover="bouge(4);this.className='but02';" onmouseout="tafini();this.className='but';">droite</div><br><br>
  • <div id=soucont style="float: left; height:10px; width:150px; border:0px solid blue;">
  • <div id="less" style="float: left; width:30px; margin-left:7px;padding-top: 3px; cursor: pointer;" class="but" onClick="moreless(0);" onmouseDown="this.className='but02';" onmouseUp="this.className='but';">-</div><div style="float: left; margin-left:5px; width:50px;" class="but" onmouseover="bouge(2);this.className='but02';" onmouseout="tafini();this.className='but';">bas</div><div id="more" style="float: left; width:30px; margin-left: 5px; padding-top: 3px; cursor: pointer;" class="but" onClick="moreless(1);" onmouseDown="this.className='but02';" onmouseUp="this.className='but';">+</div>
  • </div>
  • </DIV>
  • <div id="txt" style="text-align:center;"><br><br>
  • Ce script permet de déplacer un calque dans 4 directions à la vitesse que l'on veut.<br>
  • augmentation/diminution de la vitesse par clic sur faux-boutons dhtml ou saisie directe dans zone d'affichage.<br>
  • Déplacement par survol de faux-boutons dhtml.</div>
  • <!-- le calque -->
  • <DIV id=mon_cac style="width:100px; height:100px;"></DIV>
  • <SCRIPT type=text/javascript>
  • // position du calque par rapport au haut
  • istop=80;
  • // la position du calque par rapport au coté gauche
  • isleft=250;
  • // longeur du calque
  • iswidth=100;
  • // hauteur du calque
  • isheight=100;
  • var nb;
  • var z;
  • document.all?IE=1:IE=0;
  • if (IE) { document.all('mon_cac').style.pixelTop=istop; document.all('mon_cac').style.pixelLeft=isleft;document.all('mon_cac').style.width=iswidth;document.all('mon_cac').style.height=isheight;}
  • function bouge(direction) {
  • eval('move('+direction+')');
  • ch=setTimeout('bouge('+direction+')',200);
  • return ch;
  • }
  • function tafini() {
  • clearTimeout(ch);
  • }
  • function moreless(z){
  • if (z>=1)
  • {document.getElementById('nb').value++ }
  • else if
  • (document.getElementById('nb').value<=1) return;
  • else
  • {document.getElementById('nb').value-- }
  • }
  • function move(direction) { //1=haut, 2=bas, 3=gauche, 4=droite
  • nb=document.getElementById('nb').value;
  • if(IE) {calque="document.all('mon_cac').style";px="";W=document.body.clientWidth;H=document.body.clientHeight;}
  • pix=(direction==1 || direction==2)?"posTop":"posLeft";
  • signe=(direction==1 || direction==3)?"-":"+";
  • width=parseInt(eval(calque+'.width'));
  • height=parseInt(eval(calque+'.height'));
  • newpos=eval("parseInt(eval(calque+'.'+pix))"+signe+""+nb)
  • if (signe=="-" && newpos<=0)
  • newpos=0;
  • else if (signe=="+" && newpos>=(W-width) && direction==4)
  • newpos=(W-width);
  • else if (signe=="+" && newpos>=(H-height) && direction==2)
  • newpos=(H-height);
  • eval(calque+'.'+pix+'='+newpos)+px;
  • }
  • </SCRIPT>
  • </BODY>
  • </HTML> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>calques</TITLE>
<META http-equiv=Content-Type content=text/html;charset=iso-8859-1>
<STYLE type=text/css>
BODY {
margin: 0px; 
color: black; 
background-color:#D1AB7A;
text-align:center; 
font-size:14px; 
font-family: arial, helvetica;
}
#mon_cac {
POSITION: absolute; 
Z-INDEX: 20; 
LEFT: 250px; 
TOP: 80px; 
WIDTH: 100px;
HEIGHT: 100px; 
PADDING: 0px; 
MARGIN: 0px;     
BACKGROUND-COLOR: red; 
border: 1px solid blue; 
}
.but{
height:23px;
text-align:center; 
background-color: silver;
border-top: 2px solid white;
border-left: 2px solid white;
border-bottom: 2px solid black;
border-right: 2px solid black;
}
.but02{
cursor: pointer;
height:23px;
text-align:center; 
background-color: silver;
border-top: 2px solid black;
border-left: 2px solid black;
border-bottom: 2px solid white;
border-right: 2px solid white;
}

</STYLE>
</HEAD>
<BODY>
<!-- boitier de pilotage -->
<DIV id=cont style="float:left; width:150px; font-size:14px; font-family: arial; font weight: bold; border:0px solid blue; margin-top: 10px; margin-left: 10px;text-align:center;">
<div style="width:50px;" class="but" onmouseover="bouge(1);this.className='but02';" onmouseout="tafini();this.className='but';">haut</div><br>
<div style="float:left; width:54;" class="but" onmouseover="bouge(3);this.className='but02';" onmouseout="tafini();this.className='but';">gauche</div>
<div style="float:left; width:40;"><INPUT size=3 value=5 id="nb" name="nb" style="background-color:black; color: yellow;border: 1px solid yellow;"></div>
<div style="float:left; width:54;" class="but" onmouseover="bouge(4);this.className='but02';" onmouseout="tafini();this.className='but';">droite</div><br><br>
<div id=soucont style="float: left; height:10px; width:150px; border:0px solid blue;">
<div id="less" style="float: left; width:30px; margin-left:7px;padding-top: 3px; cursor: pointer;" class="but" onClick="moreless(0);" onmouseDown="this.className='but02';" onmouseUp="this.className='but';">-</div><div style="float: left; margin-left:5px; width:50px;" class="but" onmouseover="bouge(2);this.className='but02';" onmouseout="tafini();this.className='but';">bas</div><div id="more" style="float: left; width:30px; margin-left: 5px; padding-top: 3px; cursor: pointer;" class="but" onClick="moreless(1);" onmouseDown="this.className='but02';" onmouseUp="this.className='but';">+</div>
</div>
</DIV>
<div id="txt" style="text-align:center;"><br><br>
Ce script permet de déplacer un calque dans 4 directions à la vitesse que l'on veut.<br> 
augmentation/diminution de la vitesse par clic sur faux-boutons dhtml ou saisie directe dans zone d'affichage.<br> 
Déplacement par survol de faux-boutons dhtml.</div>
<!--  le calque -->
<DIV id=mon_cac style="width:100px; height:100px;"></DIV>
<SCRIPT type=text/javascript>
//  position du calque par rapport au haut
istop=80;
//  la position du calque par rapport au coté gauche
isleft=250;
//  longeur du calque
iswidth=100;
// hauteur du calque
isheight=100;
var nb;
var z;
document.all?IE=1:IE=0;
 if (IE) { document.all('mon_cac').style.pixelTop=istop; document.all('mon_cac').style.pixelLeft=isleft;document.all('mon_cac').style.width=iswidth;document.all('mon_cac').style.height=isheight;} 

function bouge(direction) {
eval('move('+direction+')');
ch=setTimeout('bouge('+direction+')',200);
return ch;
}

function tafini() {
clearTimeout(ch);
}

function moreless(z){
if (z>=1)
	{document.getElementById('nb').value++ }
else if 
	(document.getElementById('nb').value<=1) return;
else
	{document.getElementById('nb').value-- }
    }

function move(direction) { //1=haut, 2=bas, 3=gauche, 4=droite
nb=document.getElementById('nb').value;
 if(IE) {calque="document.all('mon_cac').style";px="";W=document.body.clientWidth;H=document.body.clientHeight;} 
pix=(direction==1 || direction==2)?"posTop":"posLeft";
signe=(direction==1 || direction==3)?"-":"+";
width=parseInt(eval(calque+'.width')); 
height=parseInt(eval(calque+'.height'));
newpos=eval("parseInt(eval(calque+'.'+pix))"+signe+""+nb)
if (signe=="-" && newpos<=0)
newpos=0;
else if (signe=="+" && newpos>=(W-width) && direction==4)
newpos=(W-width);
else if (signe=="+" && newpos>=(H-height) && direction==2)
newpos=(H-height);
eval(calque+'.'+pix+'='+newpos)+px;
}
</SCRIPT>
</BODY>
</HTML>

 Conclusion

Pas reussi à le rendre compatible moz et net , (pas trop cherché , non plus)gros probs pour positionner les boutons , les modifs entrainant un affichage desastreux sur I.E.( si quelqu'un veut s'y coller ...).
en tout cas tres utile , non ?
Important , pour eviter un "flash" au moment de l'ouverture de page, les positions X et Y, et les dimensions du calque sont affichées 2 fois (feuille de style et javascript , modifiez les 2 ).


 Sources du même auteur

Source avec Zip EXPAND BANNER EN JAVASCRIPT
Source avec Zip LA CELEBRE FENETRE BEOS DE ED PROD (MISE À JOUR)
SCROLL BAR EN COULEUR (ENCORE ET TOUJOURS ...)
MENU DEROULANT MULTIDIRECTION.
SCROLL BAR EN COULEUR (ENCORE ET ENCORE ...)
Toutes les sources de leris

 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

Commentaires et avis

Commentaire de leris le 19/03/2004 16:43:31

merci de laisser vos impressions , même si vous trouvez que c'est nul , dites-le !

merci.

L.

Commentaire de biboone le 25/03/2004 10:26:25

J'ai trouvé ça très chouette, vraiment !!!
je n'ai pas étudié de près le code, mais le fonctionnement est excellent, bon exemple de gestion de calque.

Encore bravo.

Commentaire de SuperDevy le 16/07/2004 01:40:23

Bonne idée... mais je vois pas trop à quoi ça sert ?

Commentaire de daeron le 06/10/2004 16:30:26

Bon programme, très instructif ! Ca c'est le compliment. Sinon  c'est ultra chiant a se fader les conditions ternaire sans if...meme avec l'habitude alors pour les débutants !

Quand aux commentaires, je suppose qu'il n'y en a pas besoin.

Commentaire de YouTzeEN le 19/06/2005 11:01:47

Salut

Bon ben moi je le trouve vraiment nickel ce script !!!(3 mois que je cherchais ça !)
Maintenant, j'aurais besoin de savoir comment pouvoir faire que le calque puisse sortir de la page, avec l'apparition d'une scrollbar en bas ?
Ce serait super sympa, j'en ai besoin pour une carte de commune, en effet, je fais une page avec 2 frames, une haute (la carte) et une basse (la commande, la tienne en l'occurence) seulement, vu que la carte est TRES grande, il serait interessant de pouvoir la deplacer avec ton systeme.

Merci @+

Un webmestre dans la galère, YouTzeEn

Commentaire de crazypsykogizmo le 09/11/2005 11:27:50

Pas mal, mais y'a t-il un moyen de raccourcir un peut le code ?J'ai étudier la question mais cela reste toujours tres grand aidez moi SVP

Commentaire de carate le 10/02/2007 17:02:34

Merci beaucoup tu me débloc du plus gros bug
que j'ai jamais vu
Merci beuacoup
c'est nikel Meri
j'ai qu'une chause à dire Merci

Merci Merci Merci Merci Merci Merci Merci Merci Merci Merci Merci Merci Merci
Merci Merci Merci Merci Merci Merci Merci Merci Merci Merci Merci Merci Merci
Merci Merci Merci Merci Merci Merci Merci Merci Merci Merci Merci Merci Merci
Merci Merci Merci Merci Merci Merci Merci Merci Merci Merci Merci Merci Merci
Merci Merci Merci Merci Merci Merci Merci Merci Merci Merci Merci Merci Merci

 Ajouter un commentaire

Nos sponsors


Sondage...

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode
 
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,515 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)