begin process at 2012 02 05 23:37:33
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Menu & Co

 > MENU ANIMÉ AVEC IMAGE SURVOLÉE !

MENU ANIMÉ AVEC IMAGE SURVOLÉE !


 Information sur la source

Note :
Aucune note
Catégorie :Menu & Co Classé sous :menu, html, javascript, survolée, simple Niveau :Débutant Date de création :01/04/2007 Date de mise à jour :01/04/2007 23:27:33 Vu :40 853
Auteur : TheBigBananier

Ecrire un message privé
Site perso
Commentaire sur cette source (8)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
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

  • 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");
  • ?> 
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.


 Historique

01 avril 2007 23:15:39 :
MAJ
01 avril 2007 23:18:48 :
MAJ
01 avril 2007 23:27:33 :
MAJ

 Sources de la même categorie

Source avec Zip Source avec une capture UN MENU EN CSS par Julien39
Source avec Zip FLÈCHE CLIGNOTANTE AU SURVOL D'UN LIEN par lecurieux41
Source avec Zip Source avec une capture TREEMENU-2.3.6-MACNIP par neep
Source avec Zip Source avec une capture MENU CIRCULAIRE par adelmonis
Source avec Zip Source avec une capture MENU TASKBAR WINDOWSXP HOME par micking
Toutes les sources de la catégorie Menu & Co

 Sources en rapport avec celle ci

Source avec une capture PRÉSENTOIR PAGE/SUJET par tiranus
Source avec Zip POUR LES DÉBUTANTS EN JAVASCRIPT par lecurieux41
Source avec Zip DICOFOU DICTIONNAIRE FANTAISISTE EN JAVASCRIPT par lecurieux41
Source avec Zip MODIFIER LE CONTENU D'UN DIV AVEC JAVASCRIPT par lecurieux41
Source avec une capture MENU SIMPLE par tit1012

Commentaires et avis

Commentaire de kankrelune le 02/04/2007 01:21:02

Euh... autant le faire en css pur... .. .

@ tchaOo°

Commentaire de Palleas_44 le 02/04/2007 07:47:58

J'allais le dire, pourquoi se casser la nenette en faisant ca en js ? En plus t'y perd en accessibilité :/

Commentaire de Palleas_44 le 02/04/2007 07:49:36

J'ajouterai non au javascript intrusif et vive les fontions vu que pour la maintenabilité, on repassera ;)

Commentaire de TheBigBananier le 02/04/2007 12:14:25

La source c'est moi  :

Niveau de la source : Débutant

Voila tout est dit ^^

J'ai commencer a "programmer" y'a 2 semaines et j'ai pas mal galérer alors quand j'ai enfin trouvé comment faire marché ce petit menu sur tout les navigateurs et tout sa en (X)HTML, jvoulais le faire partager pque j'étais bien content de me retrouver sur ce site quand je chercher désespéremment des infos sur google :)

Voila aprés vous pouvez tjr dénigrer, mais sa fais pas avancer grd chose, je sais qu'on peus tjr faire mieux :)

Commentaire de kankrelune le 02/04/2007 15:25:22

"quand j'ai enfin trouvé comment faire marché ce petit menu sur tout les navigateurs"

Oui sauf que cela ne marche pas sur tous les navigateur puisqu'il faut que javascript soit activer... après si critiquer c'est forcement dénigrer soit "ton code il est super top de la mort qui tue" mais c'est pas comme ça qu'on avance... qui plus est tu dis que tu as commencé à coder depuis deux semaine donc mieux vaut tenir compte des commentaires de personnes plus expérimentés que toi plutôt que de faire le caliméro... non... .. ?

Pour finir...

<style type="text/css">
<!--//
    #menu
    {
background : Transparent url("images/cadre.jpg") no-repeat;
background-position : left center;
    }
    .menuItem
    {
width: 155px;
height: 35px;
display:block;
background-repeat: no-repeat;
    }
    #maPage1 {background-image : url(images/menu1.jpg);}
    #maPage1:hover {background-image : url(images/menu1_hover.jpg);}
    #maPage2 {background-image : url(images/menu2.jpg);}
    #maPage2:hover {background-image : url(images/menu2_hover.jpg);}
//-->
</style>
<div id="menu">
    <a href="maPage1.php"><span id="maPage1" class="menuItem">&nbsp;</span></a>
    <a href="maPage2.php"><span id="maPage2" class="menuItem">&nbsp;</span></a>
</div>

Voila ton menu full css et xhtml strict valid... .. .

@ tchaOo°

Commentaire de TheBigBananier le 02/04/2007 15:56:28

Vive l'ambiance ici :O sa rend agressif le full pc

Au moins ma source aura servi a quelquechose tu la refaite en mieux, et c'est le plus important, mais peace plz :)

Commentaire de Palleas_44 le 02/04/2007 18:47:59

Personne n'est agressif la, si tu sais pas prendre les remarques de manière construite, c'est ton soucis :)

Commentaire de Fidzy le 09/04/2007 15:18:45

Paix, mon ami...

Ça fait un bout que je consulte le site et je peux te dire que l'ambiance y est bonne.

Ne prends pas les commentaires perso.
La programmation a un côté scientifique et logique.  Alors prends un peu de recul.  Oublies que c'est "ton" code, et analyse les réponses.

A+

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

menu html & javascript [ par gerteis ] je souhaite validé une liste deroulante du type &lt;select&gt; avec une fonction onmouse.Je ne connais pas javascript quelqu'un peut il m'aider ? Aidez-moi s'il vous plait [ par pandzobo ] Bonjour,J'ai t&#233;l&#233;charg&#233; ici le script que j'ai utilis&#233; dans le fichier DHTML inclus ci-apr&#232;s pour un menu d&#233;roulant. Mai ASPX javascript menu problème [ par rabbiwan ] Bonjourje fais un site en ASPX c# et on m'a indiqué de mettre en menu en javacriptalors j'ai trouvé un super menu peut etre vous connaissez je l'ai vu recuperer un element javascript [ par salim81 ] bonjour! j'ai une page html qui contient un menu en DHTML avec des sous menu.lorsque je clique sur un element de mon menu il me redirige vers une autr Ordre de chargement page WEB (html+javascript) ? [ par tlc77 ] Bonjour à tous ! :-) Je suis en train de faire un site pour la société qui m'emploi en alternance cette année. J'ai appris le HTML ainsi que le PHP, p Menu horizontal et Javascript [ par Lucky062 ] Bonjour à tous,   Je suis débutant et peut être que la question est stupide, mais je me lance !   Voici un moment que je cherche et je ne trouve pas ! création d'un menu en javascript/HTML/CSS [ par marty91410 ] bonjour, je cherche a créer un menu dynamique pour mon site web. le mieux serait un logiciel genre DHTML MENU STUDIO que j'ai testé et que j'aime be [CS]Un thème HTML [ par rt15 ] Salut, Il y a pas mal de questions sur le HTML qui finissent dans la bar (Ou sur le site du langage côté serveur utilisé, alors que le problème se li Besoin d'aide pour une prob javascript très simple ! [ par hellworld ] Bonjour, J'ai trouvé un bout de code permettant de changer de photo sans recharger la page en cliquant sur une miniature. Voici un lien sur un exemp javascript et php [ par noob2 ] Bonjour tout le monde, J'ai récupérer un code javascript sur ce site afin d'avoir 1 menu d'éroulant, la structure des liens du menu est gérer par des


Nos sponsors


Sondage...

Comparez les prix


Mio - Moov V735 - GPS Europe - Ecran 7"
Entre 305€ et 375€

Visiter le guide achat

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

Photo Waterfall in Kauai Hawaii With RainbowPhoto Renewable Energy is Within Reach
Photo Sunflower Farmland With Blue Cloudy Sky 

Visiter la photothèque
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,452 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)