Conflit OnMouseOut et OnClick par m.patate - page 1

Bonjour à tous.
Je sais que le sujet a déjà été traité mais mon problème est un peu différent et je n'arrive pas à m'en sortir.
J'ai récupéré un code ici et me le suis adapté mais pourtant un problème subsiste et mes compétences en javascript sont dépassées à ce stade!

Mon problème : j'ai un menu avec 7 rubriques (7 images) avec un onmouseover, un onmouseout et un onClick sur chq image avec un changement d'image classique sur les onmouseover/out et l'ouverture de sous-rubriques avec le onclick.
Je souhaiterai que l'image apparue sur le onmouseover reste lorsqu'il y a eu un click!
Il y a donc un conflit entre le onmouseOut et le Onclick, cependant, je ne pense aps pouvoir utiliser une variable car, au total, j'ai plus de 30 images (correspondant dc à des rubriques ou sous-rubriques)!!!

Le site est visible ici : www.deroutes.fr/test/index.php

Je vous mets le code, cela me semble le mieux.

Merci de votre aide

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Le site du groupe Déroutés</title>

<style type="text/css">
body {margin:0 ;
padding:0;
font:Arial,Sans-serif;
scrollbar-arrow-color:#FFFFFF;
scrollbar-face-color:#010101;
scrollbar-highlight-color:#848484;
scrollbar-3dlight-color:#686767;
scrollbar-shadow-color:#4D4C4C;
scrollbar-darkshadow-color:#3E3E3E;
scrollbar-track-color:#202020;} /* marges intérieures et extérieures de la page à 0 */

.menu-general { /* défini les boites qui comprenent chaque menu de base */
float:left ; /* Les boite sont calées à gauche */
height: 40px ;
width:100px ; /* largeur des boites du menu de base */
padding:0 ; /* marges intérieures à 0 */
margin: 0 ; /* marges extérieures à 0 */

}
#menu-general1,#menu-general2 ,#menu-general3,#menu-general4 {
}

#sous-menu1, #sous-menu2, #sous-menu3, #sous-menu4 { /*défini les 4 boites des 4 sous-menues */
clear:left;
display: none; /* les sous-menus ne sont pas affichés */
margin: 0; /* marges extérieures à 0 */
padding : 0; /* marges intérieures à 0 */
/*position : absolute ; boite positionnée par rapport à la boite parent, ici l'écran */
top : 100px; /* Début (par rapport au haut de page) des sous-menus */
left : 0px; /* Début (par rapport à la gauche de la page) des sous-menus */
width : 100% ;/* largeur des sous-menus par rapport à la boite parent (ici la page)*/

}
.submit{
border:none;
color:#fff;
background: transparent no-repeat top left;
width:75px;
height:20px;
cursor:hand;
}

.lienmenu{

text-decoration:none;
font-weight: bold;
font-size: 14px;
width:100%;
height:100%
cursor:hand;
}
.lienplan{

text-decoration:none;
font-weight: bold;
font-size: 14px;
width:100%;
height:100%
cursor:hand;
}

.liensousmenu{
text-decoration:none;
font-weight: bold;
font-size: 12px;
}
.liensousmenu:link {color:black;}
.liensousmenu:visited {color:black;}
.liensousmenu:hover {color:black;}
.liensousmenu:active {color:black;}
.couleurlien {
text-decoration: none;
color: white;
cursor: hand
}
a:hover
{
color:#929191;
text-decoration:none
}
A:hover { text-decoration : underline; }
</style>
<STYLE type="text/css">
BODY {background-color:#000000}
BODY {background: url(fond.gif) no-repeat top center ;}

</STYLE>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="effects.js"></script>
<script type="text/javascript">
function effacer(value_defaut,id)
{
truk=document.getElementById(id);
type=truk.tagName;
type=type.toLowerCase();
if (type=='input')
{
if (truk.value==value_defaut)
truk.value='';
}
else if (type=='textarea')
{
if (truk.innerHTML==value_defaut)
truk.innerHTML='';
}
}

</script>
<script type="text/javascript" src="menu.js"></script> 
</head>

<body bgcolor="#000000" background="fond.gif"
onLoad="
montre('sous-menu1');cache('sous-menu2'); cache('sous-menu3'); cache('sous-menu4');
color('menu-general1','black','1px solid black'); color('menu-general2','black','1px black'); color('menu-general3','black','1px black'); color('menu-general4','black','1px black');
colorlien('lienmenu1','black');colorlien('lienmenu2','black');colorlien('lienmenu3','black');colorlien('lienmenu4','black');

">
<table width="730" height="800" border="0" align="center">
<tr>
<td width="720" height="171" valign="bottom" background="bandeau.gif" 'no-repeat'>
<div align="right">
<object data="dewplayer-multi.swf?son=fin.mp3|jake.mp3|rosanna.mp3&autoplay=1" type="application/x-shockwave-flash" width="240" height="20" align="absbottom" bgcolor="#000000">
<param name="movie" value="dewplayer-multi.swf?son=fin.mp3|jake.mp3|rosanna.mp3&autoplay=1"/>
<param name="bgcolor" value="#000000">
</object>
</div></td>
</tr>
<tr valign="top">
<td height="75"> <div style="width:710px; position:top, right; top:10px; left:10px; background-color:black; border:0px ">
<div style=" width:100%">
<div id="menu-general1"
class="menu-general"
onClick="montre('sous-menu1');cache('sous-menu2'); cache('sous-menu3');cache('sous-menu4');
color('menu-general1','black','1px black'); color('menu-general2','black','1px black'); color('menu-general3','black','1px black');
colorlien('lienmenu1','black');colorlien('lienmenu2','black');colorlien('lienmenu3','black'); "
align="center"
style="border-top:1px black; border-left:1px black; margin-left:5px; "><a href="dates.php" id="lienmenu1" class="lienmenu" target="1"><font color="#FFFFFF"><img src="dates1.gif" border="0" onMouseOver="this.src='dates2.gif'" onMouseOut="this.src='dates1.gif'"></font></a></div>
<div id="menu-general2" class="menu-general"
onClick="montre('sous-menu2');cache('sous-menu1');cache('sous-menu3');cache('sous-menu4');
color('menu-general2','black','1px black'); color('menu-general1','black','1px black'); color('menu-general3','black','1px black');
colorlien('lienmenu2','black');colorlien('lienmenu1','black');colorlien('lienmenu3','black');"
align="center"
style="border-top:1px black; " ><a href="groupe.htm" id="lienmenu2" class="lienmenu" target="1"><font color="#FFFFFF"><img src="groupe1.gif" border="0" onMouseOver="this.src='groupe2.gif'" onMouseOut="this.src='groupe1.gif'"></font></a></div>
<div id="menu-general2; demo-all" class="menu-general"
onClick="montre('sous-menu3','groupe2.gif');cache('sous-menu1');cache('sous-menu2');cache('sous-menu4');
color('menu-general2','black','1px black'); color('menu-general1','black','1px black'); color('menu-general3','black','1px black');
colorlien('lienmenu2','black');colorlien('lienmenu1','black');colorlien('lienmenu3','black');"
align="center"
style="border-top:1px black; " ><a href="matos.htm" id="lienmenu2" class="lienmenu" target="1"><font color="#FFFFFF"><img src="matos1.gif" border="0" onMouseOver="this.src='matos2.gif'" onMouseOut="this.src='matos1.gif'"></font></a></div>
<div id="menu-general2" class="menu-general"
onClick="montre('sous-menu4');cache('sous-menu1');cache('sous-menu2');cache('sous-menu3');
color('menu-general2','black','1px black'); color('menu-general1','black','1px black'); color('menu-general3','black','1px black');
colorlien('lienmenu2','black');colorlien('lienmenu1','black');colorlien('lienmenu3','black');"
align="center"
style="border-top:1px black; " ><a href="medias.htm" id="lienmenu2" class="lienmenu" target="1"><font color="#FFFFFF"><img src="medias1.gif" border="0" onMouseOver="this.src='medias2.gif'" onMouseOut="this.src='medias1.gif'"></font></a></div>
<div id="menu-general2" class="menu-general"
onClick="montre('sous-menu1');cache('sous-menu2'); cache('sous-menu3');cache('sous-menu4');
color('menu-general2','black','1px black'); color('menu-general1','black','1px black'); color('menu-general3','black','1px black');
colorlien('lienmenu2','black');colorlien('lienmenu1','black');colorlien('lienmenu3','black');"
align="center"
style="border-top:1px black; " ><a href="book_index.php" id="lienmenu2" class="lienmenu" target="1"><font color="#FFFFFF"><img src="livre1.gif" border="0" onMouseOver="this.src='livre2.gif'" onMouseOut="this.src='livre1.gif'"></font></a></div>
<div id="menu-general2" class="menu-general"
onClick="montre('sous-menu1');cache('sous-menu2'); cache('sous-menu3');cache('sous-menu4');
color('menu-general2','black','1px black'); color('menu-general1','black','1px black'); color('menu-general3','black','1px black');
colorlien('lienmenu2','black');colorlien('lienmenu1','black');colorlien('lienmenu3','black');"
align="center"
style="border-top:1px black; " ><a href="liens.htm" id="lienmenu2" class="lienmenu" target="1"><font color="#FFFFFF"><img src="liens1.gif" border="0" onMouseOver="this.src='liens2.gif'" onMouseOut="this.src='liens1.gif'"></font></a></div>
<div id="menu-general3" class="menu-general"
onClick="montre('sous-menu1');cache('sous-menu2'); cache('sous-menu3');cache('sous-menu4');
color('menu-general3','black','1px black'); color('menu-general1','black','2px black'); color('menu-general2','black','1px black');
colorlien('lienmenu3','black');colorlien('lienmenu1','black');colorlien('lienmenu2','black'); "
align="center"
style="border-top:0px ; border-right:0px ;" ><a href="contact.htm" class="lienmenu" target="1"><img src="contact1.gif" border="0" onMouseOver="this.src='contact2.gif'" onMouseOut="this.src='contact1.gif'"></a></div>
</div>
<div id="sous-menu1" onMouseOver="montre('sous-menu1');cache('sous-menu2'); cache('sous-menu3');" style="background-color:black; " >
<table width="100%" height="30" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td align="center">• <a href="#" class="liensousmenu"></a></td>
<td align="center">• <a href="#" class="liensousmenu"></a></td>
<td align="center">• <a href="#" class="liensousmenu"></a></td>
<td align="center">• <a href="#" class="liensousmenu"></a></td>
</tr>
</table>
</div>
<div id="sous-menu2" onMouseOver="montre('sous-menu2');cache('sous-menu1');cache('sous-menu3');" style="background-color:black; " >
<table width="100%" height="30" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><img src="noir.gif" width="25"border="0"></td>
<td align="center"><img src="noir.gif" width="25"border="0"></td>
<td align="center"><a href="paul.htm" class="liensousmenu"target="1"><img src="paul2.gif" border="0" onMouseOver="this.src='paul1.gif'" onMouseOut="this.src='paul2.gif'"></a></td>
<td align="center"><a href="laurence.htm" class="liensousmenu"target="1"><img src="laurence2.gif" border="0"onMouseOver="this.src='laurence1.gif'" onMouseOut="this.src='laurence2.gif'" onClick="this.src='laurence1.gif'"></a></td>
<td align="center"><a href="sylvain.htm" class="liensousmenu"target="1"><img src="sylvain2.gif" border="0"onMouseOver="this.src='sylvain1.gif'" onMouseOut="this.src='sylvain2.gif'"></a></td>
<td align="center"><a href="benoit.htm" class="liensousmenu"target="1"><img src="benoit2.gif" border="0"onMouseOver="this.src='benoit1.gif'" onMouseOut="this.src='benoit2.gif'"></a></td>
<td align="center"><a href="cyprien.htm" class="liensousmenu" target="1"><img src="cyprien2.gif" border="0"onMouseOver="this.src='cyprien1.gif'" onMouseOut="this.src='cyprien2.gif'"></a></td>
<td align="center"><a href="tanguy.htm" class="liensousmenu"target="1"><img src="tanguy2.gif" border="0"onMouseOver="this.src='tanguy1.gif'" onMouseOut="this.src='tanguy2.gif'"></a></td>
<td align="center"><a href="xavier.htm" class="liensousmenu"target="1"><img src="xavier2.gif" border="0"onMouseOver="this.src='xavier1.gif'" onMouseOut="this.src='xavier2.gif'"></a></td>
<td align="center"><img src="noir.gif" width="25"border="0"></td>
<td align="center"><a href="juju.htm" class="liensousmenu"target="1"><img src="juju2.gif" border="0"onMouseOver="this.src='juju1.gif'" onMouseOut="this.src='juju2.gif'"></a></td>
<td align="center"><a href="sebastien.htm" class="liensousmenu"target="1"><img src="sebastien2.gif" border="0"onMouseOver="this.src='sebastien1.gif'" onMouseOut="this.src='sebastien2.gif'"></a></td>
<td align="center"><img src="noir.gif" width="25"border="0"></td>
<td align="center"><img src="noir.gif" width="25"border="0"></td>
</tr>
</table>
</div>
<div id="sous-menu3" onMouseOver="montre('sous-menu3');cache('sous-menu1');cache('sous-menu2');" style="background-color:black; " >
<table width="100%" height="30" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><img src="noir.gif" border="0"></td>
<td align="center"><img src="noir.gif" width="67" height="8"border="0"></td>
<td align="center"><a href="instruments.htm" class="liensousmenu"target="1"><img src="instruments2.gif" border="0" onMouseOver="this.src='instruments1.gif'" onMouseOut="this.src='instruments2.gif'"></a></td>
<td align="center"><a href="studio.htm" class="liensousmenu"target="1"><img src="studio2.gif" border="0" onMouseOver="this.src='studio1.gif'" onMouseOut="this.src='studio2.gif'"></a></td>
<td align="center"><a href="fiche.htm" class="liensousmenu"target="1"><img src="fiche2.gif" border="0" onMouseOver="this.src='fiche1.gif'" onMouseOut="this.src='fiche2.gif'"></a></td>
<td align="center"><img src="noir.gif" width="263" height="12" border="0"></td>
<td align="center"><img src="noir.gif" border="0"></td>
</tr>
</table>
</div>
<div id="sous-menu4" onMouseOver="montre('sous-menu4');cache('sous-menu1');cache('sous-menu2');cache('sous-menu3');" style="background-color:black; " >
<table width="100%" height="30" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><img src="noir.gif" width="92" height="8"border="0"></td>
<td align="center"><a href="photos.htm" class="liensousmenu"target="1"><img src="photos2.gif" border="0" onMouseOver="this.src='photos1.gif'" onMouseOut="this.src='photos2.gif'"></a></td>
<td align="center"><a href="myspace.htm" class="liensousmenu"target="1"><img src="myspace2.gif" border="0" onMouseOver="this.src='myspace1.gif'" onMouseOut="this.src='myspace2.gif'"></a></td>
<td align="center"><a href="videos.htm" class="liensousmenu"target="1"><img src="videos2.gif" border="0" onMouseOver="this.src='videos1.gif'" onMouseOut="this.src='videos2.gif'"></a></td>
<td align="center"><a href="pressbook.htm" class="liensousmenu"target="1"><img src="packpromo2.gif" border="0" onMouseOver="this.src='packpromo1.gif'" onMouseOut="this.src='packpromo2.gif'"></a></td>
<td align="center"><a href="paroles.htm" class="liensousmenu"target="1"><img src="paroles2.gif" border="0" onMouseOver="this.src='paroles1.gif'" onMouseOut="this.src='paroles2.gif'"></a></td>
<td align="center"><img src="noir.gif" width="87" height="10"border="0"></td>
</tr>
</table>
</div>
</div></td>
</tr>
<tr>
<td height="500" valign="top">
<div align="left">
<table width="600" border="0" align="center">
<tr>
<td height="15" valign="top"><form method="post" action="add_mail.php">
<div align="right">
<table width="301" border="0" align="right" cellpadding="0" cellspacing="0">
<tr>
<td width="272" valign="baseline">
<div align="right"><font color="#FFFFFF" size="1" face="Verdana, Arial, Helvetica, sans-serif">Newsletter</font>
<input style="width:100px; height:20px" name="mail" type="text" id="mail3" value="Votre mail" onclick="effacer('Votre mail',this.id);" >
</div></td>
<td width="4"><div align="right"></div></td>
<td width="25"><div align="right">
<input style="width:20px; height:20px"type="submit" name="Submit" class="submit" value="OK">
</div></td>
</tr>
<tr> </tr>
</table>
</div>
</FORM></td>
</tr>
<tr>
<td width="570" height="791" valign="top"> <div align="justify">
<iframe src="accueil.php" name="1" id="1" frameborder="0" height="770" scrolling="auto" width="620"></iframe>
</div></td>
</tr>
</table>
</div></td>
</tr>
<tr>
<td height="30" valign="top">
<div align="center" ><font color="#FFFFFF" size="1" face="Verdana, Arial, Helvetica, sans-serif">©</font>
<font color="#FFFFFF" size="1" face="Verdana, Arial, Helvetica, sans-serif">2009
Déroutés - <a href="plan.htm" class="couleurlien" target="1" >Plan
du site </a>- <a class="couleurlien"href="mentions.htm" target="1">Mentions
légales</a></font></div></td>
</tr>
</table>

</body>
</html>

m.patate

3 mars 2009 à 10:57:24