Pour accéder plus rapidement au sommaire correspondant à cet article, cliquez sur le lien :

Publié dans : Liens, listes, menus, curseurs - Tous blogs

Créer un menu avec images coulissantes - Phatfusion - Privilège

Superbe effet pour ce menu tout en images.

Vous pouvez tester en survolant chaque image et cliquant sur dessus : un message d'alerte 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'alerte.

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>   

Voir les 9 commentaires - Ecrire un commentaire
Recommander
Retour à l'accueil

Commentaires

   Bon week end et gros bisous de la mer rouge ! !    @nne marie qui va avoir besoin de ton aide pour changer la police de mes articles: j'essaye mais cela ne le fait pas ! ! je dois être complètement hermétique ! ! ! ! ! !
Commentaire n° 1 posté par @nne marie le 07/06/2008 à 11h20
Woooooooh ! C' est super génial!.
J' avais vu ça chez quelqu' un de Blogasty, et je me demandais comment ça se faisait. Tu es un ange !!!
Pour mon autre blog ( au café du grand turc), İl y a longtemps que je voulais encadrer les modules. Je dois d' abord arranger la css dans laquelle c' est le souk. Ensuite, je le ferai mes encadrements.
Bon Week-end Annak :)
Commentaire n° 2 posté par clo le 07/06/2008 à 14h28
Moi aussi j'avais déjà vu ça sur un autre site. ça change d'un menu classique.
Je mets cet article de côté et dès que j'ai le temps, j'attaque.
Car je vois bien ça juste à côté de mon pavé pub.
Bonne journée.
Commentaire n° 3 posté par Sylvain le 08/06/2008 à 08h08
J'ai un petit problème parceque , avec ou sans le message d'alerte, quand on clic dessus pour arriver sur la nouvelle page, rien ne se passe. Et j'ai remarqué que c'est la m^me chose avec ton exemple.
Bonne journée.
Commentaire n° 4 posté par Sylvain le 09/06/2008 à 10h33
J'ai vérifié sur le site Phatfusion, l'exemple donné agit de même. J'ai essayé de retoucher le script
<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>  

Mais je n'arrive pas à le faire ouvrir la page, pourtant ça doit être possible.
Réponse de Anna K le 10/06/2008 à 11h13
Bonjour annak,
trés interresant ce que tu proposes pas en confiance, je supposes vu le script tout à fait en dernier.je te souhaite une trés bonne journée bises amitié Guilaine.
Commentaire n° 5 posté par GUILAINE le 09/06/2008 à 16h29
Ah, oui, j'ai oublié de mettre que c'est en Privilège. Merci Guilaine :)
Réponse de Anna K le 10/06/2008 à 11h18
Merci pour l'info. On verra ça plus tard.
Concernant le menu déroulant que tu avais, c'est dommage car je trouvait ça bien.
Moi aussi j'ai de gros soucis de référencement google depuis 2 mois environs alors que le menu était installé depuis beaucoup plus longtemps (faut dire que quand je l'ai installé, j'étais pas référencé du tout!).
Bonne journée.
Commentaire n° 6 posté par Sylvain le 10/06/2008 à 15h01
En mode  "confiance"  ça ne marche pas à cause du script :(
Bon dimanche Annak :)
Commentaire n° 7 posté par clo le 15/06/2008 à 10h07
Merci Clo :) je viens de corriger mon oubli
Réponse de Anna K le 16/06/2008 à 14h33
Bonjour et Merci pour ce super tuto.

PAr contre la version de Mootools est maintenant la 2, est-ce que ça marche pareil ? Parce qu'il y seulement 3 fichiers à télécharger et rien à cocher ....
Commentaire n° 8 posté par Brunito le 01/07/2008 à 14h08
Bonjour :)
Bien vu, ils ont changé de version.

Le plus simple (pour éviter les incompatibilité) mets ce lien http://ddata.over-blog.com/xxxyyy/0/37/17/67/imagemenu/js/mootools-release-1.11.js
dans la barre de ton navigateur. Il s'agit de la version précédente, celle dont je me sers.
Tu as le contenu du fichier qui apparaît à l'écran.

Toujours dans le navigateur, fais
Edition - sélectionner
puis Edition - copier

Tu ouvres ton bloc notes sur ton pc
tu fais Edition - coller
tu sauvegardes le fichier sous mootools.js
Fais attention que ce ne soit pas un fichier .txt mais bien .js
Réponse de Anna K le 01/07/2008 à 16h04
Ok MERCi thousands time pour ta rapide réponse.  Ecoute, je vais faire comme ça et je te tiens au courant.

;-)
Commentaire n° 9 posté par BruniTo le 01/07/2008 à 22h33
Ecrire un commentaire

 

Présentation

: Les ficelles d Anna K.
: 26/06/2006
annak : Aide et astuces pour créer et personnaliser un blog. Toutes les étapes pour créer un blog sur Over-Blog : les premiers pas, la gestion quotidienne (écrire des articles, placer des photos...), les modifications de CSS (changer les fonds, les couleurs de police...), des idées de design...et le personnaliser quelle que soit la plateforme : mettre en valeur les images et les textes, créer des menus, installer de la musique, des gadgets, des compteurs, des astuces de référencement...

 

Recherche Rapide Sur le Site

 

Sommaires

Sommaires Pour les Blogs OverBlog Sommaires Pour tous les Blogs Détente

 

Dernières Astuces

liste complète

 

Commentaires

 

Publicité

 

Contact - C.G.U. - Rémunération en droits d'auteur - Signaler un abus