miniwini.com
집크기 30 pixel 줄이기 집크기 원래대로 집크기 30 pixel 늘리기
포토갤러리
데스크탑갤러리
버그 때려잡자



자유게시판
질문&답변
알짜게시판
로그인
멤버가입
Alzza
알짜게시판입니다. :D
도움이 될 만한 정보는 자신있게 포스팅! :)
ALL
HOT
ssm96...
노가다를 박멸;;한 이미지 롤오버 over - out 스크립트 3694 views , 20 Comments
mini-i.com [+]
(ssm96) iiwork
LEV2 EXP3055 ssm96's stats

그냥; 간단합니다. 별거 없습니다 -_-;

 

스크립트를 넣어주시고

 

이미지 태그 뒤에 onmouseover="img_change(this,'on')" onmouseout="img_change(this,'off')"

 

이부분만 추가해주시면 됩니다.

 

그리고 이미지 네이밍을 " menu숫자_on또는off " 형식으로 해주시면 됩니다.

 

menu1_2_on 이런식으로 하위메뉴 네이밍도 가능합니다 :) 확장자는 상관없습니다.
preview viewsource copy
<script> function img_change(obj,mode) { var reg = /(menu.+)_(on|off)/; var find = obj.src.match(reg)[0]; var name = obj.src.match(reg)[1]; obj.src = obj.src.replace(find,name+'_'+mode); } // END function </script> <img src=http://mini-i.com/data/menu1_off.gif onmouseover="img_change(this,'on')" onmouseout="img_change(this,'off')">
Posted at 2004/4/19, 5:50 am
트랙백 링크
이 글의 트랙백 주소
http://miniwini.com/trackback.php?bid=share&id=2653 COPY URL

라지엘 (laziel) 2004-04-19, 05:54 AM

오; 귀차니즘은 기술을 발전시킨다 ' ㅅ')b
(Aquatype) 2004-04-19, 10:33 AM

별도의 스크립트 없이 onmouseover / onmouseout = "this.src='이미지주소'" 로 해버리는 방법도 있습니다.

(태클 아닙니다;;)

(netty77) 2004-04-19, 11:37 AM

이미지들의 프리로딩도 있었으면 좋겠네요..

어쨌거나 클립당하셨습니당.
(hsh852) 2004-04-19, 01:22 PM

<img src="OFF.gif" img onmouseover="this.src='ON.gif'" onmouseout="this.src='OFF.gif'">

 

샘플;
[GQ`inside™:忍] (gq1978) 2004-04-19, 04:30 PM

진정한 귀차니스트를 구해주셨군요 ㅋㅋ

클립 꾸욱~ 당하셨습니다 ^^

(nephu) 2004-04-19, 07:11 PM

노가다 박멸 그리고 귀차니스트의 회생 이군요 +ㅁ+ 오늘의 클립... 선정되셨습니다~
(rsen) 2004-04-20, 03:13 AM
- _ -;;; 어디서 많이 본 도메인이 찍혀있다 싶었더니... 미니님...
(Aquatype) 2004-04-20, 12:39 PM

지금 좀 살펴봤는데.. 어차피 롤오버될 이미지에 이벤트가 걸리니까, 굳이 함수에서 오브젝트 지정을 해주지 않아도 될 것 같네요.

 

 

<script>
function img_change(mode)
{
 var reg = /(menu.+)_(on|off)/;
 var find = event.srcElement.src.match(reg)[0];
 var name = event.srcElement.src.match(reg)[1];
  
 event.srcElement.src = event.srcElement.src.replace(find,name+'_'+mode);
} // END function
</script>
<img src=http://mini-i.com/data/menu1_off.gif onmouseover="img_change('on')" onmouseout="img_change('off')">

 

이렇게 쓰면 조금이라도 더 노가다를 줄일 수 있을 것 같습니다.

(태클 아닙니다!;;)
(hsh852) 2004-04-20, 02:12 PM

저.. 죄송합니다만, 제가 잘 몰라서 그런것이니 이해해주시기 바랍니다. ^^;

 

<img src="OFF.gif" img onmouseover="this.src='ON.gif'" onmouseout="this.src='OFF.gif'">

 

이것과 차이점이 혹시 있는지 궁금합니다. 다르면 어떻게 다른지 가르쳐주세요..;
(Cksoft) 2004-04-20, 02:31 PM

+'_'+ 이표정... 너무 귀엽내요^^;

 

앗... 게시물과 다른 이상한 댓글;;;

(dofu) 2004-04-20, 05:26 PM
프리로딩은 0*0짜리 이미지를 페이지에 숨겨두는 것으로-_-하면 되지 않을까용;;
미뉘 (ssm96) 2004-04-20, 09:48 PM

노가다의 차이가 있습니다;

노가다만 아니라면야 어떻게 하든 그 무슨 상관이 있겠습니다 ^^;

메뉴가 한두개가 아니라고 가정해본다면

후니님의 그것은 img 태그마다 이미지 이름을 바꿔가며 써야할것입니다만;

이것은 이것 그대로 그냥 copy & paste 만 하면 되는것입니다;;

 

흐음.. 충분한 설명이 되었는지;;
미뉘 (ssm96) 2004-04-20, 10:13 PM

그 이벤트로 크로스 브라우징이 가능한가요?; (태글 아닙니다!;;)

우리가 가야할 마지막 길은 onmouseover , onmouseout 조차도 쓰지 않고 롤오버를 구현하는 것 -_-불끈!

귀차니즘이여 영원하라;;;
(swellfish) 2004-04-20, 10:30 PM

음... 그 '이미지주소'조차 적기 싫다는 귀차니즘에서 나온게 아닐까요 - _-;
(Aquatype) 2004-04-20, 10:48 PM

이미지 이름을 바꿔가면서 쓸 필요는 없습니다. 오브젝트를 this로 지정해주니까요;
(Aquatype) 2004-04-20, 10:53 PM
아무래도 익스 전용인 것 같군요. 흐음;;
미뉘 (ssm96) 2004-04-20, 11:10 PM

<img src="OFF1.gif" onmouseover="this.src='ON1.gif'" onmouseout="this.src='OFF1.gif'">

<img src="OFF2.gif" onmouseover="this.src='ON2.gif'" onmouseout="this.src='OFF2.gif'">

<img src="OFF2.gif" onmouseover="this.src='ON3.gif'" onmouseout="this.src='OFF3.gif'">

 

1,2,3 으로 바뀌는 부분이 세부분씩 9부분이 있습니다

 

<img src="OFF1.gif"  onmouseover="img_change(this,'on')" onmouseout="img_change(this,'off')">

<img src="OFF2.gif"  onmouseover="img_change(this,'on')" onmouseout="img_change(this,'off')">

<img src="OFF3.gif"  onmouseover="img_change(this,'on')" onmouseout="img_change(this,'off')">

 

1,2,3 으로 바뀌는 부분이 세부분 있습니다.

 

뭐 이 차이입니다 -_-; 그냥 처음부터 이렇게 설명할 것을;
(k10206) 2004-04-21, 07:51 AM

이미지 태그마다 마우스 이벤트 안쓰는게 바로 이건데요...

 

<script>
img1_out = new Image();
img1_out.src = "http://myhome.hanafos.com/~hsh852/img/h_1.gif";
img1_over = new Image();
img1_over.src = "http://myhome.hanafos.com/~hsh852/img/h_2.gif";
img1_down = new Image();
img1_down.src = "http://myhome.hanafos.com/~hsh852/img/h_3.gif";

img2_out = new Image();
img2_out.src = "http://myhome.hanafos.com/~hsh852/img/h_1.gif";
img2_over = new Image();
img2_over.src = "http://myhome.hanafos.com/~hsh852/img/h_2.gif";
img2_down = new Image();
img2_down.src = "http://myhome.hanafos.com/~hsh852/img/h_3.gif";

function getItem(el) {
temp = el;
while (temp!=null) {
if (temp.className=="roll")
el = temp;
temp = temp.parentElement;
}
return el;
}

function menuDown() {
var el=getItem(event.srcElement);
if (el.className == "roll") {
el.src=eval(el.name + "_down.src")
}
}

function menuUp() {
var el=getItem(event.srcElement);
if (el.className == "roll") {
el.src=eval(el.name + "_over.src")
}
}

function menuOver() {
var el=getItem(event.srcElement);
if (el.className == "roll") {
el.src=eval(el.name + "_over.src")
}
}

function menuOut() {
var el=getItem(event.srcElement);
if (el.className == "roll"){
el.src=eval(el.name + "_out.src")
}
}

</script>
<body onmouseover="menuOver()" onmouseout="menuOut()" onmousedown="menuDown()" onmouseup="menuUp()" ondragstart="return false">
1번이미지<br><img class=roll src="http://myhome.hanafos.com/~hsh852/img/h_1.gif" border="0" name=img1><br>
2번이미지<br><img class=roll src="http://myhome.hanafos.com/~hsh852/img/h_1.gif" border="0" name=img2><br>
class 없는 이미지<br><img src="http://myhome.hanafos.com/~hsh852/img/h_1.gif" border="0" name=img1>
바나나 (sikzagong) 2004-04-21, 04:30 PM

CSS의 백그라운드 프로퍼티를 이용하면 자바스크립트를 쓰지 않고 롤오버효과를 낼 수 있습니다.

아주 유명한 픽시의 테크닉인데요. 일반상태일때, hover상태일때 active상태일때를 한개의 이미지로 만든뒤

pseudo class를 이용해서 백그라운드이미지의 위치를 바꿔주면 되지요.

 
fight (pasioner) 2004-04-28, 04:50 PM

pseudo class??

무지한자 질문을 드립니다.

처음 접하는 내용인듯 한데... 예제 하나만 들어주시면 대단히 감사할 것입니다.

~+'_'+~
ALL
PAGE 171
HOT
ssm96...
네이버 무료계정 10M →20M 용량 UP! (트래픽 무제한) [4] 2591 4/22, 2:55 am
트랙백 주소를 봅니다.눈 보호 10계명 [9] 3084 4/22, 12:31 am
소금도시 sbs '맛대맛'편 tv맵 브라우져 ㅡㅡㆀ [4] 2042 4/21, 11:53 pm
Microsoft Java Virtual Machine for Windows (VM) 5.0... [3] 1568 4/21, 9:40 pm
<DIV>로 <SELECT> 가리기... [8] 2431 4/21, 2:02 pm
구름과달 바이오스 쉽게 리셋하기. [27] 3391 4/21, 12:53 am
이즈도 트랙백 주소를 봅니다.한글색상표 [16] 4696 4/20, 11:08 am
미뉘 노가다를 박멸;;한 이미지 롤오버 over - out 스크립트 [20] 3694 4/19, 5:50 am
결혼 스케쥴관리...^^* [20] 4075 4/18, 3:55 pm
MS Windows Update 대량 살포~ -_-;; [5] 2342 4/17, 10:20 pm
무료 웹하드....50메가.. [4] 3182 4/16, 9:46 pm
ryan 드래그 한방으로 사진 리사이즈 [27] 3481 4/15, 6:52 pm
24가지 다양한 맛의 커피 만드는 방법이래요 =) [16] 4216 4/15, 3:29 pm
추천사이트 [6] 2447 4/15, 10:34 am
알짜배기 사이트 총집합 소개합니다.. (중복有,스크롤 ... [18] 4790 4/14, 12:44 pm
성의에 보답코저.. [12] 3369 4/13, 8:34 pm
서울시 시내버스 개정안&확정된 간선노선 [13] 5376 4/13, 8:41 pm
Command 활용법. [3] 2154 4/13, 6:00 pm
모질라에서 멀티플 클래스를 쓰자. [9] 1593 4/12, 11:28 pm
두루넷 고객 2000원 무료인화 [1] 1523 4/12, 10:03 pm
5402 topics / 171 of 271 pages
 166  167  168  169  170  171  172  173  174  175  176 
검색
제목 내용 작성자
EXP 순위

PRINT-FRIENDLY PAGE
© 2002-2013 by miniwini.com | E-mail