웹마스터 팁

안녕하세요. ^ ^
몇년전에 어디서 퍼다가 사용하고있는 소스입니다.
조금 간단하고 쉬운거라 소개해 드립니다.

<SCRIPT language="JavaScript">
<!--

function over(kks2){
on = eval(kks2 + "s.src");
document[kks2].src = on;
}
function out(kks1){
off = eval(kks1 +"n.src");
document[kks1].src = off;
}

bar1s = new Image();
bar1s.src = "이미지경로";
bar1n = new Image();
bar1n.src = "이미지경로";

bar2s = new Image();
bar2s.src = "이미지경로";
bar2n = new Image();
bar2n.src = "이미지경로";

bar3s = new Image();
bar3s.src = "이미지경로";
bar3n = new Image();
bar3n.src = "이미지경로";

bar4s = new Image();
bar4s.src = "이미지경로";
bar4n = new Image();
bar4n.src = "이미지경로";

bar5s = new Image();
bar5s.src = "이미지경로";
bar5n = new Image();
bar5n.src = "이미지경로";

function hidestatus()
{
window.status='브라우저 하단에 나타날 문자를 넣어주세요~';
return true
}

if (document.layers)
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT | Event.MOUSEMOVE)
document.onmouseover=hidestatus
document.onmouseout=hidestatus

//-->
</SCRIPT>


<A HREF="경로" onmouseover="over('bar1')" onmouseout="out('bar1')"><IMG SRC="이미지경로" WIDTH="90" HEIGHT="36" BORDER="0" name=bar1>

<A HREF="경로" onmouseover="over('+ 'bar2')" onmouseout="out('bar2')"><IMG SRC="이미지경로" WIDTH="90" HEIGHT="36" BORDER="0" name=bar2>

<A HREF="경로" onmouseover="over('bar3')" onmouseout="out('bar3')"><IMG SRC="이미지경로" WIDTH="90" HEIGHT="36" BORDER="0" name=bar3>

<A HREF="경로" onmouseover="over('bar4')" onmouseout="out('bar4')"><IMG SRC="이미지경로" WIDTH="90" HEIGHT="36" BORDER="0" name=bar4>

<A HREF="경로" onmouseover="over('bar5')" onmouseout="out('bar5')"><IMG SRC="이미지경로" WIDTH="90" HEIGHT="36" BORDER="0" name=bar5>








위에 보시면은 bar1s / bar1n 이라는것처럼
순서대로 지정이 되어 있네요

n = 초기에 노출될 이미지
s = 마우스를 갖다대면 변경될 이미지



더 많은 이미지를 추가하시려면
bar5s = new Image();
bar5s.src = "이미지경로";
bar5n = new Image();
bar5n.src = "이미지경로";

밑으로
bar6s = new Image();
bar6s.src = "이미지경로";
bar6n = new Image();
bar6n.src = "이미지경로";   이런식으로 숫자만 바꿔주면서 추가하신후에..


<A HREF="경로" onmouseover="over('bar6')" onmouseout="out('bar6')"><IMG SRC="이미지경로" WIDTH="90" HEIGHT="36" BORDER="0" name=bar6>

위의 경로메뉴 부분도 추가하시면 됩니당~





JS 파일로 만들어 사용하실경우
<SCRIPT language="JavaScript"> / </SCRIPT> 를 삭제하시고

<!-- 이 부분 부터
//--> 여기 까지 복사하신후에 문서에 붙여넣기 하시고
확장자만 JS 파일로 만들어 넣으세요. (물론 아시겠지만 항상 설명은 모르시는분들을 위해서..)


위에 소스를 총 정리 하자면 아래와 같습니다.
-----------------------------------------------------------------------------------------

<SCRIPT language="JavaScript">
<!--

function over(kks2){
on = eval(kks2 + "s.src");
document[kks2].src = on;
}
function out(kks1){
off = eval(kks1 +"n.src");
document[kks1].src = off;
}

bar1s = new Image();
bar1s.src = "./images/a2.gif";
bar1n = new Image();
bar1n.src = "./images/a1.gif";

bar2s = new Image();
bar2s.src = "./images/b2.gif";
bar2n = new Image();
bar2n.src = "./images/b1.gif";

bar3s = new Image();
bar3s.src = "./images/c2.gif";
bar3n = new Image();
bar3n.src = "./images/c1.gif";

bar4s = new Image();
bar4s.src = "./images/d2.gif";
bar4n = new Image();
bar4n.src = "./images/d1.gif";

bar5s = new Image();
bar5s.src = "./images/e2.gif";
bar5n = new Image();
bar5n.src = "./images/e1.gif";

function hidestatus()
{
window.status='브라우저 하단에 나타날 문자를 넣어주세요~';
return true
}

if (document.layers)
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT | Event.MOUSEMOVE)
document.onmouseover=hidestatus
document.onmouseout=hidestatus

//-->
</SCRIPT>


<A HREF="경로" onmouseover="over('bar1')" onmouseout="out('bar1')"><IMG SRC="./images/a1.gif" WIDTH="90" HEIGHT="36" BORDER="0" name=bar1>

<A HREF="경로" onmouseover="over('bar2')" onmouseout="out('bar2')"><IMG SRC="./images/b1.gif" WIDTH="90" HEIGHT="36" BORDER="0" name=bar2>

<A HREF="경로" onmouseover="over('bar3')" onmouseout="out('bar3')"><IMG SRC="./images/c1.gif" WIDTH="90" HEIGHT="36" BORDER="0" name=bar3>

<A HREF="경로" onmouseover="over('bar4')" onmouseout="out('bar4')"><IMG SRC="./images/d1.gif" WIDTH="90" HEIGHT="36" BORDER="0" name=bar4>

<A HREF="경로" onmouseover="over('bar5')" onmouseout="out('bar5')"><IMG SRC="./images/e1.gif" WIDTH="90" HEIGHT="36" BORDER="0" name=bar5>


(주의)
이미지 사이즈는 꼭 적어주셔야되욤~


별로 어려운건 아닌데 설명이 길었습니다.
항상 전혀 모를수있는 사람 한명을위해 자세히 설명하는게 습관이 되었네요.
조회수 천명이라도 사용하고싶은 1명이 모른다면 대충 소스만 올려둘 필요가 있을까하네요.?