Eyes Of Siche
Guest book

또다른 이미지 롤오버

replace 문법 : [sVal=]String.replace(regexp,replaceText)
stringObj.replace(regexp,function)

stringObj = (문자열 개체)
필수적인 요소이며, 바꾸려는 String 개체나 문자열 리터럴이다.
이 문자열은 replace 메서드로는 수정할 수 없다.

regexp = (정규식)
필수적인 요소이며, 정규식 패턴과 적용 가능한 플래그를 포함하는 Regular Expression 개체의 인스턴스이다.
정규식 패턴과 플래그를 포함하는 String 개체나 리터럴도 가능하다.
regexp 가 Regular Expression 개체의 인스턴스가 아닐 경우 문자열로 변환되고 정확한 검색을 수행하지만, 문자열을 다시 정규식으로 바꾸지는 않는다.

replaceText = (대체 문자열)
필수적인 요소이며, stringObj에서 regexp와 일치하는 것으로 바꿀 문자열를 포함하는 String 개체나 문자열 리터럴이다. JScript 5.5 이후에서는 변환 문자열를 반환하는 기능함수도 replaceText 인수가 될 수 있다.

function = (기능함수)
두번째 인수는 일치, 대체가 수행된 후에 새로 생성된 문자열을 이용하여 추가적으로 수행할 기능함수가 될 수 있다

<script type="text/javascript">
function imgOver(obj) {
    obj.src = obj.src.replace(".gif", "_over.gif");
}
function imgOut(obj) {
    obj.src = obj.src.replace("_over.gif", ".gif");
}
</script>
<img src="/ex/imgover/con1.gif" onmouseover="imgOver(this)"
onmouseout="imgOut(this)" />

이거 역시 이미지 네이밍의 규칙을 줘야 한다.
걍 이미지, _over 된 이미지.

Posted by siche

2007/01/01 00:02 2007/01/01 00:02
,
Response
No Trackback , No Comment
RSS
http://eos.pe.kr/rss/response/49

Leave a comment
[로그인][오픈아이디란?]

다시 생각한 간단한 이미지 롤오버

split 문법 : [sVal=]String.split(separator[,limit])
문자열을 여러개의 부분 문자열로 분할할 때 만들어지는 문자열의 배열변수를 반환한다.
<script type="text/javascript">
function imgOver(obj,over){

    var objSrcOn = obj.src.split("_over.gif");
    objSrc = objSrcOn[0].split(".gif");

    if(over=='over')
    {
        obj.src = objSrc[0] + '_over.gif';
    }
    else
    {
        obj.src = objSrc[0] + '.gif';
    }

}
</script>
<img src="/ex/imgover/con1.gif" onmouseover="imgOver(this,'over')"
onmouseout="imgOver(this,'out')" />

위의 예제는 이미지 명의 규칙이 필요하다. 1.gif 그냥 이미지 1_over.gif 오버한 이미지.

_over 으로 오버인지 아닌지를 정한다. 해당 이미지를 오버든 아니든 _over.gif를 _over.gif 아닐경우에는
.gif를 제외한다. 즉 해당 이미지의 그냥 이미지의 파일명까지만 불러와서 오버일때는 _over.gif를 붙이고
아닐경우에는 .gif를 붙인다.

Posted by siche

2007/01/01 00:02 2007/01/01 00:02
,
Response
No Trackback , No Comment
RSS
http://eos.pe.kr/rss/response/48

Leave a comment
[로그인][오픈아이디란?]

이미지 롤오버

보통 버튼에 많이 쓰는 이미지 롤오버.
조금은 역동적으로 표현? 살아있는 듯한 표현? 강조의 표현?
아무튼 의도가 어떻게 되었던 간에 이미지 객체에 onmouseover, onmouseout 이벤트로 이미지 경로를 삭삭~ 바꿔주면 된다.
<body>
<img src="/ex/imgover/con1.gif" onmouseover="this.src='/ex/imgover/con1_over.gif'"
onmouseout="this.src='/ex/imgover/con1.gif'" />

기본적인 이미지 롤오버 스크립트다.
여기서 this 란. 해당 객체를 말하는 것이다. 즉, 지금 이 이미지 인 것이다. 이 놈의 src 경로를 바꿔 주는 것이다.
<script type="text/javascript">
function imgOver(obj,imgUrl,imgName,over){

    if(over=='over')
    {
        obj.src = imgUrl + imgName + '_over.gif';
    }
    else
    {
        obj.src = imgUrl + imgName + '.gif';
    }
}
</script>
<img src="/ex/imgover/con1.gif" onmouseover="imgOver(this,'/ex/imgover/','con1','over')"
onmouseout="imgOver(this,'/ex/imgover/','con1','out')" />

함수로 만들어 보았다.
위와 같이 쓰려면 오버되었을때의 이미지를 이름을 끝에 _over 라는 놈을 꼭 넣어야 한다.

Posted by siche

2007/01/01 00:02 2007/01/01 00:02
,
Response
No Trackback , No Comment
RSS
http://eos.pe.kr/rss/response/45

Leave a comment
[로그인][오픈아이디란?]
« 1 »
블로그 이미지

안돼는 것은 없다.. 항상 방법이 문제일 뿐이다.. 그 방법을 찾기 위해서는 노력할 뿐이다.. - siche

Archives

Recent Trackbacks

Calendar

«   2013/05   »
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  

Site Stats

Total hits:
814418
Today:
60
Yesterday:
396