묻고답하기
홈페이지 만들대요.. 마우스에 따라..!
2003.03.21 21:00
마우스에 따라..
그림이 칼라로 변했다가..
다시 마우스 때면..
흑백으로 변하는건.. 어케 하는거죠?
그림이 칼라로 변했다가..
다시 마우스 때면..
흑백으로 변하는건.. 어케 하는거죠?
댓글 3
-
☆꼬맹냥、
2003.03.21 21:02
-
☆꼬맹냥、
2003.03.21 21:07
마우스 땠을때를 흑백이미지로 하시구요.
마우스 올렸을때 이미지를 칼라로 하시면 되겠지요^-----^* -
☆꼬맹냥、
2003.03.21 21:06
조금 간단한 방법으로는,,
해드에 넣으세요..
<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>
바디에 넣으세요
<a href=# onfocus='this.blur()' onMouseOver='bt("picture1","마우스오버시 바뀌는 그림.gif")' onMouseOut='bt("picture1","평상시보이는 그림.gif")'>
<img id=picture1 src=평상시보이는그림 border=0 style="filter:blendTrans(duration=0.5)"></a>
소스를 알려드리지요.
Mouse Over 효과
이번에는 홈페이지를 만들때 가장 유용하고 넓리 사용되는 마우스 오버 효과를 적용하는 것에 대해 알아보겠습니다. 먼저 마우스가 이미지 밖에 있을때의 이미지와 이미지 안에 있을때의 이미지를 준비합니다. 아래의 그림과 같이 포토샵을 사용할 경우 그리드를 적용해서 작업하면 편리합니다.
준비된 두개의 이미지입니다. 아래쪽은 ani-gif파일로 반복횟수를 1로 지정하였습니다.
Mouse Out에 해당하는 이미지를 삽입하고 아래와 같은 스크립트 코드를 작성하면 오른쪽과 같은 메뉴 버튼을 만들 수 있습니다.
<head>에 삽입하여야 할 내용
<script language = "Javascript">
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
if (browserName == "Netscape" || "Explorer" && browserVer >= 3) version = "n3";
else version = "n2"
if (version == "n3") {
april1on = new Image();
april1on.src = "파일명(디렉토리포함)";<!---- 마우스가 이미지위에 위치할 경우 이미지>
april1off = new Image();
april1off.src = "파일명(디렉토리포함)";<!---- 마우스가 이미지위에서 벗어날 경우 이미지>
}
function img_act(imgName) {
if (version == "n3") {
imgOn = eval(imgName + "on.src");
document [imgName].src = imgOn;
}
}
function img_inact(imgName) {
if (version == "n3") {
imgOff = eval(imgName + "off.src");
document [imgName].src = imgOff;
}
}
</script>
<body>에 삽입하여야 할 내용
<a href="http://user.chollian.net/~april203" onMouseOver="img_act('april1');return true" onMouseOut="img_inact('april1'); return true" target="top">
<IMG SRC="파일명(마우스가 벗어날 경우 이미지경로)" BORDER="0" name="april1"></A>
도움말 : 각 내용중 붉은 색으로 적힌 부분은 사용자가 자신의 경우에 맞게 변형시켜야 할 부분이며 <head>내용 중 april1이란 사용자가 정한 정의입니다. 메뉴의 수가 늘어나면 april1, april2...... april n 의 형태로 늘리면 됩니다.