Menu animé avec image survolée !

Commenter

Contenu du snippet

Code (X)HTML et javascript, beau rendu, simple d'utilisation !

TESTEZ LE MENU SUR : http://bigbananier.free.fr/Test.php

Explication : On créer deux image "Accueil" par exemple, avec un fond, un style, une police, ce que l'on veut de différents et au passage de la souris l'image passe de l'une a l'autre.

Source / Exemple : 


Créons une nouvelle page dédiée au menu, Exemple : "menu.php"

Créons une image qui changera au survol de la souris en utilisant ce code :

<div id="menu">
<!-- Permettra de créer du style CSS  sur le menu, ajouter un cadre par exemple-->
    <div id="menuContent">     
    <!-- Permettra de créer du style CSS  à l'intérieur du cadre par exemple-->
      <div class="menuItem"
       <!-- Permettra de créer du style CSS  sur les images du menu par exemple-->
             onclick="location.href = 'page.php';"  
             <!-- Créer un lien vers une page au clic de la souris-->
             style="background-image : url(images/imageFixe.jpg);"
             <!-- Définition de l'image -->
             onmouseout="this.style.backgroundImage = 'url(images/imageFixe.jpg)';"
             <!-- Définition de l'image lorsque la souris n'est pas sur l'image-->
             onmouseover="this.style.backgroundImage = 'url(images/imageSurvolée.jpg)';">
             <!-- Définition de l'image lors du passage de la souris qur celle-ci-->
        </div>
      
   </div>
   
</div>

Ajoutons au CSS :

#menu {
      background : Transparent url("images/cadre.jpg") no-repeat;
      background-position : left center;
     }

.menuItem   {
         width : 155px;
         height : 35px;
         cursor : pointer;
         }

Ajouter dans le body des pages ou l'on veus que le menu apparaissent :

<?php
    require("menu.php");
?>

Conclusion :


Menu valide (X)HTML personalisable à souhait.

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.