이미지를쓴다면 변할 이미지에 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를 만드셔야 됩니다. 아니면 소스를 수정하던지요...

모두들 ㄳ합니다...^^..잘쓸게용...