J'ai créé deux version d'un menu pour mon site (Html pour le contenu et CSS pour mise en forme).
La première est une image-map qui reste fixe (un menu fixe) et centrée grâce au CSS.
La seconde est un menu utilisant du javascript pour donner un effet plus dynamique. Ce menu a été réalisé avec Imageready. Il est aligné à gauche.
Je voudrais évidemment réaliser un mixe des deux menus pour obtenir un menu fixe et centré qui possède un effet dynamique.
Malheureusement, question codage, c'est assez casse-tête.
Pour la première version, je crée un codage dans la CSS et un référent dans l'HTML entre des balises. Et c'est tout !
Pour la seconde version, c'est un javascript placé dans la CSS, l'activation dans la balise body et les images scriptées proprement dites avec les "onmouseover", etc. dans l'Html.
Vous voyez le topo.
A la perception, l'image de la première version est identique à celle de la deuxième version. Bien entendu, j'ai dû créer des tranches sous Photoshop puis des fonction d'activation au passage de la souris dans Imageready pour la seconde version ce qui signifie que j'ai en réalité une image dans la première version et plusieurs images dans la seconde.
Ca devient un casse tête au niveau du centrage avec CSS. Plus question d'appliquer un div margin:0px auto pour centrer les images ni d'appliquer une balise pour le menu fixe pour la seconde version car à ce moment là, toutes les images en tranches sont superposées au centre les unes sur les autres.
Faire un décalage dans le code de la CSS au niveau des pixels sur la page dans le javascript n'est pas une solution car il faudrait que l'image soit centrée de la même manière dans n'importe quel navigateur (excepté Ie5 et versions antérieures) et à n'importe quelle résolution.
Bein, soit, j'ai pas bien effectué l'opération, soit, c'est pas vraiment ça car ça ne fonctionne pas.
Toute la mise en page en css est modifiée (fond noir et plus de cadres en div imbriqués) et pire, le menu (tranches) en javascript est complètement bouleversé car toutes les images-tranches sont alignées à gauche avec une certaine marge et l'une en dessus de l'autre. Quant à la page avec le menu fixe en css, c'est simple, le menu n'est plus fixe du tout.
Peut-on me donner un exemple concret d'application d'un menu fixe en css constitué de tranches(imageready), centré et rendu dynamique avec du javascript?