[Résolu]Problème avec un script de dockbar type mac OS

Problème avec un script de dockbar type mac OS [Résolu] - HTML/CSS - Programmation

Marsh Posté le 10-04-2006 à 19:52:47    

Bonjour, j'ai trouvé il y a quelques jours un script javascript permettant de réaliser une dockbar type mac OS. Quand on passe sur une image, celle ci s'agrandit.
Pour avoir un exemple regarder ici :
http://h.delaage.free.fr/dockbar/javascript.html
 
Le script en question est
 

Code :
  1. // Script JS pour le dock
  2. <!--
  4. MIN = 60 ;  // largeur minimum en pixel
  5. MAX = 115 ; // largeur maximum en pixel
  6. REACTION = 1.2 ; // réaction des icons par rapport à la souris. plus grand --> plus d'icons qui réagissent
  8. A = ((MIN-MAX)/(MAX * REACTION)) ; // coef directeur de la droite d'agrandissement
  9. IE = document.all ? 1 : 0 ;
  10. img_tags = new Array();
  12. function ouEstMaSouris(e)
  13. {
  14. var dock = document.getElementById('dock') ; // div qui contient la barre de menu.
  16. var x = 0;
  17. if (IE) x = e.clientX ; // coordonnées x de la souris sur IE 5.5
  18. else x = e.pageX ;  // coordonnées x de la souris sur Mozilla ou Netscape 7
  20. x -= dock.offsetLeft ; // on modifie la coordonnée pour quelle soit relatif au div et non à la fenetre.
  22. img_tags = dock.getElementsByTagName('img') ; // les images contenus dans le div
  24. for(i=0 ; i<img_tags.length ; i++) // pour chaque images
  25. {
  26.  millieu = img_tags[i].offsetLeft + parseInt(img_tags[i].style.width)/2 ;
  27.  delta = millieu - x ;
  29.  if (delta < 0) delta *= -1 ;
  31.  coef = A * delta + MAX ;
  33.  if (coef < MIN) coef = MIN ;
  34.  else if (coef > MAX) coef = MAX ;
  36.  img_tags[i].style.width=coef;
  37.  img_tags[i].style.height=coef;
  38. }
  39. }


 
Ensuite il ne reste plus qu'a appliquer le code suivant sur les images
 

Code :
  1. <div id="dock" onmousemove="ouEstMaSouris(event)">
  2. <IMG SRC="./images/#.jpg" style="width:60;height:60;" BORDER="0" align="top">
  3. </div>


 
Voila jusqu'ici aucun problème le script fonctionne parfaitement.
 
Cependant je souhaite modifier un peu ce script. En effet dans l'exemple ci-dessus, le zoom s'effectue vers le bas (je sais pas si je suis très clair :p).  
Cad quand on passe sur une image celle-ci s'aggrandie vers le bas.
Je veux modifier la direction du zoom, lorsque je passe sur mon image je voudrais que celle-ci s'agrandisse vers le haut. Seulement, mes notions en JS sont relativement maigre.
Ne comprenant pas réellement le script, j'ai essayé de bidouillé un peu les variables, d'inverser le coef directeur de la droite d'agrandissement.
Finalement la solution se trouve ici

Code :
  1. <IMG SRC="./images/#.jpg" style="width:60;height:60;" BORDER="0" align="top">


 
Si on change la valeur d'align en remplacant top, par bottom on obtient ceci :  
http://h.delaage.free.fr/dockbar/javascript2.html
 
Cela correspond a peu près résultat que je souhaite mais il faudrait que ma série d'image reste bloqué sur leur position inférieur.
Je cherche quelqu'un pouvant m'expliquer le fonctionnement du script, afin de faire avancer mon pbm. ( je vous demande pas la réponse mais des conseils pour orienter mes recherches ^^ )
 
Voila, merci à ceux qui ont pris le tps de tout lire. Si je n'ai pas été clair sur certains points, n'hésitez pas à me demander.


Message édité par 3tnieS le 11-04-2006 à 21:56:44
Reply

Marsh Posté le 10-04-2006 à 19:52:47   

Reply

Marsh Posté le 10-04-2006 à 21:09:04    

align="top" sur ton img ca te dit pas quelque chose ça ?
 
align="bottom" c'est fait pour :D

Reply

Marsh Posté le 11-04-2006 à 02:00:18    

Citation :


 
Si on change la valeur d'align en remplacant top, par bottom on obtient ceci :  
 
http://h.delaage.free.fr/dockbar/javascript2.html

 


 
 
Cela correspond a peu près résultat que je souhaite mais il
faudrait que ma série d'image reste bloqué sur leur position inférieur.

 


 


 
 

 

 


J'ai bien essayé avec align="bottom" mais du coup, la bar se déplace constament. Du coup ca t'explose les yeux :p

Reply

Marsh Posté le 11-04-2006 à 06:13:18    

ouais mais dit toi bien que la barre elle reste en bas :o

Reply

Marsh Posté le 11-04-2006 à 09:40:34    

pas mal ce script ;)

Reply

Marsh Posté le 11-04-2006 à 20:58:59    

Ué la barre reste bien toujours en bas. Il faudrait donc que je puisse la bloquer sur sa position le plus bas possible. Je tatonne pour la marche à suivre.  
C'est possible de spécifier les coordonnées horizontal d'une image en JS?
Ou peut-être passer par un positionnement fixe en faisant appel aux feuilles de style CSS ?
 


Message édité par 3tnieS le 11-04-2006 à 21:04:23
Reply

Marsh Posté le 11-04-2006 à 21:05:42    

position absolute ?  
bottom 0 ?

Reply

Marsh Posté le 11-04-2006 à 21:33:35    

Je viens d'essayer avec la position:absolute et bottom:0, ca donne un résultat bizarre.http://h.delaage.free.fr/dockbar/javascript3.html
 
J'ai essayé avec les autres positionnement css, mais la ca ne change rien du tout.

Reply

Marsh Posté le 11-04-2006 à 21:38:33    

c'est sur ton element qui englobe tes images qu'il faut le mettre !!

Reply

Marsh Posté le 11-04-2006 à 21:55:47    

Ouais c'était bien sur la div entourant les images :p
 
Merci pour ton aide,le resultat est exactement comme je voulais: http://h.delaage.free.fr/dockbar/javascript4.html

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed