Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2975 connectés 

  FORUM HardWare.fr
  Programmation

  [DHTML] Comment kon fait ca?????????

 
 


Dernière réponse
Sujet : [DHTML] Comment kon fait ca?????????
benou

xkamui a écrit a écrit :

:??:  :??: y'a quelqu'un pour donner les fichiers *.js *.gif/*.jpg et *.html, tout ça dans un zip et qui marche parce que moi je comprend pas grand chose à votre truc  :cry:  :cry:  




 
bha j'ai dit tout ce qu'il fallait faire : t'as plus qu'à recopier les bouts de code !


Votre réponse
Nom d'utilisateur    Pour poster, vous devez être inscrit sur ce forum .... si ce n'est pas le cas, cliquez ici !
Le ton de votre message                        
                       
Votre réponse
[b][i][u][strike][spoiler][fixed][cpp][url][email][img][*]   
 
   [quote]
 
Options

 
Vous avez perdu votre mot de passe ?


Vue Rapide de la discussion
benou

xkamui a écrit a écrit :

:??:  :??: y'a quelqu'un pour donner les fichiers *.js *.gif/*.jpg et *.html, tout ça dans un zip et qui marche parce que moi je comprend pas grand chose à votre truc  :cry:  :cry:  




 
bha j'ai dit tout ce qu'il fallait faire : t'as plus qu'à recopier les bouts de code !

xkamui :bounce:  :bounce:  :bounce: UP :bounce:  :bounce:  :bounce:
darkoli http://darkoli.free.fr/js/master_mind/m.htm
http://darkoli.free.fr/js/dragdrop.htm

 

[edtdd]--Message édité par DarkOli--[/edtdd]
xkamui :bounce:  :bounce:  :bounce: UP :bounce:  :bounce:  :bounce:
xkamui :??:  :??: y'a quelqu'un pour donner les fichiers *.js *.gif/*.jpg et *.html, tout ça dans un zip et qui marche parce que moi je comprend pas grand chose à votre truc  :cry:  :cry:
art_dupond

DarkOli a écrit a écrit :

 
 
Ton boss il ne cherche pas à embaucher par hasard ?
Un gentil ptit ingé info comme ... DarkOli par exemple !!!  




 
et le pitit ingé info DarkOli, il saurait pas d'où qu'il pourrait venir mon problème... par hasard ?
 
http://forum.hardware.fr/forum2.ph [...] &owntopic= :D

art_dupond ben oui, tu peux faire tout ce que tu fais dans une page quoi, mais sur une autre couche, une sorte de layer quoi :D  
 
 
 
c'est pas grave, on se comprend, c'est le principal :jap:
darkoli

dropsy a écrit a écrit :

merci  :jap:  
mon boss va croire que je maitrise...
bon mon salaire je vous l'envoie à kel adresse? :D  




 
Ton boss il ne cherche pas à embaucher par hasard ?
Un gentil ptit ingé info comme ... DarkOli par exemple !!!

darkoli

art_dupond a écrit a écrit :

 
pour moi, un div est une sorte de layer (que tu peux "monter" ou "descendre" avec z-index).
 
Je me trompe ?  




 
Non mais c'est super reducteur !!!
 
Tu peux tout changer dans un div !!!
 => son apparence : couleur (fond, bordure) , visibilité, ...
 
 => sa forme : longueur, largeur, bordure (epaisseur), ...
 
 => son contenu : image(s), text, balises, ... (tu peux effacer le contenu d'un div pour le remplacer par autres chose !!!)
 
 => les evenements : tu peux initialiser la reation à un evenement ou l'enlever à tout moment.
 
<div id="toto"></div>
 
 document.all.toto.onclick=clic;  // clic doit être une fonction javascript
 document.all.toto.onclick=null;  // la il ne se passe plus rien quand tu cliques

dropsy merci  :jap:  
mon boss va croire que je maitrise...
bon mon salaire je vous l'envoie à kel adresse? :D
benou allez, c'est mon jour de bonté : je te file un truc que j'ai fait dans une vie antérieure et qui fait exactement la même chose. C'est compatible IE4 et sup et Netscape 4 et sup (pas testé sous netscape 6)
 
Attention, ca va être long comme post ...
 
voici le contenu du fichier etiquette.js :  
 
//////////// DEBUT /////////////////////
var GAUCHE = 0;
var DROITE = 1;
var CENTRE = 2;
 
 
// variables de personalisation
var couleur_fond = "lightyellow";
var couleur_bordure = "black";
var couleur_texte = "black";
var taille_texte = 1;
var largeur_bordure = 1;
var decalage_x  = 10; //decalage de l'etiquette par rapport a la souris
var decalage_y  = 20;
 
var dft_largeur = 200;
var dft_direction = DROITE;
var dft_alignement = "LEFT";
 
var pos_fixe = false;
var pos_fixe_x = 236; //position centrale
var pos_fixe_y = 0;
 
 
// recherhce navigateur
ns4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;
ie5 = false;
if ((ie4) && (navigator.userAgent.indexOf('MSIE 5')>0)) ie5 = true;
 
 
// declaration est initialisation des variables
var x = 0;
var y = 0;
var est_visible = false;
var dir;  // direction courante
var le_x, le_y;
 
var obj_etiquette;
var hauteur_aide, largeur_aide;
var largeur_doc, hauteur_doc;
 
if ((ns4)||(ie4)) {
 if (ns4) obj_etiquette = document.etiquette;
 if (ie4) obj_etiquette = etiquette.style;
 document.onmousemove = deplacementSouris;
 if (ns4) document.captureEvents(Event.MOUSEMOVE);
 
 if (ie4) {
  largeur_doc = document.body.clientWidth;
  hauteur_doc = document.body.clientHeight;
 } else if (ns4) {
  largeur_doc = document.width;
  hauteur_doc = document.height;
 }
 //alert("largeur_doc = " + largeur_doc + ", hauteur_doc = " + hauteur_doc);
}
 
// PRB NETSCAPE  
if (ns4) {
 pos_fixe = true;
 dft_alignement = "CENTER";
 dft_largeur = 400;
 taille_texte = 2;
}
 
 
function aide(texte, direction, alignement, largeur) {
 if (! ((ns4) || (ie4))) return false;
 
 if (typeof direction == 'undefined')  direction = dft_direction;
 if (typeof largeur == 'undefined')  largeur = dft_largeur;
 if (typeof alignement == 'undefined')  alignement = dft_alignement;
 if (typeof texte == 'undefined')  texte = "Aide non-disponible";
 
 html =  
 "<TABLE WIDTH=" +largeur+ " BORDER=0 CELLPADDING=" +largeur_bordure+ " CELLSPACING=0 BGCOLOR=\"" +couleur_bordure+ "\">\n" +  
 "<TR><TD>\n" +  
  "<TABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR=\"" +couleur_fond+ "\">\n" +  
  "<TR><TD ALIGN=\"" + alignement + "\">\n" +  
   "<FONT FACE=\"Verdana,Arial,Helvetica\" COLOR=\"" +couleur_texte+ "\" SIZE=\"" +taille_texte+ "\">\n" +  
    texte + "\n" +
   "</FONT>\n" +  
  "</TD></TR>\n " +  
  "</TABLE>\n" +  
 "</TD></TR>\n" +  
 "</TABLE>"
 
 if (ns4) {
  document.etiquette.document.write(html);
  document.etiquette.document.close();
 } else if (ie4)  
  document.all["etiquette"].innerHTML = html;
 if (ie4) {
  hauteur_aide = document.all["etiquette"].clientHeight;
  largeur_aide = document.all["etiquette"].clientWidth;
 } else if (ns4) {  
  hauteur_aide = document.etiquette.document.height;
  largeur_aide = document.etiquette.document.width;
 }
 positionner (direction);
 if (! est_visible) afficher(obj_etiquette);
}
 
function afficher(obj) {
 if (ns4)  obj.visibility = "show";
 else if (ie4)  obj.visibility = "visible";
 est_visible = true;
}
 
function c() { cacher ();}
 
function cacher () {
 if (!((ns4)||(ie4))) return;
 if (ns4)  obj_etiquette.visibility = "hide";
 else if (ie4)  obj_etiquette.visibility = "hidden";
 est_visible = false;
}
 
function positionner (direction) {
 dir = direction;
 if (pos_fixe)    { le_x = pos_fixe_x - largeur_aide/2; le_y = pos_fixe_y; }
 else if (direction == CENTRE)  { le_x = x+decalage_x-largeur_aide/2;  le_y = y+decalage_y; }
 else if (direction == DROITE)  { le_x = x+decalage_x;   le_y = y+decalage_y; }
 else if (direction == GAUCHE)  { le_x = x-decalage_x - largeur_aide;  le_y = y+decalage_y; }
 
 if (le_x + largeur_aide > largeur_doc)  le_x = largeur_doc - largeur_aide;
 if (le_x < 0)     le_x = 0;
 if (le_y + hauteur_aide > hauteur_doc)  le_y = hauteur_doc - hauteur_aide;
 if (le_y < 0)     le_y = 0;
 
 obj_etiquette.left = le_x;
 obj_etiquette.top = le_y;
}
 
function deplacementSouris(e) {
 if (ns4) {x=e.pageX; y=e.pageY;}
 if (ie4) {x=event.x; y=event.y;}
 if (ie5) {x=event.x+document.body.scrollLeft; y=event.y+document.body.scrollTop;}
 if (est_visible) {  
  positionner (dir);  
 }
}
 
//////////////  FIN  ///////////////////////
 
 
ensuite dans ton fichier HTML, tu ajoutes ces 2 lignes :  
<DIV ID="etiquette" STYLE="position:absolute; visibility:hide; z-index:0;"></DIV>
<SCRIPT LANGUAGE="JavaScript" SRC="etiquette.js"></SCRIPT>
 
puis quand tu veux que le layer s'affiche ay dessus d'un lien, tu fais comme ca  :  
 
<a  
  href="javascript:void(0)"  
  onMouseOut="c()";  
  onMouseOver="aide('ici tu met du HTML. ex : <img src=youpi.jpg>');">text</a>
 
remarque : sous netscape, tu ne peux gérer les onMouseXX que sur les liens, mais sous IE tu peut ajouter ca sur à peu pres toutes les balises.
art_dupond

youdontcare a écrit a écrit :

non, tu restreins. on peut appliquer ça à n'importe quelle balise.  




 
ah ca je savais pas par contre...
 
 
j'en ai jamais eu besoin non plus :na:  :D  :jap:

dropsy

art_dupond a écrit a écrit :

 
 
pour moi, un div est une sorte de layer (que tu peux "monter" ou "descendre" avec z-index).
 
 
Je me trompe ?  




 
z-index??? put1, il fo vraiment que j'apprenne le html, moa, avant que mon employeur s'en rende compte :D

youdontcare

art_dupond a écrit a écrit :

Je me trompe ?


non, tu restreins. on peut appliquer ça à n'importe quelle balise.

art_dupond

dropsy a écrit a écrit :

ben moi kan j'utilise un div, ce que j'y met est "intégré" à la page et pas au-dessus du reste de la page  




 
pour moi, un div est une sorte de layer (que tu peux "monter" ou "descendre" avec z-index).
 
 
Je me trompe ?

dropsy waou!!! merci, c terrible... bon jvais éplucher tout ca :hello:
darkoli Voila deux exemple qui prouvent que tu peux faire bouger ce que tu veux !!!
 
Darg & Drop d'objet (div, bouton, textarea)

Code :
  1. <html>
  2. <head>
  3. <title>Drag & Drop</title>
  4. </head>
  5. <body>
  6. <script language="javascript">
  7.   var dx=0;
  8.   var dy=0;
  9.   var objet=null;
  10.   var mv=0;
  12.   function md() {
  13.     if (event.srcElement.tagName!="BODY" ) {
  14.       objet=event.srcElement;
  15.       }
  16.     dx=event.offsetX;
  17.     dy=event.offsetY;
  18.     mv=0;
  19.     }
  21.   function mm() {
  22.     if (objet!=null) {
  23.       objet.style.left=event.clientX-dx;
  24.       objet.style.top=event.clientY-dy;
  25.       }
  26.     document.all.z.value="Ecran : "+event.screenX+","+event.screenY+"\nFenêtre : "+event.clientX+","+event.clientY+"\nObjet : "+event.offsetX+","+event.offsetY+" => "+event.srcElement.tagName+" ["+event.srcElement.name+"]";
  27.     mv=1;
  28.     }
  30.   function mu() {
  31.     objet=null;
  32.     }
  34.   function cb() {
  35.     if (mv==0) {
  36.       alert("evenement \"onClic\" sur le bouton \""+event.srcElement.name+"\"." );
  37.       }
  38.     }
  40.   document.onmousedown=md;
  41.   document.onmousemove=mm;
  42.   document.onmouseup=mu;
  43. </script>
  44. <textarea name="z" rows="3" cols="40" style="position:absolute;left:102px;top:0px">Vous pouvez déplacer tous les éléments présents sur cette page.</textarea>
  45. <input name="bouton de toto" type="button" value="Le Drag & Drop c'est génial" style="position:absolute;left:102px;top:55px" onClick="cb()">
  46. <div name="coucou" style="position:absolute;left:0px;top:0px;width:100px;height:200px;background-color:C0C0C0"></div>
  47. </body>
  48. </html>


 
Déplacement de Div pour donner l'impression d'une rotation autour d'un axe (à l'aide des quaternions)

Code :
  1. <html>
  2. <head><title>Javascript 3D by Oli</title></head>
  3. <body>
  4. <div id="fond" style="position:absolute;left:0px;top:0px;width:e
  5. xpression(document.body.clientWidth);height:expres
  6. sion(document.body.clientHeight);background-color:
  7. F7F7F7;border-width:3px;border-style:solid;border-
  8. color:80C0FF;z-index:0"></div>
  9. <script language="javascript">
  10. // structures utilisées
  11.   var rss="";
  12.  
  13.   function rotation(n) {
  14.     this.x=0;
  15.     this.y=0;
  16.     this.z=0;
  17.     this.t=new Array(16);
  18.     this.q=null;
  19.     this.pos=Math.PI;   
  20.     this.pas=0;
  21.     this.d=new Array(4);
  22.     for (var k=0;k<4;k++) rss=rss+"<div id=\"o"+n+k+"\" style=\"position:absolute;left:0px;top:0px;width
  23. :20px;height:20px;background-color:80C0FF;font-siz
  24. e:0px;z-index:1;border-width:1px;border-color:60A0
  25. FF;border-style:solid\"></div>";     
  26.     }
  28.   function quaternion() {
  29.     this.w=0;
  30.     this.x=1;
  31.     this.y=0;
  32.     this.z=0;
  33.     }
  35. // variables
  36.   var mt1=new Array(16);
  37.   var mt2=new Array(16);
  38.   var angle=0;
  39.   var cx=document.body.clientWidth>>1;
  40.   var cy=document.body.clientHeight>>1; 
  41.   var rp=0;
  42.   var rnb=10;
  43.   var r=new Array(rnb);
  45. // fonctions
  46.   function am(t) {
  47.     var s="<table><tr><td collspan=\"4\">Matrice</td>";
  48.     for (var i=0;i<16;i++) {
  49.       if ((i&3)==0) s=s+"</tr><tr>";
  50.       s=s+"<td>"+t[i]+"</td>";
  51.       }
  52.     document.all.fond.innerHTML=document.all.fond.innerHTML+s+"</tr></table>";
  53.     }
  55.   function rx(t,a) {
  56.    // |  1  0       0       0 |
  57.    // |  0  cos(A) -sin(A)  0 |
  58.    // |  0  sin(A)  cos(A)  0 |
  59.    // |  0  0       0       1 |
  60.     t[0]=t[15]=1
  61.     t[1]=t[2]=t[3]=t[4]=t[7]=t[8]=t[11]=t[12]=t[13]=t[14]=0;
  62.     t[5]=t[10]=Math.cos(a);
  63.     t[9]=Math.sin(a);
  64.     t[6]=-t[9];
  65.     }
  67.   function qm(mat,q) {
  68.     var xx = q.x * q.x;
  69.     var xy = q.x * q.y;
  70.     var xz = q.x * q.z;
  71.     var xw = q.x * q.w;
  73.     var yy = q.y * q.y;
  74.     var yz = q.y * q.z;
  75.     var yw = q.y * q.w;
  77.     var zz = q.z * q.z;
  78.     var zw = q.z * q.w;
  80.     mat[0]  = 1 - 2 * ( yy + zz );
  81.     mat[1]  =     2 * ( xy - zw );
  82.     mat[2]  =     2 * ( xz + yw );
  84.     mat[4]  =     2 * ( xy + zw );
  85.     mat[5]  = 1 - 2 * ( xx + zz );
  86.     mat[6]  =     2 * ( yz - xw );
  88.     mat[8]  =     2 * ( xz - yw );
  89.     mat[9]  =     2 * ( yz + xw );
  90.     mat[10] = 1 - 2 * ( xx + yy );
  92.     mat[3]  = mat[7] = mat[11] = mat[12] = mat[13] = mat[14] = 0;
  93.     mat[15] = 1;
  94.     }
  96.   function nq(q_) {
  97.     var l=Math.sqrt(q_.w*q_.w + q_.x*q_.x + q_.y*q_.y + q_.z*q_.z);
  98.     l=1/l;
  99.     q_.w=q_.w*l;
  100.     q_.x=q_.x*l;
  101.     q_.y=q_.y*l;
  102.     q_.z=q_.z*l;
  103.     }
  105.   function rq(_q,a,x,y,z) {
  106.     var sin_a = Math.sin(a/2);
  107.     var cos_a = Math.cos(a/2);
  109.     _q.x = x * sin_a;
  110.     _q.y = y * sin_a;
  111.     _q.z = z * sin_a;
  112.     _q.w = cos_a;
  114.     nq(_q);
  115.     }
  117.   function mm(ma,mb,mr) {
  118.     mr[ 0]=ma[ 0]*mb[ 0] + ma[ 1]*mb[ 4] + ma[ 2]*mb[ 8] + ma[ 3]*mb[12];
  119.     mr[ 1]=ma[ 0]*mb[ 1] + ma[ 1]*mb[ 5] + ma[ 2]*mb[ 9] + ma[ 3]*mb[13];
  120.     mr[ 2]=ma[ 0]*mb[ 2] + ma[ 1]*mb[ 6] + ma[ 2]*mb[10] + ma[ 3]*mb[14];
  121.     mr[ 3]=ma[ 0]*mb[ 3] + ma[ 1]*mb[ 7] + ma[ 2]*mb[11] + ma[ 3]*mb[15];
  122.     mr[ 4]=ma[ 4]*mb[ 0] + ma[ 5]*mb[ 4] + ma[ 6]*mb[ 8] + ma[ 7]*mb[12];
  123.     mr[ 5]=ma[ 4]*mb[ 1] + ma[ 5]*mb[ 5] + ma[ 6]*mb[ 9] + ma[ 7]*mb[13];
  124.     mr[ 6]=ma[ 4]*mb[ 2] + ma[ 5]*mb[ 6] + ma[ 6]*mb[10] + ma[ 7]*mb[14];
  125.     mr[ 7]=ma[ 4]*mb[ 3] + ma[ 5]*mb[ 7] + ma[ 6]*mb[11] + ma[ 7]*mb[15];
  126.     mr[ 8]=ma[ 8]*mb[ 0] + ma[ 9]*mb[ 4] + ma[10]*mb[ 8] + ma[11]*mb[12];
  127.     mr[ 9]=ma[ 8]*mb[ 1] + ma[ 9]*mb[ 5] + ma[10]*mb[ 9] + ma[11]*mb[13];
  128.     mr[10]=ma[ 8]*mb[ 2] + ma[ 9]*mb[ 6] + ma[10]*mb[10] + ma[11]*mb[14];
  129.     mr[11]=ma[ 8]*mb[ 3] + ma[ 9]*mb[ 7] + ma[10]*mb[11] + ma[11]*mb[15];
  130.     mr[12]=ma[12]*mb[ 0] + ma[13]*mb[ 4] + ma[14]*mb[ 8] + ma[15]*mb[12];
  131.     mr[13]=ma[12]*mb[ 1] + ma[13]*mb[ 5] + ma[14]*mb[ 9] + ma[15]*mb[13];
  132.     mr[14]=ma[12]*mb[ 2] + ma[13]*mb[ 6] + ma[14]*mb[10] + ma[15]*mb[14];
  133.     mr[15]=ma[12]*mb[ 3] + ma[13]*mb[ 7] + ma[14]*mb[11] + ma[15]*mb[15];
  134.     }
  136.   function ts() {   
  137.     for (var i=0;i<rnb;i++) {               
  138.       rq(r[i].q,r[i].pos,r[i].x,r[i].y,r[i].z);   
  139.       qm(mt1,r[i].q);
  140.       mm(mt1,r[i].t,mt2);
  141.       for (var j=0;j<4;j++) {
  142.         rp=(mt2[8+j]+100)/4;
  143.         if (rp<5) rp=5;                     
  144.         r[i].d[j].style.width=rp;
  145.         r[i].d[j].style.height=rp;
  146.         rp=rp>>1;     
  147.         r[i].d[j].style.left=cx+mt2[0+j]-rp;
  148.         r[i].d[j].style.top=cy+mt2[4+j]-rp;                   
  149.         r[i].d[j].style.zIndex=mt2[8+j]+150;       
  150.         }
  151.       r[i].pos+=r[i].pas;     
  152.       }
  153.     }
  154.  
  155.   function ri() {
  156.     var rtt=0;
  157.     for (var i=0;i<rnb;i++) {     
  158.       r[i]=new rotation(i);
  159.       for (var j=0;j<12;j++) r[i].t[j]=(Math.random()*400)-200;     
  160.       r[i].t[12]=1;
  161.       r[i].t[13]=1;
  162.       r[i].t[14]=1;
  163.       r[i].t[15]=1;
  164.       r[i].q=new quaternion();
  165.       rtt=Math.floor(Math.random()*7)+1;
  166.       r[i].x=rtt&1;
  167.       r[i].y=(rtt>>1)&1;
  168.       r[i].z=(rtt>>2)&1;     
  169.       r[i].pos=Math.random()*Math.PI*2;
  170.       r[i].pas=Math.random()*Math.PI/32;
  171.       }
  172.     fond.innerHTML=fond.innerHTML+rss; 
  173.     for (var i=0;i<rnb;i++) {
  174.       for (var k=0;k<4;k++) {
  175.         eval("r[i].d[k]=document.all.o"+i+k);   
  176.         }
  177.       }
  178.     }
  179.  
  180. // instructions  
  181.   ri(); 
  182.   setInterval("ts()",1);   
  183. </script>
  184. </body>
  185. </html>


 
Tout ceci fonctionne avec IE

youdontcare tu passes par les css et tu lui files une position absolue :
 
<div id='myDiv' style='position: absolute; left: 40; top: 40'>mon div</div>
 
et pour le déplacer :
 
<body .... onmousemove='onMove()'>
<div id='myDiv' style='....>
 
<script>
  function onMove()
  {
    myDiv.style.left = event.x;
    myDiv.style.top = event.y;
  }
</script>
dropsy ben moi kan j'utilise un div, ce que j'y met est "intégré" à la page et pas au-dessus du reste de la page
art_dupond ben c'est ca un div. non ?
dropsy je suis d'accord avec ton analyse, mais ce ki me paraît dur c le div qui "flotte" au-dessus de la page html... c comme si y avait deux pages...
je suis clair dans mon interrogation :??: :D
darkoli Ben l'image est contenue dans un div (enfin je ne sais meme pas si c'est utile).
 
En fait lorsque la souris arrive sur l'image un evenement se declenche, indiquant que le pointeur et sur l'image, a ce moment le div est rendu visible avec à l'interieur l'image correspondant à l'image survolée .
 
Et tant que le pointeur est en mouvement sur l'image, le div le suit à quelques pas !!!
 
C'est tres simple à faire !!!
dropsy moi je trouve ca sympa le onmouseover sur les images:
http://www.wallpapers.ru/
 
mais comment kon fait?  
pour faire apparaitre les images par dessus... jlai déjà vu ailleurs, mais g jamais su comment :D  
à tout hasard, g choper le code de la page (enfin fichier enregistrer sous, c pas le plus dur :D) mais si qqun c comment ca fonctionne, un ptit indice, un ptit lien vers un tutorial... Enfin, un coup de main koi  :)

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo

Copyright © 1997-2025 Groupe LDLC (Signaler un contenu illicite / Données personnelles)