Créer un menu vertical orienteur en rollover

Au survol de la souris, le fond de ce menu change.
Pour le réaliser, allez sur GRSITES




PREMIERE ETAPE :

Créez votre menu

• Dénominations et URL des liens
  
• taille, couleur et type de police
  
• fond du bouton : couleur ou texture
  

Cliquez sur Make the countinuous Texture navigation Menu


DEUXIEME ETAPE :

Cliquez sur  Download the menu and instructions

Vous obtenez un fichier .zip : un ensemble de fichiers compressés.
J'utilise WinRAR, Options Extraire Vers pour  décompresser ce fichier.

Vous obtenez une image



Que vous sauvegardez dans votre administration de blog.

Vous notez son adresse.

TROISIEME ETAPE :

Sur le site, vous copiez le code

<style type="text/css">
.b1745256 {
height: 28px;
width: 200px; 
background: url(button25469224.jpg);
background-position: 0px 0px;
}

</style>
<table cellpadding=0 cellspacing=0 border=0><tr>
<td valign=center>
<a href="http://annak.over-blog.com/categorie-10157743.html">
<div id="b17452561" class="b1745256"
style="background-position: -0px -0px; "
onmouseover = "mOv1745256(1); " onmouseout = "mOut1745256(1); "
></div>
</a>   
</td>
</tr><tr>
<td valign=center>
<a href="http://annak.over-blog.com/categorie-10150341.html">
<div id="b17452562" class="b1745256"
style="background-position: -0px -28px; "
onmouseover = "mOv1745256(2); " onmouseout = "mOut1745256(2); "
></div>
</a>   
</td>
</tr><tr>
<td valign=center>
<a href="http://annak.over-blog.com/categorie-10157775.html">
<div id="b17452563" class="b1745256"
style="background-position: -0px -56px; "
onmouseover = "mOv1745256(3); " onmouseout = "mOut1745256(3); "
></div>
</a>   
</td>
</tr><tr>
<td valign=center>
<a href="http://annak.over-blog.com/categorie-716529.html">
<div id="b17452564" class="b1745256"
style="background-position: -0px -84px; "
onmouseover = "mOv1745256(4); " onmouseout = "mOut1745256(4); "
></div>
</a>   
</td>
</tr><tr>
<td valign=center>
<a href="http://annak.over-blog.com/categorie-10170635.html">
<div id="b17452565" class="b1745256"
style="background-position: -0px -112px; "
onmouseover = "mOv1745256(5); " onmouseout = "mOut1745256(5); "
></div>
</a>   
</td>
</tr><tr>
<td valign=center>
<a href="http://annak.over-blog.com/categorie-10157837.html">
<div id="b17452566" class="b1745256"
style="background-position: -0px -140px; "
onmouseover = "mOv1745256(6); " onmouseout = "mOut1745256(6); "
></div>
</a>   
</td>
</tr><tr>
<td valign=center>
<a href="http://annak.over-blog.com/categorie-10157795.html">
<div id="b17452567" class="b1745256"
style="background-position: -0px -168px; "
onmouseover = "mOv1745256(7); " onmouseout = "mOut1745256(7); "
></div>
</a>   
</td>
</tr><tr>
</tr></table>
<script language="JavaScript" type="text/javascript">
function mOv1745256 (num) {
document.getElementById("b1745256"+num).style.backgroundPosition = "-200px -"+(num-1)*28+"px";
}
function mOut1745256 (num) {
document.getElementById("b1745256"+num).style.backgroundPosition = "-0px -"+(num-1)*28+"px";
}
</script>

et le collez en html en personnalisant l'adresse de l'image que vous avez sauvegardé à l'étape précédente.