Les Ficelles d'Anna K. - Aide et astuces pour créer et personnaliser un blog
| Accueil | Publication | Flux RSS | Accès Mobile | Newsletter | Recommander | Contact |
|
|
Pour accéder plus rapidement au sommaire correspondant à cet article, cliquez sur le lien :
publié dans : Liens, listes, menus, curseurs - Tous blogs
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 :
Sur votre PC :
Dans l'administration de votre blog - Documents - Autres Fichiers - Imagemenu :
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
En bleu, les adresses de vos liens qui apparaîtront dans le message d'alerte.
Et toujours en HTML
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
- dans lequel vous créez un sous-répertoire nommé images
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
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
- dans lequel vous enregistrez le fichier :
- vous créez un sous-répertoire nommé : js
- dans lequel vous enregistrez les fichiers :
- imageMenu.js
- mootools-release-1.11.js
- dans lequel vous enregistrez les fichiers :
- 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>
<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>
<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>
window.addEvent('domready', function(){
var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:310, border:2, onOpen:function(e,i){alert(e);}});
});
</script>
Publicité
Présentation
: Les ficelles d Anna K.
: 26/06/2006
: 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...
: 26/06/2006
: 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
Déco d'Hiver
Déco de Noël
Dernières Astuces
-
Hiver - Mettre une congère
Les congères sont ces amas de neige que l'on voit en bas des toits. On va donc...
-
Créer votre signature manuscrite
Pour personnaliser vos articles, il peut être sympa de les signer "manuellement". Si vous...
-
Hiver - Neige sur le blog
Puisque la neige sur le blog est le grand thème d'actualité : voici des idées. ...
-
Convertir vos images en 3D - Make3D
Il est préférable de prendre une photo de paysage, puisqu'on va lui donner de la profondeur. ...
-
Surligner les colonnes de vos tableaux au survol de la souris - TableClothes - Privilège
Passez la souris sur les cellules a1 ...
-
Design 24 - nuit étoilé - largeur fixe - Spécial pavé de pub
Ce design est destiné aux débutants qui n'y connaissent pas grand chose ni en CSS, ni en logiciel...
-
De la musique libre de droit sur Google - Privilège
Sur Google ce widget dont le design est modifiable <script...
-
Diffuser la télévision sur votre blog - Privilège
Sur Google Choix de chaines de plusieurs pays. Ce widget a un design...
-
Encadrer la date
Vous rajoutez dans le CSS, le contenu en rouge suivant : .date { border:1px...
-
Encadrer "Resultats de vos recherches" dans la page Recherche
Dans le CSS Global, vous rajoutez .searchResultsTitle {border:2px solid...
Publicité
Coin Rencontre
Espace Connexion Internet
Achetez sur le Net!
| Articles les plus populaires | L'Univers des Ficelles |
|
|
Commentaires