Voici le code à mettre dans le html


<table border="0" bordercolor="#000000"  align="center">
<tbody>
<tr>

<td><a class="menu3" title="blabla exemple 1" href="http://chateau.over-blog.net/article-13475146.html">Exemple 1</a></td>

<td><a class="menu3" title="blabla exemple 2" href="http://chateau.over-blog.net/article-5560154.html" target="_blank">exemple 2</a></td>

<td><a class="menu3" title="blabla exemple 3" href="http://chateau.over-blog.net/article-3300915.html">exemple 3</a></td>

<td><a class="menu3" title="blabla exemple 4" href="http://chateau.over-blog.net/article-27336809.html">exemple 4</a></td>

</tr>
</tbody>
</table>



<style type="text/css">
a.menu3 { display:block; margin-top:1px; text-align:center; font:10pt; font:bold;
width:154px; border-style:ridge; border-width:5px; border-color:#0000AA; padding:0px; }

a.menu3:link { color:#2F485D; text-decoration:none; }
a.menu3:visited { color:#2F485D; text-decoration:none; }
a.menu3:hover {  color:#ffffff; background-color: red; text-decoration:none; border-color:#000000; }
a.menu3:active { color:#ffffff; background-color:#4A546F; text-decoration:none; }
</style>

<style type="text/css">
a.lien {color:#2F485D;text-decoration:none;}
a.lien:hover{color:#969696;filter:glow(color=#ffa900,strength=4);width=50%;}
</style>




===============================================================

Explication de ce "bidule"

* Les textes en couleurs entre les <td> et </td> sont les rectangles pour le menu.
J'en ai mis 4 mais on peut agrandir à l'infini... heu.. presque
 :
* Evidemment, il faut changer la prose; Par exemple :
  exemple 4, on peut mettre -->  MUSIQUE
  exemple 1, on peut mettre -->  CINEMA
etc....

* http://chateau.over-blog.net/article-13475146.html    représente l'url (adresse) de destination... Le lien en réalité

* et blabla exemple 4 c'est... l'info bulle  (le texte qui apparait quand la souris est sur le rectangle).

Nota : Après avoir collé ce code dans le html, il est possible de modifier le tableau, les proses, les infobulles, les liens avec le clic droit (sans revenir dans le html)
 
=============================================

J'ai mis en gras les couleurs.
Il faut simplement mettre le code couleur précédé d'un # ..... ou ..... la couleur primaire comme red, blue....

* color:#ffffff représente la couleur de l'écriture.
* background-color:#4A546F correspond à la couleur du fond des cellules.
*border-color:#0000AA définit la couleur de la bordure des cellules.

==> a.menu:hover  est pour définir les caractéristiques de la cellule lorsque la souris pointe dedans.

--> Vous avez remarqué que sur la ligne  a.menu3:hover  j'ai redéfini la couleur de la bordure quand la souris pointe dans la cellule : border-color:#000000;   La couleur peut évidemment être modifiée.
.. Si vous pensez que le changement de bordure surcharge la vue, vous pouvez supprimer cette instruction : border-color:#000000;

============================================

Faites des essaies.... ce script est très facile à comprendre avec un peu de patience.



Limitation
   Aucune. Ce code ne contient pas de Javascript. Il suffit de le coller dans le texte libre en haut de votre blog dans le mode html.

Retour menu Widget