IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

HTML Discussion :

Bouton de menu en rollover


Sujet :

HTML

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre habitué
    Inscrit en
    Octobre 2009
    Messages
    14
    Détails du profil
    Informations forums :
    Inscription : Octobre 2009
    Messages : 14
    Par défaut Bouton de menu en rollover
    Bonjour à tous,

    je souhaiterai rendre plus dynamique mon site internet en appliquant un rollover sur le menu.
    Après plusieurs tentatives, je n'arrive pas à rendre ma page compatible W3C et il subsiste un décalage dans le menu (par rapport à la page d'origine).
    J'ai fait le test sur le bouton presentation.

    Voici le code utilisé dans le head:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    <script language="JavaScript">
    <!-- Begin
    presentation = new Image();
    presentation.src = "http://www.reikisoins.fr/presentation_files/shapeimage_1.png";
    end -->
      </script>
    et dans body :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <div class="tinyText" style="height: 26px; left: 22px; position: absolute; top: 196px; width: 104px; z-index: 1;">
    <img usemap="#map1" id="shapeimage_1" style="border: medium none ; height: 31px; left: -3px; position: absolute; top: -3px; width: 109px; z-index: 1;" alt="PRESENTATION" title="Presentation du Reiki" /><map name="map1" id="map1">
    <area href="http://www.reikisoins.fr/presentation.html" title="Presentation du Reiki" alt="Presentation du Reiki" coords="3, 3, 107, 29" onmouseover="presentation.src = 'http://www.reikisoins.fr/presentation_files/shapeimage_1.png';" onmouseout="presentation.src = 'http://www.reikisoins.fr/index_files/shapeimage_1.png';" />
    <img src="http://www.reikisoins.fr/index_files/shapeimage_1.png" name="presentation" /></map>
     
    </div>
    Ma page d'origine se trouve à http://www.reikisoins.fr , rajoutez /index2.html pour voir mon résultat.

    Merci d'avance pour votre aide.

  2. #2
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Salut,
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <script language="JavaScript">
    <!-- Begin
    presentation = new Image();
    presentation.src = "http://www.reikisoins.fr/presentation_files/shapeimage_1.png";
    end -->
      </script>

    Begin et end n'étant pas des instructions JavaScript, j'imagine que tu dois avoir une erreur dans ta page...
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  3. #3
    Membre habitué
    Inscrit en
    Octobre 2009
    Messages
    14
    Détails du profil
    Informations forums :
    Inscription : Octobre 2009
    Messages : 14
    Par défaut
    Merci Bovino, j'ai fait la modification sur ma page.

    Le bouton de ma page /index2.html est décalé par rapport à ma page d'accueil.
    Ai-je mal placé le code et les fonctions onmouseover et onmouseout?

  4. #4
    Membre Expert
    Avatar de kaiser59
    Homme Profil pro
    Inscrit en
    Novembre 2005
    Messages
    1 264
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France

    Informations forums :
    Inscription : Novembre 2005
    Messages : 1 264
    Par défaut
    Salut,

    En analysant ton code (peu orthodoxe ) Je me trompe mais tu utilises des images dans ton menu ? Pourquoi ?

    Ton menu peut être fait tout simplement avec le css sans utiliser d'image (niveau visuel) un simple carré avec de grosse bordure CSS le fait amplement et te facilite la tâche.
    Dans ton css tu rajoutes a:hover (au survole de la souris sur le lien) et tu mets ce que tu veux.

    De plus, c'est crée avec iWeb (
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <meta name="Generator" content="iWeb 3.0.1" />
    ) c'est un ami de frontpage

    Rend toi sur le FAQ CSS pour mieux comprendre comment interagir avec

  5. #5
    Membre habitué
    Inscrit en
    Octobre 2009
    Messages
    14
    Détails du profil
    Informations forums :
    Inscription : Octobre 2009
    Messages : 14
    Par défaut
    Bonsoir à tous,

    Pourriez-vous m'indiquer ce qui cloche dans mon css?

    dans le body:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <div class="presentation" style="height: 26px; left: 22px; position: absolute; top: 196px; width: 104px; z-index: 1;">
    <img usemap="#map1" id="shapeimage_1" src="index_files/shapeimage_1.png" style="border: medium none ; height: 31px; left: -3px; position: absolute; top: -3px; width: 109px; z-index: 1;" alt="PRESENTATION" title="Presentation du Reiki" /><map name="map1" id="map1">
    <area href="http://www.reikisoins.fr/presentation.html" title="Presentation du Reiki" alt="Presentation du Reiki" coords="3, 3, 107, 29" />
    </map>
     
    </div>

    dans le css:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    div.presentation { 
    	background-image: url(http://www.reikisoins.fr/index_files/shapeimage_1.png); 
    	display: block; 
    	width: 104px;
    	background-repeat:no-repeat;
    	 }
     
    div.presentation: hover { 
    	background-image: url(http://www.reikisoins.fr/presentation_files/shapeimage_1.png);
    	background-repeat:no-repeat;}
    Merci, j'aimerai bien enfin réussir un bouton



    Kaiser59:
    En analysant ton code (peu orthodoxe ) Je me trompe mais tu utilises des images dans ton menu ? Pourquoi ?
    Je sais pas, pourquoi pas ? mais je pense que ça peut être pas mal de garder mon code d'origine et de changer le css avec les pseudoclasses hover etc.. comme tu me le proposes

  6. #6
    Membre Expert
    Avatar de kaiser59
    Homme Profil pro
    Inscrit en
    Novembre 2005
    Messages
    1 264
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France

    Informations forums :
    Inscription : Novembre 2005
    Messages : 1 264
    Par défaut
    Pourquoi pas

    Néanmoins, tu appliques à ton code deux styles, tu le places directement dans le code et tu as aussi une css pour l'utiliser sous la même class...

    Il faut faire soit l'un, soit l'autre en même temps je ne sais plus qui est prioritaire et ne sera que complémentaire c'est-à-dire le "height" par exemple dans la class presentation.

    Si tu souhaites le faire avec des images à ma connaissance, il te faudra passer par onMouseOver et onMouseOut en gros du javascript...

Discussions similaires

  1. bouton avec menu déroulant dans la tool bar.
    Par archerhawke dans le forum AWT/Swing
    Réponses: 3
    Dernier message: 27/10/2009, 19h50
  2. [FLASH 8] Transition sur bouton de menu deroulant
    Par chienlou dans le forum Flash
    Réponses: 3
    Dernier message: 05/06/2006, 10h13
  3. Problème avec Goto pour un bouton de menu
    Par Klotian dans le forum Flash
    Réponses: 3
    Dernier message: 26/05/2006, 17h49
  4. Menu image --> rollover flash
    Par glloq8 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 26/04/2006, 01h08
  5. Réponses: 3
    Dernier message: 13/06/2005, 12h05

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo