묻고답하기
자바스크립트
2007.05.17 21:47
http://19810225.net/main.html
이 홈페이지를 보시면 메뉴 이미지에 마우스 오버를 하면 빨강 이미지로 바뀌고 클릭을 하면 빨강 이미지로 고정이 되어 있잖아요
그리고 다른 메뉴를 클릭하면 전에 클릭했던 메뉴는 원래의 이미지로 돌아오구요
소스를 봤는데 그 부분이 어떤 스크립트로 실행되는지 모르겠더라구요
이런 효과를 내려면 어떻게 해야 하나요?
이 홈페이지를 보시면 메뉴 이미지에 마우스 오버를 하면 빨강 이미지로 바뀌고 클릭을 하면 빨강 이미지로 고정이 되어 있잖아요
그리고 다른 메뉴를 클릭하면 전에 클릭했던 메뉴는 원래의 이미지로 돌아오구요
소스를 봤는데 그 부분이 어떤 스크립트로 실행되는지 모르겠더라구요
이런 효과를 내려면 어떻게 해야 하나요?
댓글 3
-
괄리자
2007.05.18 18:06
-
박군의그녀
2007.05.18 21:36
드림위버로 했는데 마우스 오버시 이미지는 바뀌는데 클릭하면 오버시 이미지가 아닌 원래 이미지가 나와요;
드림위버의 어떤 메뉴를 이용해야 하나요? -
하이티비
2007.05.19 16:22
나모로 이용하시는게 쉽습니다.
대충 소스를 붙여드리자면 이렇습니다.
<script language="JavaScript">
<!--
function na_restore_img_src(name, nsdoc)
{
var img = eval((navigator.appName.indexOf('Netscape', 0) != -1) ? nsdoc+'.'+name : 'document.all.'+name);
if (name == '')
return;
if (img && img.altsrc) {
img.src = img.altsrc;
img.altsrc = null;
}
}
function na_preload_img()
{
var img_list = na_preload_img.arguments;
if (document.preloadlist == null)
document.preloadlist = new Array();
var top = document.preloadlist.length;
for (var i=0; i < img_list.length-1; i++) {
document.preloadlist[top+i] = new Image;
document.preloadlist[top+i].src = img_list[i+1];
}
}
function na_change_img_src(name, nsdoc, rpath, preload)
{
var img = eval((navigator.appName.indexOf('Netscape', 0) != -1) ? nsdoc+'.'+name : 'document.all.'+ '+ '+name);
if (name == '')
return;
if (img) {
img.altsrc = img.src;
img.src = rpath;
}
}
// -->
</script>
</head>
<body OnLoad="na_preload_img(false, 'http://tnghksin.usobau.com/i_join.gif');">
// 페이지가 로딩될때 i_join.gif 파일을 숨기고 로딩한다
<a href="http://www.nzeo.com" OnMouseOver="na_change_img_src('Test', 'document', 'http://tnghksin.usobau.com/i_join.gif', true);" target="_blank" OnMouseOut="na_restore_img_src('+ 'Test', 'document'); na_change_img_src('Test', 'document', 'i_admin.gif', false);"><img src="http://tnghksin.usobau.com/i_admin.gif" width="44" height="15" border="0" name="Test" OnMouseDown="na_change_img_src('Test', 'document', 'http://tnghksin.usobau.com/i_memo_off.gif', false);"></a>
</body>
// OnMouseOut 태그 : 마우스가 이미지에서 벗어날때 (여기서는 이미지변경
// OnMouseDown 태그 : 마우스가 이미지로 클릭하는 동안 이미지가 변경
// OnMouseOver 태그 : 마우스가 이미지위로 올려져있을때 이미지변경
소스보시면 이해가시겠죠?
테스트는 http://tnghksin.usobau.com/서 해보세요~~~
마우스 온오버