Effet dock mac os pour vos menus

Télécharger le projet
Commenter

Description

Plutot qu'un menu déroulant à la windows, je vous propose un barre de menu (un dock comme on dit dans le jargon) à la MacOS.
En gros l'effet est le suivant : quand on passe la souris sur les images, ces dernières grossissent plus ou moins en fonction de la position de la souris.
Compatible IE 5.5 et Mozilla/Netscape 7
Puissance recommendée : 1Ghz

Il y a 3 fichiers HTML car 3 méthodes différentes.
Une linéraire (la plus belle et plus simple).
Demo : http://www.coopmcs.com/demo/dock_macos/dock_lineaire.html

Une verticale (pour les menus verticaux).
Demo : http://www.coopmcs.com/demo/dock_macos/dock_verticale.html

Une sinuzoïdale (moins jolie à mon gout).
Demo : http://www.coopmcs.com/demo/dock_macos/dock_sinuzoide.html

Une qui n'agit que sur l'icon selectionné (un autre style).
Demo : http://www.coopmcs.com/demo/dock_macos/dock_icon.html

Source / Exemple : 


Pour les codes HTML commentés : voir le ZIP
Je présente ici le code de la linéraire.

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 et y 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;
	}	
}

Conclusion :


C'est mon premier post.
L'effet est plus sympa sur Mozilla car il gere mieux la transparence des PNG de mon exemple.
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (ryosama)