웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
마우스를 대면 이미지가 바뀐다. 롤오버 이미지
2004.12.19 19:21
안녕하세요. ^ ^
몇년전에 어디서 퍼다가 사용하고있는 소스입니다.
조금 간단하고 쉬운거라 소개해 드립니다.
<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명이 모른다면 대충 소스만 올려둘 필요가 있을까하네요.?
몇년전에 어디서 퍼다가 사용하고있는 소스입니다.
조금 간단하고 쉬운거라 소개해 드립니다.
<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
-
고냉이 콱!
2005.04.01 12:48
-
플로렐라
2004.12.20 18:09
<img src="처음이미지주소" onmouseover="this.src='바뀔이미지주소';" onmouseout="this.src='처음이미지주소';"> -
박병우
2005.02.02 15:50
저같은 초보인데는 아주 유용한 정보네요~ 감사합니다...
제목 | 글쓴이 | 날짜 |
---|---|---|
뒤죽박죽어구 찾아내기 [6] | 미친개 | 2005.02.14 |
홈페이지index경로 이외의 하위 경로 차단 하는 방법 [펌] [10] | 프란시스 | 2005.02.05 |
허접한 메일 폼 검사 하기 스크립트입니다.. [1] | Ansi™ | 2005.02.06 |
간단하면서도 강력한 웹페이지에 암호걸기 [5] | 대류 | 2005.02.03 |
더 간단한 top 버튼만들기 [3] | 나상선 | 2005.01.21 |
페이지 경로 히스토리 표시하기 [0003] | EDENe | 2005.01.19 |
그냥 확 멋있는거 그냥그냥!!!! [3] | 미친개 | 2005.01.16 |
COPY & CUT 막기 / 경고 [0002] [10] | EDENe | 2005.01.16 |
홈페이지 TOP 버튼 만들기 + 응용 [0001] [2] | EDENe | 2005.01.15 |
로딩중 스크립트와 셀렉트창 같이 쓰기 [1] | 예뜨락 | 2005.01.13 |
홈페이지 탑 TOP 버튼 만들어보기 [9] | 편입성공기 | 2004.12.06 |
링크주소 감추기 [8] | 편입성공기 | 2004.12.06 |
팝업띄우기 [2] | 편입성공기 | 2004.12.06 |
개판 오분전 빙고 [2] | 미친개 | 2004.12.30 |
마우스를 대면 이미지가 바뀐다. 롤오버 이미지 [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 |
function hidestatus()
{
window.status='+ '브라우저 하단에 나타날 문자를 넣어주세요~';
return true
}
if (document.layers)
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT | Event.MOUSEMOVE)
document.onmouseover=hidestatus
document.onmouseout=hidestatus
이 스크립트는 별개네요.. 즉, 롤오버와 상관없음으로 지워도 됩니다