이미지에 마우스 오버시 다른 이미지로 바뀌게 하기 (버튼 만들때,,,)

log

by Dapy 2008. 2. 25. 19:52

홈페이지나 블로그를 돌아다니다 보면 버튼에 마우스를 올려 놓았을때 다른 모습으로 바뀌는 경우를 만난적이 있을 것이다 이런 버튼을 만드는 방법은 플래시를 이용해서 화려하게 만드는 방법이 있지만, 간단하게 html 코드를 이용해서 만들 수 있다

지금 소개하는 팁은 이미지에 마우스 포인터를 올려 놓으면 다른 이미지로 바뀌게 하는 방법이다 버튼이나 배너에 사용하면 꽤나 유용하리라 생각한다 물론 포스트 작성 등 여러곳에 사용이 가능하다

3가지 방법을 설명하고자 한다 html 코드라 어렵게 느낄지 모르지만, 전혀 어렵지 않으니 겁먹을 필요는 없다 특히 첫번째 방법은 정말 간단하다

첫번째, 간단하면서도 쉽게 사용할 수 있는 롤오버 방식 (아래 첨부파일을 받아 쓰세요)

invalid-file

테스트 보기

아주 간단한 방식이다 html을 아주 약간만 알아도 쉽게 적용해서 사용이 가능할 것이다 테스트 보기에 본인의 배너를 이용해 적용을 시켜놓았다 마우스 포인터를 올리면 다른 이미지로 바뀌는걸 볼 수 있을 것이다 물론 마우스를 내리면 원래의 이미지로 되돌아 온다

두번째, 첫번째 보다는 매끄럽게 이미지 전환이 되는 트랜지션 방식 (첨부파일을 받아 쓰세요)

invalid-file

[head 안에 삽입하기]
<script language=javascript>
function bt(id,after)
{
eval(id+'.filters.blendTrans.stop();');
eval(id+'.filters.blendTrans.Apply();');
eval(id+'.src="'+after+'";');
eval(id+'.filters.blendTrans.Play();');
}
</script>

[body 안에 삽입하기]
<a href="링크되는주소" onfocus='this.blur()' onMouseOver='bt("img01","첫번째 이미지 주소")' onMouseOut='bt("img01","두번째 이미지 주소")'>
<img id=img01 src="두번째 이미지 주소" border=0 style="filter:blendTrans(duration=0.9)"></a>

빨간색 글씨는 스킨 수정으로 들어가서 <head>~</head> 사이 아무곳에 넣으면 된다 파란색 부분은 이미지가 출력되는 부분이다 원하는 body 나 포스트에 넣으면 된다 초록색의 duration=0.9 는 이미지가 전환되는 시간이다 수치가 높을 수록 이미지가 바뀌는데 오래 걸린다 보라색의 img01은 id 이다 이건 여러개의 이미지를 사용할 수 있게 해준다 img02,img03,,, 이런식으로 다른 이미지를 사용할때 추가를 하면 된다

(두번째 코드의 테스트는 올리지 않음)

첫번째 코드는 마우스 포인터를 올리자 마자 이미지가 바뀌지만, 지금 소개하는 코드는 부드럽게 이미지가 전환이 된다 전환되는 시간의 조절도 가능하기 때문에 좀 더 이쁘게 만들 수 있다 다만, 이 코드의 단점은 IE 에서는 작동이 되는데 파이어폭스에서는 작동이 안 된다 파이어폭스에서는 바뀌지 않기 때문에 그냥 하나의 이미지를 적용한거와 별반 다를게 없다

세번째, 롤오버 + 트랜지션 (첨부파일을 받아서 쓰세요)

invalid-file

<HEAD>안에 넣기
<script type="text/javascript">

//필터효과지정하는곳 CSS (transition=0 to 23)번호에따라 효과가 틀림
document.write('<STYLE TYPE="text/css">.imgTrans{ filter: revealTrans (duration=0.4,transition=12) }</STYLE>');

//Uncomment the next line for fading rollovers instead of dissolving:
//document.write('<STYLE TYPE="text/css">.imgTrans{ filter:blendTrans(duration=0.4) }</STYLE>');

var onImages=new Array();
function Rollover(imgName, imgSrc)
{onImages[imgName] = new Image();
onImages[imgName].src = imgSrc;}

function turnOn(imgName){
if(document.images[imgName].filters != null)
document.images[imgName].filters[0].apply();
document.images[imgName].offSrc = document.images[imgName].src;
document.images[imgName].src = onImages[imgName].src;
if(document.images[imgName].filters != null)
document.images[imgName].filters[0].play();
}

function turnOff(imgName){
if(document.images[imgName].filters != null)
document.images[imgName].filters[0].stop();
document.images[imgName].src = document.images[imgName].offSrc;}

//메뉴의 이름지정과 마우스 올라갔을 때 보여질 그림의 주소 적는 곳:
Rollover("menu1", "바뀔이미지주소");
Rollover("menu2", "바뀔이미지주소");

</script>

전환코드
0 : Box in
1 : Box out
2 : Circle in
3 : Circle out
4 : Wipe up
5 : Wipe down
6 : Wipe right
7 : Wipe left
8 : Vertical blinds
9 : Horizontal blinds
10 : Checkerboard across
11 : Checkerboard down
12 : Random dissolve
13 : Split vertical in
14 : Split vertical out
15 : Split horizontal in
16 : Split horizontal out
17 : Strips left down
18 : Strips up
19 : Strips right down
20 : Strips right up
21 : Random bars horizontal
22 : Random bars vertical
23 : Random

빨간색 글씨 부분은 <head>~</head> 부분에 넣으면 되고, 파랑색 글씨 부분은 body 나 포스트 등 원하는 부분에 넣으면 된다 보라색 글씨의 menu1,menu2는 id 이다 여러개를 적용할때 하나씩 추가해 주면 된다 하단의 전환코드는 빨간색 글시의 앞부분에 보면 transition 부분이 있다 이곳에 쓰이는데 이미지가 전환될때 어떤 효과를 쓸 것인가 정하는 것이다 다양한 효과를 이용해서 이미지 전환을 할 수 있다 현재는 12번 Random dissolve가 적용되어 있다

테스트 보기

세번째 방식은 첫번째와 두번째의 혼합이다 이걸 사용하게 되면 IE에서는 트랜지션으로 작동하고, 파이어폭스에서는 단순한 롤오버로 작동하기 때문에 두 브라우저 모두를 만족시킬 수 있다 테스트 보기에 가면 첫번째와 세번째 테스트가 올려져 있다 파이어폭스에서 마우스 포인터를 올려보면 첫번째와 세번째 테스트로 올려 놓은게 전혀 다른게 없어 보인다 하지만 IE로 접속을 해서 마우스 포인터를 올려놓기 바란다 배너가 바뀌는게 뭔가 다른걸 느낄 것이다 이미지가 바뀌는 시간, 전환할때의 형태까지 설정이 가능하니 좀 더 이쁘고 화려하게 만들 수 있다 (IE를 쓰는 사람이 많으니 2번째 코드를 사용해도 큰 무리는 없어 보이지만, 좀 더 완벽하게 하려면 3번째 코드를 쓰는게 좋지 싶다)

현재 본 블로그에도 사이드바의 핑크색 RSS 버튼과 이글 바로 밑에 있는 핑크색 RSS 버튼에 적용을 시켜 놓았다 마우스 포인터를 올려 놓으면 핑크색이 보라색으로 바뀐다 당연히 IE 에서는 트랜지션으로 작동한다