Menu dock style MAC OS

Version imprimable

Bonjour à tous,

j'ai récupéré sur le net un code source qui permet de faire un menu style dock (comme sur mac) pour son site.
Cependant je ne veux pas copier bêtement le code et je cherche à comprendre comment il fonctionne, en particulier l’algorithme qui utilise apparemment une droite d'agrandissement.

Voici le code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
 
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
 
<SCRIPT LANGUAGE="JavaScript">
<!--
 
MIN = 33 ;  // largeur minimum en pixel
MAX = 115 ; // largeur maximum en pixel
REACTION = 1.2 ; // réaction des icons par rapport à la souris. plus grand --> plus d'icons qui réagissent
 
A = ((MIN-MAX)/(MAX * REACTION)) ; // coef directeur de la droite d'agrandissement
IE = document.all ? 1 : 0 ;
img_tags = new Array();
 
function ouEstMaSouris(e)
{
	var dock = document.getElementById('dock') ; // div qui contient la barre de menu.
 
	var x = 0;
	if (IE)	x = e.clientX ; // coordonnées x de la souris sur IE 5.5
	else	x = e.pageX ;  // coordonnées x de la souris sur Mozilla ou Netscape 7
 
	x -= dock.offsetLeft ; // on modifie la coordonnée pour quelle soit relatif au div et non à la fenetre.
 
	img_tags = dock.getElementsByTagName('img') ; // les images contenus dans le div
 
	for(i=0 ; i<img_tags.length ; i++) // pour chaque images
	{
		millieu = img_tags[i].offsetLeft + parseInt(img_tags[i].style.width)/2 ;
		delta = millieu - x ;
 
		if (delta < 0) delta *= -1 ;
 
		coef = A * delta + MAX ;
 
		if (coef < MIN) coef = MIN ;
		else if (coef > MAX) coef = MAX ;
 
		img_tags[i].style.width=coef;
		img_tags[i].style.height=coef;
	}
}
 
//-->
</SCRIPT>
 
</HEAD>
 
<BODY>
<!-- Déclaration du DIV contenant le menu -->
<!-- 'top' et 'left' peuvent etre modifié pour placer le menu ailleurs (10,10 est le haut à gauche) -->
<!-- 'fixed' fixe le menu (il ne suit pas la scrollbar) et peut etre modifié en 'absolute' (suit la scrollbar) -->
<div style="position:fixed;top=10;left:10;" id="dock" onmousemove="ouEstMaSouris(event)">
 
<!-- 'width' et 'height' sont à la taille minimum -->
<A HREF="#" title="Firefox"><IMG SRC="firefox.png" style="width:33;height:33;" BORDER="0" align="top"></A>
<A HREF="#" title="Thunderbird"><IMG SRC="thunderbird.png" style="width:33;height:33;" BORDER="0" align="top"></A>
<A HREF="#" title="MySQL Manager"><IMG SRC="mysqlmanager.png" style="width:33;height:33;" BORDER="0" align="top"></A>
<A HREF="#" title="Paintshop pro 8"><IMG SRC="psp8.png" style="width:33;height:33;" BORDER="0" align="top"></A>
 
<A HREF="#" title="Object Media"><IMG SRC="objectmedia.png" style="width:33;height:33;" BORDER="0" align="top"></A>
<A HREF="#" title="Settings"><IMG SRC="settings.png" style="width:33;height:33;" BORDER="0" align="top"></A>
<A HREF="#" title="Skin studio"><IMG SRC="skinstudio.png" style="width:33;height:33;" BORDER="0" align="top"></A>
<A HREF="#" title="Stardock central"><IMG SRC="stardock central.png" style="width:33;height:33;" BORDER="0" align="top"></A>
<A HREF="#" title="Theme manager"><IMG SRC="theme manager.png" style="width:33;height:33;" BORDER="0" align="top"></A>
 
</div>
 
</BODY>
</HTML>

Merci d'avance de m’éclairer sur le fonctionnement de cet algorithme avec cette fameuse "droite d'agrandissement".

23/06/2012, 02h23
Watilin
Bonsoir !

La formule est assez simple, tant qu'on n'est pas allergique aux maths :aie: C'est une fonction affine : coef = A * delta + MAX.
Si on regarde de plus près, on voit que delta = millieu - x, x étant la position de la souris dans le dock. Donc delta est la distance entre la souris et le milieu de l'image. Si la souris est justement au milieu de l'image, cette distance est nulle et ça fait :

coef = A * 0 + MAX
= MAX

Donc c'est quand la souris est au milieu de l'image que l'image est la plus grande.

Ensuite, si on regarde A, on voit que ça commence par MIN - MAX, et ça donne un truc négatif, donc la fonction est décroissante. Autrement dit plus on s'éloigne, plus l'image sera petite. La taille des images est limitée par ces deux lignes :
Code:

1 2 if (coef < MIN) coef = MIN ; else if (coef > MAX) coef = MAX ;
Enfin, comme A est divisé par REACTION, si on augmente REACTION la pente sera plus douce, autrement dit les images éloignées seront un peu plus affectées.

N'hésite pas à demander si quelque chose n'est pas clair ;)

Note qu'il n'est pas conseillé de modifier les styles width et height des images, ça fait souvent un effet de crénelage assez moche.
23/06/2012, 14h17
Invité

Merci beaucoup pour ta réponse très précise, j'ai compris :ccool: !

Par contre pour le :

Citation:

Note qu'il n'est pas conseillé de modifier les styles width et height des images, ça fait souvent un effet de crénelage assez moche.

Y a t'il un autre moyen de reproduire le même effet alors ?
24/06/2012, 00h59
Watilin

Eh bien en fait, on peut se permettre d'avoir des images crénelées pendant les phases de transition, tant que ces phases ne durent pas trop longtemps. L'idéal serait de prévoir plusieurs versions de la même image, avec différentes tailles.
Par exemple, une image avec la taille MIN et une image avec la taille MAX. Le script changerait alors l'url des images atteignant l'une ou l'autre des deux tailles prévues. Bien sûr, cela complique un peu le script... Tout dépend du niveau de « perfectionnisme » que tu veux atteindre.
25/06/2012, 12h47
Invité

Ok ok, merci pour ces précisions :ccool: