menu glissant photo

vector · 22 Octobre 2009

Bonjour
J'ai fait un menu en javascript à la façon : http://www.lifacolor.com/fr/portfolio/photo/photo-book-index.php3
Je n'arrive pas à mettre un lien sur mes images/menu.
Ci-dessous le code de ma page ou se trouve mon menu, vous pouvez voir les liens mais ça ne marche pas (j'ai une fenêtre qui me donne l'url mais c'est tout...)

Bloc de code:

 <div id="global">
        
        <div id="container">
                                <div id="imageMenu">
                                        <ul>
                                                <li class="societe"><a href="societe.html"></a></li>
                                                <li class="productions"><a href="production.html"></a></li>
                                                <li class="produits"><a href="produits.html"></a></li>
                                                <li class="contact"><a href="contact.html"></a></li>
                                        </ul>
                                </div>
                                <script type="text/javascript">
                        
                        window.addEvent('domready', function(){
                                var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:385, border:0, onOpen:function(e,i){alert(e);}});
                        });
                </script>
                        </div>

Gracia

vector · 23 Octobre 2009

Rebonjour
Avec une demonstration de ce que j'ai fait peut-être comprendrez-vous mieux :

voir l'essai

Merci beaucoup pour votre aide

momo-fr · 23 Octobre 2009

Je n'ai pas de réponse précise sur ce que tu utilises, à priori ton souci vient du javascript…

En tout cas voilà une source pour faire ce genre de menu, ça ressemble à ta source (Mootools), je viens de trouver une chose similaire basée sur jQuery, peut-être plus usuel, je ne sais pas vraiment.

A creuser.

westindies972 · 24 Octobre 2009

Salut

Le problème vient de ton javascript. Si tu regarde bien, dans ton code javascript, le fait de cliquer sur un élément ouvre une fenêtre d'alerte javascript :

Bloc de code:

onOpen:function(e,i){alert(e);}

Peut être qu'en enlevant cette fonction ce serait bon, ça devait marcher (je ne connais pas très bien la syntaxe avec Mootools, j'utilise jQuery d'habitude). Le résultat serait quelque chose comme ça :

Bloc de code:

<script type="text/javascript"> 
	window.addEvent('domready', function(){
		var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:385, border:0});
	});
</script>

Tu peux également optimiser ton code html en plaçant l'identifiant imageMenu sur le ul plutôt que d'englober tout dans un div, ça te permettra d'enlever un niveau d'imbrication qui est totalement inutile dans ce cas. Tu te retrouveras avec le code suivant :

Bloc de code:

<ul id="imageMenu"> 
	<li class="societe"><a href="societe.html"></a></li> 
	<li class="productions"><a href="production.html"></a></li> 
	<li class="produits"><a href="produits.html"></a></li> 
	<li class="contact"><a href="contact.html"></a></li> 
</ul>

Il faudra que tu modifier un peu ton css imageMenu.css en remplaçant les "#imageMenu ul" par "ul#imageMenu" dans ce cas là sinon tes styles ne s'appliqueront plus :

Bloc de code:

ul#imageMenu { position: relative; height: 175px; overflow: hidden; margin: 0; height: 175px; }
ul#imageMenu li { float: left; }
ul#imageMenu li a { width:250px; height: 175px; cursor: pointer; display: block; }
ul#imageMenu li.societe a { background-image: url(img_menu/societe.jpg); }
ul#imageMenu li.productions a { background-image: url(img_menu/productions.jpg); }
ul#imageMenu li.produits a {background: url(img_menu/produits.jpg) repeat scroll 0%; }
ul#imageMenu li.contact a {background: url(img_menu/contact.jpg) repeat scroll 0%; }

Bon courage !

vector · 27 Octobre 2009

merci à toi, l'url fonctionne très bien maintenant, je vais essayer d'optimiser le code pour voir..

---------- Nouveau message ajouté à 10h19 ---------- Le message précédent a été envoyé à 09h46 ----------

westindies972 a dit:
Salut

Le problème vient de ton javascript. Si tu regarde bien, dans ton code javascript, le fait de cliquer sur un élément ouvre une fenêtre d'alerte javascript :

Bloc de code:

onOpen:function(e,i){alert(e);}

Peut être qu'en enlevant cette fonction ce serait bon, ça devait marcher (je ne connais pas très bien la syntaxe avec Mootools, j'utilise jQuery d'habitude). Le résultat serait quelque chose comme ça :

Bloc de code:

<script type="text/javascript"> window.addEvent('domready', function(){ var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:385, border:0}); }); </script>

Tu peux également optimiser ton code html en plaçant l'identifiant imageMenu sur le ul plutôt que d'englober tout dans un div, ça te permettra d'enlever un niveau d'imbrication qui est totalement inutile dans ce cas. Tu te retrouveras avec le code suivant :

Bloc de code:

<ul id="imageMenu"> <li class="societe"><a href="societe.html"></a></li> <li class="productions"><a href="production.html"></a></li> <li class="produits"><a href="produits.html"></a></li> <li class="contact"><a href="contact.html"></a></li> </ul>

Il faudra que tu modifier un peu ton css imageMenu.css en remplaçant les "#imageMenu ul" par "ul#imageMenu" dans ce cas là sinon tes styles ne s'appliqueront plus :

Bloc de code:

ul#imageMenu { position: relative; height: 175px; overflow: hidden; margin: 0; height: 175px; } ul#imageMenu li { float: left; } ul#imageMenu li a { width:250px; height: 175px; cursor: pointer; display: block; } ul#imageMenu li.societe a { background-image: url(img_menu/societe.jpg); } ul#imageMenu li.productions a { background-image: url(img_menu/productions.jpg); } ul#imageMenu li.produits a {background: url(img_menu/produits.jpg) repeat scroll 0%; } ul#imageMenu li.contact a {background: url(img_menu/contact.jpg) repeat scroll 0%; }

Bon courage !

Re-bonjour
J'ai fait l'optimisation mais je n'arrive pas à fixer mon menu dans le 2eme td de mon tableau..
Merci bien pour ton aide westindies972
http://virginie.penalba.free.fr/essai/essai.html

vector

Anonyme · 27 Octobre 2009

Ben déjà il faudrait laisser tomber la mise en page par tableaux.

:siffle:

vector · 27 Octobre 2009

oui ok mais là se sera pour plus tard...car j'ai pas le temps de me former à ça tout de suite !! :eek:
Quelqu'un a mieux ?
Merci

westindies972 · 27 Octobre 2009

Le positionnement ne fonctionne pas car dans ton code tu as des propriétés css pour l'élément #imageMenu qui se superposent. Tu peux tout d'abord supprimer de la ligne 9 à la ligne 12 dans ton fichier essai.html le contenu suivant :

Bloc de code:

<style type="text/css" media="screen"><!--
      ul#imageMenu { height: 175px; position: relative; top: 100px; left: 20px; width: 1090px; z-index: 1; visibility: visible; }
      #imageMenu { height: 175px; width: 1090px; top: 100px; z-index: 1; position: relative; visibility: visible; }
--></style>

(la mise en commentaire ne s'applique pas dans ton code, il aurait fallu la mettre autour des balises <style>...</style>)

Ces styles s'appliquent sur le même élément et rentrent en interférence avec les styles appliqué à ce même élément dans le fichier imageMenu.css. Dans ce dernier, remplace la ligne :

Bloc de code:

ul#imageMenu { position: absolute; top: 100px; right: 30%; height: 175px; overflow: hidden; }

par le code suivant :

Bloc de code:

ul#imageMenu { position: relative; width: 1090px; height: 175px; }

Ca devrai fonctionner avec tout ça.
Mais comme l'a dit gloup gloup, le mieux est d'abandonner les tables pour la mise en page.

Bon courage !

vector · 28 Octobre 2009

Merci t'es trop fort !

Promis c'est le dernier site ou j'utilise des tables...
vector

---------- Nouveau message ajouté à 10h56 ---------- Le message précédent a été envoyé à 10h22 ----------

Le menu c'est bien replacé, mais il n'est pas encore collé à gauche et en haut... De + mon tableau noir lui il est + grand que mon menu pourtant j'ai tout mis à 999 px... Une idée ? sans abuser..:rolleyes:
http://virginie.penalba.free.fr/essai/essai.html

Grand merci!

vector · 30 Octobre 2009

Bonjour, mon menu fonctionnait bien jusqu'à présent, sauf que là je l'ai mis en ligne pour tester
De façon très aléatoire tout mon menu se barre comme un accordéon sur la gauche pour disparaître complètement... Bizarre
Si vous avez une idée...

Merci
Autre question : pourquoi on a pas le même résultat en local qu'en ligne sur les positionnements ?
Site fait en css vue avec safari 3.1.2 mac..
Merci

westindies972 · 30 Octobre 2009

Salut

Si tu n'as pas le même résultat en ligne qu'en local, c'est in problème de cache. Ton navigateur garde en mémoire les anciens CSS et Javascript, si ces deniers ont changé, il faut forcer le navigateur à vider le cache pour interpréter les modifications des fichiers.

Sur Safari, le plus simple, c'est de presser 2 fois la touche "R" en maintenant la touche "CMD" (ou pomme) enfoncée. Ca aura pour conséquence une recharge totale de la page (HTML + JS + CSS + images...).

Sur Firefox, il faut faire "CMD" (ou pomme) Shift R

vector · 30 Octobre 2009

En effet tu as raison j'ai re-actualisé mon local est c'est pareil qu'en ligne !
Ouf car sinon ça devient un casse tête !
Merci

menu glissant photo

vector

Membre actif

vector

Membre actif

momo-fr

Ancien Aveyronnais

westindies972

Membre confirmé

vector

Membre actif

Anonyme

Invité

vector

Membre actif

westindies972

Membre confirmé

vector

Membre actif

vector

Membre actif

westindies972

Membre confirmé

vector

Membre actif

Sujets similaires