euh... désolé... je suis un peu dans le speed... donc,
je te l'ai fait 
... à la va-vite et sans les gestionnaires d'événements type DOM-2 vu qu'apparemment, ça ne te sert pas à grand chose...
(ça complexifierait pas mal le script surtout)
Je l'ai mis pour l'événement load quand même, des fois que tu aies d'autres scripts à ajouter...
Au moins, ça fonctionne au clavier, c'est un moindre mal...
Par contre, mon coup de l'image, c'est pas top... peut mieux faire mais pas le temps...
sorry
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>blehover</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">//<![CDATA[
(function () {
var oO =
{
_Connect: function(oElem, sEvType, fn, bCapture)
{
return document.addEventListener ?
oElem.addEventListener(sEvType, fn, bCapture):
oElem.attachEvent ?
oElem.attachEvent('on' + sEvType, fn):
false;
},
_oId: function(sId)
{
if(document.getElementById(sId))
return document.getElementById(sId);
return;
},
_aTag: function(oEl, sTag)
{
if(oEl && sTag && oEl.getElementsByTagName(sTag) != 0)
return oEl.getElementsByTagName(sTag);
return;
},
_oCreaLink: function(oEl)
{
if(oEl)
{
var oA = document.createElement('a');
oA.setAttribute('href', '#ssmenu');
oA.setAttribute('id', 'ctrl');
oA.appendChild(oEl);
return oA;
}
return;
},
_Actif: function()
{
var oSelect = oO._oId('select'),
oUl = oO._aTag(oSelect, 'ul')[0],
oLi = oO._aTag(oSelect, 'li')[0],
oCtrl = oO._oCreaLink(oLi.firstChild);
oUl.className = 'cache';
oLi.replaceChild(oCtrl, oLi.firstChild);
oCtrl.onmouseover = oO._ChangeImg;
oCtrl.onfocus = oO._ChangeImg;
oCtrl.onmouseout = oO._InitImg;
oCtrl.onblur = oO._InitImg;
oCtrl.onclick = oO._CtrlDisplay;
return;
},
_ChangeImg: function()
{
return this.firstChild.src = 'liste-survol.png';
},
_InitImg: function()
{
return this.firstChild.src = 'liste.png';
},
_CtrlDisplay: function()
{
var oLi = this.parentNode,
oUl = oO._aTag(oLi, 'ul')[0];
oUl.className = oUl.className === 'cache' ?
'montre' :
'cache';
if(oUl.className === 'montre')
oO._aTag(oUl, 'a')[0].focus();
return false;
}
};
oO._Connect(window, 'load', oO._Actif, false);
})();
//]]></script>
<style type="text/css">/*<![CDATA[*/
@media screen, projection {
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 80%;
color: #000;
background-color: #fff;
margin: 20px;
}
#select {
font-size: 1em;
}
#select img {
height: 1.6em;
border: 0;
}
#select {
list-style-type: none;
padding: 0;
margin: 0;
}
#select ul {
list-style-type: none;
margin: -3px 0;
padding: 1px;
width: 146px;
border: 1px solid #bbb;
height: 10em;
overflow: auto;
background-color: #fff;
}
#select li {
padding: 0;
margin: 0;
}
#select a {
color: #676767;
font-size: .8em;
text-decoration: none;
display: block;
padding: 1px 1px 1px 5px;
}
/* class et id lorsque JS actif */
.cache {
display: none;
}
.montre {
display: list-item;
position: absolute;
}
a#ctrl {
text-decoration: none;
padding: 0;
width: 150px;
}
a#ctrl img {
height: 2em;
}
}
/*]]>*/</style>
</head><body>
<ul id="select">
<li><img src="liste.png" width="150" height="18" alt="menu" />
<ul>
<li><a href="#">bleh</a></li>
<li><a href="#">blah</a></li>
<li><a href="#">bloh</a></li>
<li><a href="#">bleh</a></li>
<li><a href="#">blah</a></li>
<li><a href="#">bloh</a></li>
<li><a href="#">blehnnf dkbvk bksdbkj bsdknvjk bsdvbsv lnsknd sfo jposjdfp </a></li>
<li><a href="#">blah</a></li>
<li><a href="#">bloh</a></li>
<li><a href="#">bleh</a></li>
<li><a href="#">blah</a></li>
<li><a href="#">bloh</a></li>
<li><a href="#">bleh</a></li>
<li><a href="#">blah</a></li>
<li><a href="#">bloh</a></li>
<li><a href="#">bleh</a></li>
<li><a href="#">blah</a></li>
<li><a href="#">bloh</a></li>
</ul>
</li>
</ul>
<p>bleh</p>
</body></html>
Modifié par koala64 (28 Mar 2007 - 20:53)
Bon, c'est vrai... on étoffe encore un peu plus le script mais c'est simple non ? 
)