Affichage image

comme ca :
voici mon menu dans le HTML:

</div>
<div id="menu">
<ul class="menu1">
<li class="menu11"><a href="https://www.free.fr/freebox/index.html"><p>page1</p></a></li>
<li class="menu12"><a href="https://www.free.fr/freebox/index.html">page2</a></li>
<li class="menu13"><a href="https://www.free.fr/freebox/index.html">page3</a></li>
</ul>
</div>

Mon CSS (pour le 2eme bouton par exemple):

.menu12 a{
display: table-cell;
text-align:right;
color: #ff7f00;
background-image:url(bouton3.png);
background-repeat:no-repeat;
background-position:left;
margin-right:0px;
font-size:14px;
font-weight:bold;
padding:5px 17px 5px 40px;
text-align: center;
width: 100px;
font-family:Arial, Helvetica, sans-serif;
text-decoration : none;
position:absolute;
top:298px;
left:380px;
z-index:2;
}
.menu12 a:hover{
display: bloc;
color: #ffffff;
background-image:url(bouton4.png);
background-repeat:no-repeat;
background-position:left;
margin-right:0px;
font-size:14px;
font-weight:bold;
padding:5px 17px 5px 40px;
text-align: center;
width: 100px;
font-family:Arial, Helvetica, sans-serif;
text-decoration : none;
position:absolute;
z-index:2;
}

par contre l'image est appélée dans le css et il y a un hover sur le bouton dans le css pour "l'animation" du bouton ca change rien ?

il faut faire du javascript ?

Le plus simple sur l'image du menu (ou le bloc de menu) rajouter :

onmouseover="javascript:affiche_logo()" onmouseout="cache_logo()"

dans la page quelque part

<div id="logo" style="position:absolute;top:0px;left:0px;z-index:10000;"><img src="monimage.jpg"></div>

Puis le script

<script language="javascript">
function affiche_logo() {
document.getElementById("logo").style.visibility="visible";
}

function cache_logo() {
document.getElementById("logo").style.visibility="hidden";
}
</script>

et c'est tout