웹마스터 팁

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

<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명이 모른다면 대충 소스만 올려둘 필요가 있을까하네요.?
제목 글쓴이 날짜
마우스를 대면 이미지가 바뀐다. 롤오버 이미지 [3] 하진 2004.12.19
홈페이지를 풀스크린으로 띄우자 - 올플래시로 보이는군요. [21] Multi_Taeji 2004.12.10
이제 미디어플레이어는 가라? 곰플레이어로 실시간으로 감상하자. [13] ⓣing★™ 2004.12.05
이미지 를 브라우져에서 내맘데로 옮겨두기 [8] piasol 2004.12.03
로딩중인 페이지에 효과넣기 [4] LUFFY 2004.11.20
자바스크립트 암호화 [5] 손상모 2004.11.18
iFlower 윈도우리스 플래시 ActiveX 컨트롤 덴디 2004.11.16
ActiveX 플래시 이미지캡쳐 컨트롤 iFlower [1] 덴디 2004.11.15
(수정)배경음악,연월일,시간, 코멘트 셋트.(AM,PM==>오전,오후 순,한국식으로 ...) [4] 민피디 2004.11.10
홈페이지 나갈때 새창띄우기 [2] piasol 2004.11.07
ActiveX 멀티파일업로더 입니다. [9] by風 2004.11.01
행복한고니님의 체크박스를 이미지로 사용하기를 보고... 체크박스옆에 텍스트 부치기 [2] beMax 2004.10.29
JavaScript 구문강조 효과내기 파우링 2004.10.28
모든 이미지, 텍스트 링크에 점선 없애기 [5] 이강민 2004.10.25
XP2인지 체크하여 XP2일때는 팝업허용하라는 메시지 뛰워주기 [3] 아돌 2004.10.19
멀티 파일다운로드 꼼수 (새창버전) [1] 행복한고니 2004.10.14
배열 스크립트 종합선물세트 행복한고니 2004.10.12
체크박스를 이미지로 사용하기 [7] 행복한고니 2004.10.10
Javascript + 플래시 칼라피커 [6] 행복한고니 2004.10.08
자바스크립트로 구현한 윈도우 스타일.. [2] 크래닉스 2004.10.07