begin process at 2012 02 12 13:12:04
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Menu & Co

 > EFFET DOCK MAC OS POUR VOS MENUS

EFFET DOCK MAC OS POUR VOS MENUS


 Information sur la source

Note :
9,29 / 10 - par 17 personnes
9,29 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Menu & Co Classé sous :dock, mac, os, icon Niveau :Débutant Date de création :22/09/2004 Date de mise à jour :21/11/2008 18:56:47 Vu / téléchargé :33 675 / 3 886
Auteur : ryosama

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

 Description

Cliquez pour voir la capture en taille normale
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_lineai re.html

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

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

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

Source

  • 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;
  • }
  • }
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.

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

22 septembre 2004 17:51:23 :
22 septembre 2004 21:33:29 :
J'ai rajouté une méthode sinuzoidale qui modifie les icons a la droite et à la gauche de la souris. Voir docksin.html dans le zip
23 septembre 2004 09:56:01 :
J'ai rajouté la méthode "linéaire" que je trouve plus jolie personnelement.
21 août 2005 15:32:10 :
Rajout du menu verticale suite aux demandes des visiteurs.
17 janvier 2007 16:26:20 :
Ajout des démos
17 janvier 2007 16:28:36 :
demo
21 novembre 2008 18:56:47 :
Changement d'url de la démo

 Sources du même auteur

Source avec Zip Source avec une capture LIBRAIRIE DE GESTION DES COULEURS POUR CSS : COLORPARSER
Source avec Zip Source avec une capture PLUGIN JQUERY : PROGRESS BAR
Source avec Zip Source avec une capture AUTO COMPLETION SUR CHAMPS TEXTE
Source avec Zip FONDU ENCHAINER ENTRE PLUSIEURS IMAGES
Source avec Zip Source avec une capture SELECTION DE VALEURS A PARTIR DE 2 LISTES À CHOIX MUPLIPLES
Toutes les sources de ryosama

 Sources de la même categorie

Source avec Zip Source avec une capture UN MENU EN CSS par Julien39
Source avec Zip FLÈCHE CLIGNOTANTE AU SURVOL D'UN LIEN par lecurieux41
Source avec Zip Source avec une capture TREEMENU-2.3.6-MACNIP par neep
Source avec Zip Source avec une capture MENU CIRCULAIRE par adelmonis
Source avec Zip Source avec une capture MENU TASKBAR WINDOWSXP HOME par micking
Toutes les sources de la catégorie Menu & Co

Commentaires et avis

Commentaire de ThunderPsycho le 23/09/2004 06:46:22

Mmmhhh Désolé, la source existe déja :

->   http://www.javascriptfr.com/code.aspx?ID=19298

Commentaire de ryosama le 23/09/2004 09:15:27

En effet je m'en suis aperçu apres coup.
Il y a 2 autres sources qui font la meme chose.

Mais nos 3 sources utilisent des algo différent pour l'effet de Zoom.

Je pense que ca vaut la peine de les laisser.

Commentaire de lumesh le 23/09/2004 16:58:27

superbe !

domage que IE n'aime pas les PNG mais bon le resultat est plutot bien reproduit (et à mon grand etonnement, pas de ralentissement ou autre !)

Commentaire de Kirua le 23/09/2004 22:11:55

du plus bel effet :) bravo, c'est très réussi

Commentaire de olid le 27/09/2004 12:52:19

Bon code, mais perso je m'en servirais pô pour faire un site...

Vouloir simuler des OS (Windows, Mac, Linux) pour un site est  un peu une mode "Site perso Kitch", et c'est aussi à mon sens du gachis... L'avantage du web est quand meme de donner une liberté totale pour ses GUI, alors autant en profiter bon sang !!! ;op

Enfin bon, ya eu de la recherche dans cette source, de bonnes astuces, et surement pas mal de boulot... 10 ;o)

Commentaire de lumesh le 28/09/2004 10:09:34

et par un moment ce fut les logiciels de se prendre pour des site web avec cette "sensation de liberté" au nvo du GUI (les skins).
Mais ou va le monde je vous le demande ! mais ou va t on ?! ;)

Commentaire de Kirua le 28/09/2004 16:43:39

l'art c'est toujours cyclique ;) tantôt la ligne, tantôt la courbe... donc d'une certaine manière, on va en arrière, mais pq pas? ça fait des millénaires qu'en allant tjs en arrière on avance, alors go :p

Commentaire de LiBe444 le 09/10/2004 21:45:18

Malgré le commentaire de ThunderPsycho, ce type de script est toujours bluffant.

Et la formulation algorithmique est si simple qu'elle en devient une vraie formule magique.

Bienvenue au club ryosama avec mes encouragements : 10/10.

Commentaire de dionysos6868 le 05/11/2004 16:57:27

Il marche super bien sous FIREFOX mais pas du tout sous IE .

sous ie le menu reste en haut de la page ce qui fait que quand je descend ma scrollbar le menu disparait.

quelqu'un a une idée?

Commentaire de ryosama le 08/11/2004 09:21:52

En effet sous IE pas moyen de faire tenir le menu en haut de page.
Normalement l'option "position:fixed" du menu permet de réaliser ce miracle mais IE et les Style CSS c'est un coup oui, un coup non.

Il a toujours moyen de capter le scroll de ta page et de faire descendre le menu en conséquence.  Je suis sûr que des scripts sur ce site le fond déjà.

Personnelement, j'ai la fleme ;-)

Commentaire de przelvis le 18/03/2005 16:39:58

féllicitation vraiment bien, bon code facile à utiliser.
Un problème, l'image reste grossie si on sort de la barre mais tant pis il est quand même super.
kariboo

Commentaire de daan53 le 18/05/2005 15:28:12

Ce code est exactement le code que je cherchais, mais j'aimerais l'avoir en vertical. Existe-t-il deja en vertical ou est il possible de le creer en vertical?
Moi je n'y arrive pas en tout cas.
Je suis utilisateur de mac.

Merci de me répondre.
Daan

Commentaire de TcHoUn le 21/08/2005 13:58:12

Super code... pareil je le cherchais depuis pas mal de temps... Par contre je relance la proposition de Daan53... J'ai beau chercher, j'arrive pas à trouver comment le foutre en vertical ?

Si quelqu'un pouvais passer en mode explication...

-Merci d'avance-

Commentaire de ryosama le 21/08/2005 15:33:54

Suite à 2 demandes, j'ai rajouté un menu verticale.

Commentaire de TcHoUn le 21/08/2005 16:09:56

Super ryosama .......Pour ne pas mourir idiot, je vais de ce pas voir ce que tu as modifier dans le code


Merci encore ;)

Commentaire de DJTIME le 13/01/2006 10:32:55

pas mal juste qu'il faudrait je penser utiliser quelques frames.iframes ca la fait pas a chaque fois que tu touche au mlenu t'as l'ecriture qui descend et remonte ca me donne le mal de mer :)
Bon c'est juste un plus que je remarque sinon ben pour le boulot 10/10

Commentaire de daan53 le 13/01/2006 16:53:15

C'est quoi des "frames.iframes"??
Merci pour le menu vertical aussi, RYOSAMA!

Commentaire de atlante34 le 16/05/2006 18:34:22

enorme ton code,
Ca fait trop style ...
Beau boulot,

Atlante34

Commentaire de baba0076 le 27/06/2006 22:20:29

Euh je ne comprends pas pourquoi lors d'un imbricaque assez complexe ou dans cetains cas, la souris ne fais rien ou ne bouge pas au bon endroit...

Commentaire de urbanrageisback le 05/06/2007 12:21:22

l algo est terrible
on trouvera pas mieux, simple et rapide
super boulot !!!

merci

Commentaire de Dark Silver le 20/06/2007 03:11:05

Il y a un problème avec FF, l'effet ne se limite pas au div donc meme si on se balade avec la souris quelque part dans la page en dessous de la barre dock, il y a quand meme un zoom sur les icones ce qui est très embétant :/.

Commentaire de Dark Silver le 20/06/2007 03:24:36

Ah non j'ai rien dit erreur de ma part désolé, si non l'effet est terrible !! Félicitation ;)

Commentaire de eltoad le 12/11/2007 22:23:56 10/10

Bonjour,

Je trouve votre script vraiment sympa. Mais par contre chez moi, si je quitte la liste d'icone un peu vite, l'icone ne revient pas à la taille original (tester sous safari et camino).
Suis je le seul à avoir cela ou d'autre on ça ?

Cordialement

Mayeu

Commentaire de ryosama le 13/11/2007 08:14:52

Vous n'êtes pas le seul. Le script n'a pas été conçu pour rendre sa taille initiale aux icones quand on quitte la liste.

Commentaire de eltoad le 13/11/2007 12:45:35

D'accord.
Y'a t'il un moyen de le faire ?
Je me pencherais peu être dessus, car j'aimerais vraiment que cela ce passe comme ça ^^

Commentaire de bambiseb le 17/12/2007 09:23:55

Salut,

Tout d'aborb, merci pour ce script qui est vraiment intéressant.

J'ai toutefois un petit souci et je voulais savoir si c'était volontaire et géré par le code.
Config: I.E 7
J'ai intégrer le dock dans une de mes applications. Lorsque l'on ouvre l'appli avec une résolution 1280 * 800 par ex, il n'y a aucune réaction. Par contre si je passe en 1024 * 768 alors cela fonctionne correctement et puis lorsque je repasse en 1280 et bien cela fonctionne toujours trés bien.

Avez-vous une idée la dessus?

Par avance merci

Commentaire de baroudbe le 11/05/2008 12:57:00

Il y a-t-il un moyen de faire en sorte que le dock reste en place danc IE 7? parce que j'arrive pas à ne plus le faire bouger.

Merci d'avance et félicitation!

Commentaire de shadow125 le 02/10/2008 14:37:00

Bonne source, néanmoins ne marche pas si on déclare un doctype, chose qui est pourtant indispensable.
Y a t-il un moyen de régler ce probleme pour une utilisation en html?

Sinon pour le fixer sous IE mettre un tableau pour bloquer la div, ensuite ça passe tout seul ;)

Commentaire de ryosama le 02/10/2008 18:48:39

En effet le script n'a pas été tester en précisant un DOCTYPE. Peut etre faut il mettre un doctype plus souple (éviter le xhtml). Je ne me suis pas encore pencher sur la question.

Commentaire de shadow125 le 02/10/2008 18:53:48

Il ne marche avec aucun des doctypes html, par contre quelqu'un sur un forum m'avait aidé à le rendre compatible xhtml, voici le code donc :
// <![CDATA[
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 + "px";
        img_tags[i].style.height=coef + "px";
    }
}
// ]]>

Commentaire de olive85 le 16/11/2008 16:22:24

bonjour, j'ai utilsé ton code qui marche super bien avec fire fox mais avec IE sa me met mon corps en haut à gauche alors qu'avec firefox il ext bien centré!!
Aurais-tu une solution ??

Commentaire de Frenchi114 le 30/04/2009 00:04:24

Pourrait-on mettre du texte sous l'icone afin que l'internaute sache à quoi elle correspond ?
Merci de vite me répondre !

Commentaire de bobabar le 24/09/2009 16:10:33 10/10

Super script, esthétique, réactif et très petit !
Rendu nickel sous FF3.5, Chrome 3. Sous IE6, le problème de non-gestion de la transparence des PNG de ce navigateur permet de mieux voir les redimensionnements des images.

10/10

Commentaire de Gloubi91 le 16/06/2010 01:33:43

Bonjour à tous!

A L'AIDE!!!
Mes images ne se réduisent pas, et le défilement ne marche pas du tout, alors que dans la page de test tout marche NICKEL! Je ne comprends pas... De plus seulement la moitié des images s'affichent.
J'ai pourtant tout placé dans ma page .PHP comme c'était expliqué:
La Javascript dans mes balises <head></head>
et le reste dans <body></body>.

Voici un screen du beug: http://s2.noelshack.com/uploads/images/14978474712729_beug.jpg
Si vous avez besoin de plus d'infos sur mon script, n'hésitez pas!
Merci d'avance de m'aider, j'ai un projet de site en cours.

Cordialement,
Gloubi.

Commentaire de Gloubi91 le 16/06/2010 12:46:48

Suite à mon message du 16/06/2010 à 1:33:43,
J'edit un peu...
J'ai réussi à modifier mes images pour qu'elles aient la forme désiré, il fallait juste rendre compatible le code en XHTML et renommer les images (Erreur très bête...):
   <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="images/firefox.png" width="33" height="33" border="0" align="top"></a>
<a href="#" title="Thunderbird"><img src="images/thunderbird.png" width="33" height="33" border="0" align="top"></a>
<a href="#" title="MySQL Manager"><img src="images/mysqlmanager.png" width="33" height="33" border="0" align="top"></a>
<a href="#" title="Paintshop pro 8"><img src="images/psp8.png" width="33" height="33" border="0" align="top"></a>
<a href="#" title="Object Media"><img src="images/objectmedia.png" width="33" height="33" border="0" align="top"></a>
<a href="#" title="Settings"><img src="images/settings.png" width="33" height="33" border="0" align="top"></a>
<a href="#" title="Skin studio"><img src="images/skinstudio.png" width="33" height="33" border="0" align="top"></a>
<a href="#" title="Stardock central"><img src="images/stardock_central.png" width="33" height="33" border="0" align="top"></a>
<a href="#" title="Theme manager"><img src="images/theme_manager.png" width="33" height="33" border="0" align="top"></a>
</div>
</body>

Néanmoins, j'ai essayé le bout de code proposé par SHADOW125 et pour moi il ne marche pas! :(
J'ai pourtant bien mis les balises:
<head>
<script language="javascript">
"MON CODE"
</script>
</head>

Il n'y a aucune animation...
Voici mon DOCTYPE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
     <title>Le titre de mon site</title>
     <meta name="keywords" lang="fr" content="motcle1,mocle2" />
     <meta name="description" content="Description de ma page web." />
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <meta http-equiv="Content-Language" content="fr" />
     <meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="icon" type="image/png" href="/images/pipfavicon.png" />
<script language="javascript">
"mon code"
</script>
</head>


Merci d'avance pour votre aide,
Gloubi.

Commentaire de RAZOR71 le 31/12/2010 09:50:24

Bonjour à tous, moi le code fonctionne très bien seulement des que je modifie le doctype et que je passe en strict 1.0 html cela ne fonctionne plus on a l'impression que le code javascript ne fonctionne plus. Quelqu'un aurait une solution svp pour rendre le code compatible en xhtml svp?

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Internet Explorer sur Mac OS [ par ov3rdoze ] Bonjour à tous Je suis sous Mac OS et me suis rendu compte que certaines de mes pages ne s'affichent pas correctement sur IE6 (mais ça à la limite c' Mailto: Chrome v16 Mac OS X [ par sanfroiniloi ] Bonjour, je ne sas pas si cette question est posée dans la bonne rubrique. je rencontre le problème suivant avec mailto: Mon code est le suivant [b] Problème de Javascript [ par Gloubi91 ] Bonjour à tous et à toutes, Je suis actuellement en phase de test pour un site que je voudrais lancer prochainement, et j'ai dans l'idée de créer une Probleme avec le menu effet dock [ par RAZOR71 ] Bonjour, Windows 7 / Firefox 3.5.16 J'ai récupéré ce code en html javascript qui est sensé reproduire un menu avec effet dock de zoom.Il fonctionn mesurer image.. a l'aide !!! [ par klaus ] Heya..pplJe veux avoir les mesures d'une image et j'ai reussi d'avoir quelques scripts, mais le probleme c'est qu'ils ne passent pas sur le Mac. C'est IE Mac print() [ par BenLaKnet ] Comment est il possible d'imprimer une page tout ce qu'il y a de plus normal en Javascript.self.print() window.print ne marchent pas sur IE Mac 5.01 n récupération info user ! Poste,Nom,OS... [ par Xanders ] Bjr a vous!Je début en JS donc je sais pas si c'est possible mais j'aimerais récupéré des information sur le client et en priorité son OS puis eventue Sur un Mac , pourquoi ça ne marche pas focus()? [ par valtina ] Voici mon problème, quand on clique un lien dans un frame, le focus se cale sur l'image correspondante au lien dans un autre frame. Voici quelques fra Votre avis sur mon code Javascript ? [ par okin7 ] Bonjour, Je développe des pages en HTML/Javascript avec des fonctions évoluées comme un moteur de recherche. J'aurais besoin de feedback (OS, navigate script pour détecter et rediriger selon l'OS [ par sbailay ] quelqu'un connait-il un script permettant de détecter l'OS (PC ou MAC) et ensuite rediriger selon l'OS?mercisandra


Nos sponsors


Sondage...

Comparez les prix


Archos 7 home tablet - 2 Go
Entre 149€ et 159€

Visiter le guide achat

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,749 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)