웹마스터 팁

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

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