EFFET DOCK MAC OS POUR VOS MENUS
ThunderPsycho
Messages postés
180
Date d'inscription
lundi 3 juin 2002
Statut
Membre
Dernière intervention
4 février 2007
-
23 sept. 2004 à 06:46
cs_olid Messages postés 296 Date d'inscription lundi 2 septembre 2002 Statut Membre Dernière intervention 28 janvier 2008 - 5 oct. 2012 à 18:53
cs_olid Messages postés 296 Date d'inscription lundi 2 septembre 2002 Statut Membre Dernière intervention 28 janvier 2008 - 5 oct. 2012 à 18:53
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
https://codes-sources.commentcamarche.net/source/26334-effet-dock-mac-os-pour-vos-menus
https://codes-sources.commentcamarche.net/source/26334-effet-dock-mac-os-pour-vos-menus
5 oct. 2012 à 18:53
Et comme je disais en 2004, simuler des effets des OS sur un site web est horriblement kitch et rapidement démodé...
5 oct. 2012 à 17:40
Mais j'ai trouvé, il faut mettre:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
et pense à modifier l'attribut de ta balise image dans le body:
style="width:33px;height:33px; border:0px;" align="top" alt="cequetuveux"
et apres c'est ok avec W3 + ca fonctionne!
31 déc. 2010 à 09:50
16 juin 2010 à 12:46
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...):
<!-- 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) -->
<!-- 'width' et 'height' sont à la taille minimum -->
[# ]
[# ]
[# ]
[# ]
[# ]
[# ]
[# ]
[# ]
[# ]
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.
16 juin 2010 à 01:33
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 .
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.
24 sept. 2009 à 16:10
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
30 avril 2009 à 00:04
Merci de vite me répondre !
16 nov. 2008 à 16:22
Aurais-tu une solution ??
2 oct. 2008 à 18:53
// <![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 MAX) coef = MAX ;
img_tags[i].style.width=coef + "px";
img_tags[i].style.height=coef + "px";
}
}
// ]]>
2 oct. 2008 à 18:48
2 oct. 2008 à 14:37
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 ;)
11 mai 2008 à 12:57
Merci d'avance et félicitation!
17 déc. 2007 à 09:23
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
13 nov. 2007 à 12:45
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 ^^
13 nov. 2007 à 08:14
12 nov. 2007 à 22:23
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
20 juin 2007 à 03:24
20 juin 2007 à 03:11
5 juin 2007 à 12:21
on trouvera pas mieux, simple et rapide
super boulot !!!
merci
27 juin 2006 à 22:20
16 mai 2006 à 18:34
Ca fait trop style ...
Beau boulot,
Atlante34
13 janv. 2006 à 16:53
Merci pour le menu vertical aussi, RYOSAMA!
13 janv. 2006 à 10:32
Bon c'est juste un plus que je remarque sinon ben pour le boulot 10/10
21 août 2005 à 16:09
Merci encore ;)
21 août 2005 à 15:33
21 août 2005 à 13:58
Si quelqu'un pouvais passer en mode explication...
-Merci d'avance-
18 mai 2005 à 15:28
Moi je n'y arrive pas en tout cas.
Je suis utilisateur de mac.
Merci de me répondre.
Daan
18 mars 2005 à 16:39
Un problème, l'image reste grossie si on sort de la barre mais tant pis il est quand même super.
kariboo
8 nov. 2004 à 09:21
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 ;-)
5 nov. 2004 à 16:57
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?
9 oct. 2004 à 21:45
Et la formulation algorithmique est si simple qu'elle en devient une vraie formule magique.
Bienvenue au club ryosama avec mes encouragements : 10/10.
28 sept. 2004 à 16:43
28 sept. 2004 à 10:09
Mais ou va le monde je vous le demande ! mais ou va t on ?! ;)
27 sept. 2004 à 12:52
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)
23 sept. 2004 à 22:11
23 sept. 2004 à 16:58
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 !)
23 sept. 2004 à 09:15
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.
23 sept. 2004 à 06:46
-> http://www.javascriptfr.com/code.aspx?ID=19298