Je ne rentrerai pas dans des considérations trop techniques, mais le principe est simple: on place dans un div une miniature de l'image en fond d'une liste de liens contenant des balises em vides positionnées de façon absolue afin de quadriller le fond (l'usage des em n'est pas important, des span feraient tout aussi bien l'affaire).
Dans mon exemple, l'image est recouverte d'un quadrillage de 10x10 balises <li><a href="#nogo"><em id="IJ"></em></a></li> !!

Il suffit ensuite de définir dans le CSS un gestionnaire li a#IJ:hover em qui positionne l'image de fond en taille réélle dans l'élément survolé (un autre gestionnaire li a:hover em place et dimensionne l'élément survolé correctement).

D'après Stu Nicholls

niveaux:

Le module Catégories standard ne me satisfaisait pas. Je trouvais dommage de devoir cliquer sur le nom de la catégorie pour charger une page qui en liste les articles sur laquelle il faut recliquer pour accéder à l'article. Cela faisait au moins deux chargements de page non nécessaires.
Aussi j'ai décider de m'attaquer au problème afin d'accéder directement à l'article voulu.J'ai ensuite voulu organiser mes catégories, pouvoir les hiérarchiser, avoir des sous-catégories.
Après avoir mis en test ce module pendant plusieurs mois, je le propose maintenant à tous les over-blogueurs qui peuvent utiliser le javascript (blogs de niveau Privilège minimum).
L'outil est un peu fastidieux à mettre en place, alors armez-vous de patience!!!

Installation

1. Préparez un module texte libre afin qu'il reçoive les catégories principales. Editez le texte libre et, en mode Source,saisissez la ligne suivante répétée autant de fois qu'il y a de catégories principales:
   
   <div id="idcategorie"></div>
   où idcategorie est un identifiant arbitraire unique que vous définissez (idcategorie doit commencer par une lettre et ne contenir que des caractères alphanumériques)
   <div id="cat01"></div>
   <div id="cat02"></div>
   
2. Créez un fichier mescat.js (nous allons en définir le contenu dans les étapes suivantes) dans votre éditeur de texte préféré (le bloc-notes, bbedit ou vi feront l'affaire).
3. Pour chaque catégorie principale, ajoutez une ligne:
   
   var idcategorie = new obbCategorie("idcategorie", "Titre catégorie", "Texte de l'infobulle");
   où idcategorie est l'identifiant de catégorie défini au point 1, Titre catégorie est le texte à afficher dans le nouveau module catégorie, Texte de l'infobulle est le texte de la bulle d'information que apparaît au survol du titre de la catégorie.
4. Pour chacun des articles entrant dans la catégorie, relevez le numéro d'article et le titre. Le numéro d'article est défini dans l'url de l'article et est composé uniquement de chiffres. Un article dont l'url est http://www.francisek.com/article-738866.html aura comme numéro 738866.
   Tous ces articles seront ajoutés à leur catégorie par la ligne:
   
   idcategorie.AddTable( Array(
   "numéro-article-1|Titre-article-1",
   "numéro-article-2|Titre-article-2"
   ));
   où numéro-article-1 est le numéro du premier article et Titre-article-1 et son titre.
   
   Vous pouvez utilisez la liste des articles d'une catégorie pour faciliter cette opération.
   
5. Si vous souhaitez ajouter une sous-catégorie, ajoutez une ligne de la forme :
   
   idcategorie.AddSubCategory("Titre sous catégorie ", "Texte Infobulle ", Array(
   "numéro-article-1|Titre-article-1",
   "numéro-article-2|Titre-article-2"
   ));
   
   Pour créer une sous-catégories de sous-catégorie, vous procéderez ainsi:
   
   var souscat1 = idcategorie.AddSubCategory("Titre sous catégorie ", "Texte Infobulle ", Array(
   "numéro-article-1|Titre-article-1",
   "numéro-article-2|Titre-article-2"
   ));
   
   souscat1.AddSubCategory("Titre sous-catégorie 2", "Texte Infobulle ", Array(
   "numéro-article-sous-cat-1|Titre-article-sous-cat-1",
   "numéro-article-sous-cat-2|Titre-article-sous-cat-2"
   ));
6. Une fois toutes les catégories et leur contenu défini, pour chaque catégorie principale, ajoutez la ligne:
   
   idcategorie.run();
7. Sauvegardez le fichier mescat.js, placez le dans le répertoire Mes fichiers de votre blog.
8. Dans votre pied de page, ajoutez les lignes suivantes :
   
   <script type="text/javascript" </script>
   <script type="text/javascript" </script>

Exemple de fichier mescat.js (cet exemple suppose que le code <div id="C2525"></div><div id="C24911"></div> soit présent dans un module texte libre):

Personnalisations

Vous pouvez personnaliser votre menu Catégories par le CSS en utilsant les classes suivantes :

PRESENTATION:

INSTALLATION:

1. Téléchargez puis décompressez le fichier dermod.zip
2. Lisez ce fichier !!
3. Editez le fichier deroulemodule.js (faites le glisser sur une fenêtre du bloc-notes par exemple), et placez-vous en fin de fichier (juste avant la ligne //-->).
4. Pour chaque module à reconstruire insérez une ligne telle que celle-ci:
   derouleModule("theID", visible);
   avec
• theID = identifiant du module à reconstruire (voir la liste des identifiants de modules)
  
• visible = état d'affichage initial du contenu : true = affiché, false = masqué
  
Par exemple, pour faire dérouler le module Texte libre de gauche ajoutez la ligne:
derouleModule("LeftPart", true);
Le contenu du module sera déroulé.
5. Sauvegardez le fichier deroulemodule.js (attention, le bloc-note rajoute l'extention .txt, supprimez cette extension).
6. Envoyez deroulemodule.js sur votre blog (dans Mes fichiers).
7. Placez la ligne suivante en fin de votre pied de page :
   <script type="text/javascript"></script>
   .
   Si vous avez un problème pour insérer le script, passez voir mon article sur l'insertion de javascript, dans la partie script include.
   
8. Créez 4 images de taille 12x7 pour les boutons de déroulement.
   Ces images s'appellent :
• up.gif (image pour masquer)
• oup.gif (image pour masquer, sous la souris)
• down.gif (image pour afficher)
• odown.gif (image pour afficher, sous la souris)
9. Créez les styles suivants dans votre CSS (pour des images de 12x7):
   

   .box-up-img, .box-down-img,
   .box-up-img:hover, .box-up-img-hover,
   .box-down-img:hover, .box-down-img-hover {
       float: right;
       margin-right: 5px;
       margin-bottom: 0px;
       padding-bottom: 0px;
       padding-top: 0px;
       margin-top: -8px;
       width:12px;
       height: 15px;
       position: relative;
       z-index: 4;
       background-repeat: no-repeat;
       background-position: center left;
   }
   
   .box-up-img {
       background-image: 
   }
   
   .box-up-img:hover, .box-up-img-hover {
       background-image: 
   }
       
   .box-down-img {
       background-image: 
   }
       
   .box-down-img:hover, .box-down-img-hover {
       background-image: 
   }

   
   Dans le style .box-content modifiez le padding top afin de le mettre à 0:
   soit en mettant 0px comme 1er valeur de padding: 0px 0px 15px 5px;
   soit en ajoutant l'attribut padding-top: 0px; Cette manipulation permet de réduire l'espace entre le titre et le contenu du module.
   
   Attention, les valeurs proposées dans ces styles sont valides uniquement si vous utilisez des images de taille 12x7, si optez pur une autre taille d'image, vos modules peuvent être dénaturés.