begin process at 2010 02 10 12:19:34
  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 :33 230
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 MENU VERTICALE GAUCHE ET DROIT DEROULANT par kazma
Source avec Zip Source avec une capture MENU VERTICALE EN TRANSPARENCE par dlvains
Source avec Zip Source avec une capture MENU DÉROULANT EN IMAGES par dlvains
Source avec Zip TBFRAME: TAB BROWSING FRAME par triumphs
Source avec Zip Source avec une capture MENU PRINCIPAL par ali1987
Toutes les sources de la catégorie Menu & Co

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture ANNIMATION QUI RECOUVRE L'ÉCRAN AVEC UN PNG SEMI TRANSPARENT par djmmix
FAIRE PASSER DES VARIABLES JAVASCRIPT EN VBSCRIPT ET INVERSE... par stfou
UN PETIT GENERATEUR HTML SIMPLE par carate
Source avec Zip MENU CONTEXTUEL GRÂCE AU CLICK DROIT DE LA SOURIS AVEC DES M... par OB1_12
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 ! Problème d'encodage HTML et Javascript [ par demorex6 ] Salut à tous! Je suis en train de realiser une petite application multilingue en php-Javascript-Mysql. J'ai créé un fichier pour la langue française agrandissement aperçu - html [ par renou ] Bonjour à tous,Concernant l'affichage des photos de mon website. Je voudrais avoir un script qui remplace une petite image par une autre, plus grande. MENU en javascript [ par bayrem90 ] svp MON MENU EN JAVASCRIPT possède un problème a mon site on ce qui concerne les images et les animations flash qui ces place au dessous du menu. les Faire défiler liste images ou vidéos dans un menu style IPOD en javascript???? [ par mikymaxxx ] Bonjour,Voila, je me demandais si il y aurait une astuce en javascript et css afin de créer ceci : j'ai fait un Ipod, on peut venir insérer des photos


Nos sponsors


Sondage...

Comparez les prix


Console Microsoft Xbox 360 Elite
Entre 299€ et 300€

Visiter le guide achat

CalendriCode

Février 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728

Consulter la suite du CalendriCode
 
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,468 sec (3)

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)