Créer un menu horizontal informatif avec phatfusion

Superbe effet pour ce menu tout en images.

Cliquez sur le lien ci-dessous. Vous pouvez tester en survolant chaque image et en cliquant dessus : un message d'annonce s'ouvre

ImageMenu

1ère étape :

Allez sur Phatfusion

Cliquez sur imagemenu.zip

Vous venez d'enregistrer un fichier .zip : il s'agit d'un ensemble de fichiers compressés. Pour les décompresser, j'utilise WinRAR, Extraire Vers.

2ème étape :

Toujours sur le site Phatfusion, cliquez maintenant sur mootools v1.11

Vous arrivez sur le site Mootools, où vous cliquez sur Download.

Vous cochez toutes les lignes. SI vous aimez faire des diaporamas, vous vous rendrez compte que vous aurez souvent besoin de ce fichier.

Vous recliquez sur Download.

Vous venez d'enregistrer le fichier mootools.js

3ème étape :

Dans l'administration de votre blog - Documents - Autres Fichiers :

•  vous créez un répertoire nommé Imagemenu :
  
  •  dans lequel vous créez un sous-répertoire nommé images
    
    • dans lequel vous enregistrez les images qui composeront votre diaporama
      
    • vous notez leur adresse
      

4ème étape :

Sur votre PC :

• vous ouvrez votre Bloc-Notes
  
• vous appelez le fichier imagesMenu.css
  
• vous modifiez les chemins des images (URL), vous les avez noté à la 3ème étape
  
• vous enregistrez sous le même nom
  

5 ème étape :

Dans l'administration de votre blog - Documents - Autres Fichiers - Imagemenu :

• vous créez un sous-répertoire nommé : css
  
  • dans lequel vous enregistrez le fichier :
    
    • ImageMenu.css
      

• vous créez un sous-répertoire nommé : js
  
  • dans lequel vous enregistrez les fichiers :
    
    • imageMenu.js
      
    • mootools-release-1.11.js
      

• vous notez les adresses de ces 3 fichiers
  

6ème étape :

Lors de la conception de votre menu, vous collez en HTML

<link href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/imagemenu/css/imageMenu.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/imagemenu/js/mootools-release-1.11.js"></script>
<script type="text/javascript"
src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/imagemenu/js/imageMenu.js"></script>

Vous remplacez en rouge par les adresses de vos fichiers, vous les avez noté dans la 5ème étape

Vous collez ensuite, toujours en HTML, ce pavé qui représente vos photos

<div id="imageMenu">
            <ul>
 <li class="landscapes"><a href="http://annak.over-blog.com/article-11838672.html">Landscapes</a></li>
                <li class="people"><a href="http://annak.over-blog.com/article-19659105.html">People</a></li>
                <li class="nature"><a href="http://annak.over-blog.com/article-11346926.html">Nature</a></li>
                <li class="urban"><a href="http://annak.over-blog.com/article-10131710.html">Urban</a></li>
                <li class="abstract"><a href="http://annak.over-blog.com/article-19386214.html">Abstract</a></li>
            </ul>
  </div>

En bleu, les adresses de vos liens qui apparaîtront dans le message d'annonce.

Et toujours en HTML

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