이미지를쓴다면 변할 이미지에 id값을 주고
해당 이벤트 발생시에

document.getElementById("id값").src="변할이미지.gif";

처럼 해주면 되겠지요...

실력이 안되어 수정은 못해드리고,

http://www.blueb.co.kr/
여기가시면 그런 소스들 수두룩 한데요.

찾으시는거 찾으신다음에 디자인만 약간 변경하면 될듯해요.

귀찮으시다면.....때려치세요 ㅎㅎ 장난이고,

회원가입 후에 미리보기 되니까 쭉보시면 나중에 또 필요한거 찾으실 수 있을꺼에요~^^

거슬리셨다니 죄송합니다.
정말 농담으로 한거였는데 제가 말실수를 한거 같네요.
저주까지 퍼부으실 줄이야...
위에적은 사이트에 그런 소스들은 확실히 있고요,
도움도 안되면서 괜히 검색힌트라도 준다고 한게 실수 같네요.
진심으로 사과드립니다. ^^
꼭 해결하시길 바랄께요 ~

<div class="menu" onClick="slide('sub1');">메뉴항목 1</div>
위에 <div class="menu" onClick="slide('sub1');">이곳에  </div>

<img src="이미지.gif" width="00" height="00" border="0">

이렇게 해주시면 메뉴항목1 대신 이미지로 처리됩니다.

위에 class="menu" 전부 삭제하시구요 

나머지도 위와동일하게 해주시면됩니다.
이미지로 사용하실경우...

야매긴 하지만

<div class="menu" onClick="slide('sub1');"><img id='img_sub1' src='off.gif'>메뉴항목 1</div>

이렇게 이미지에 아이디 값을 넣으시고

해당 스크립트 내에 보면 하단쯤에 다음과 같은 부분이 있는데

for (var i=0; i < slide.objects.length; i++) {
if (slide.objects[i].id == Id) return true;
}

부분을

var cnt = 메뉴출력갯수;
for (var k=1;k <= cnt;k++)
document.getElementById("img_sub"+k).src="images/off.gif";
document.getElementById("img_"+Id).src="images/on.gif";

for (var i=0; i < slide.objects.length; i++) {
if (slide.objects[i].id == Id) return true;
}

로 수정해보세요. 고수님들이 확실한 답을 알려주실거예요..

간단하게 만들어 보았습니다.
<ul>
<li id="menu-1">메뉴 항목 1<br/>
<ul id="submenu-1">
<li>서브 항목 1-1</li>
<li>서브 항목 1-2</li>
<li>서브 항목 1-3</li>
<li>서브 항목 1-4</li>
</ul>
</li>
<li id="menu-2">메뉴 항목 2<br/>
<ul id="submenu-2">
<li>서브 항목 2-1</li>
<li>서브 항목 2-2</li>
<li>서브 항목 2-3</li>
<li>서브 항목 2-4</li>
</ul>
</li>
<li id="menu-3">메뉴 항목 3<br/>
<ul id="submenu-3">
<li>서브 항목 3-1</li>
<li>서브 항목 3-2</li>
<li>서브 항목 3-3</li>
<li>서브 항목 3-4</li>
</ul>
</li>
<li id="menu-4">메뉴 항목 4<br/>
<ul id="submenu-4">
<li>서브 항목 4-1</li>
<li>서브 항목 4-2</li>
<li>서브 항목 4-3</li>
<li>서브 항목 4-4</li>
</ul>
</li>
</ul>
<style>
#menu-1, #menu-2, #menu-3, #menu-4 {
cursor: pointer;
padding-left: 15px;
list-style:none;

}

.select {
background-image: url(star.gif);
background-repeat: no-repeat;
background-position: 0% 5%;
}
</style>
<script type="text/javascript">
for (var i = 1; i < 5; i++) {
var menu = document.getElementById('menu-'+i);
menu.onclick = function() {show(this.id)};
}
hideAll();

function hideAll()
{
for (var i = 1; i < 5; i++) {
hide('menu-'+i);
}
}

function showAll()
{
for (var i = 1; i < 5; i++) {
show('menu-'+i);
}
}

function hide(id)
{
var submenu = document.getElementById('sub'+id);
submenu.style.display = 'none';
var menu = document.getElementById(id);
menu.className = '';
}

function show(id)
{
hideAll();
var submenu = document.getElementById('sub'+id);
submenu.style.display = 'block';
var menu = document.getElementById(id);
menu.className = 'select';
}
</script>

소스를 보면 알겠지만 css, script, html모두 분리했습니다.

추가: 글의 의도를 나중에서야 파악해서 다시 올렸습니다. 그리고 이미지는 별모양으로 star.gif를 만드셔야 됩니다. 아니면 소스를 수정하던지요...