My Programing/HTML and JavaScript

JS :: 롤오버버튼

nkdk 2008. 6. 16. 10:26

  • Object객체 : 새로운 객체를 생성합니다.
    • eval() : 실 경로를 지정해주는 역할을 합니다.

<html>
<script language="JavaScript">
<!--

function img_act(id, act) {  // 마우스커서의 움직임에 이미지가 변화
if (act == 0)
  document.images[id].src = eval("imgs." + id + "_off.src");
else
  document.images[id].src = eval("imgs." + id + "_on.src");
}

imgs = new Object();  // imgs객체생성
imgs.imgfile0_off = new Image();
imgs.imgfile0_off.src = "http://cafefiles.naver.net/data21/2006/5/28/269/btn_schH.gif";
imgs.imgfile0_on = new Image();
imgs.imgfile0_on.src = "http://cafefiles.naver.net/data21/2006/5/28/193/btn_schA.gif";

imgs.imgfile1_off = new Image();
imgs.imgfile1_off.src = "http://cafefiles.naver.net/data21/2006/5/28/28/home_a.jpg";
imgs.imgfile1_on = new Image();
imgs.imgfile1_on.src = "http://cafefiles.naver.net/data21/2006/5/28/35/home_b.jpg";

// -->
</script>
<body>

<table cellpadding=10>
<tr>
  <td>
   <a href="http://www.naver.com" target="blank"
     onMouseOut="img_act('imgfile0', 0)"
     onMouseOver="img_act('imgfile0', 1)">
    <img src="http://cafefiles.naver.net/data22/2006/5/26/294/btn_schH.gif" border=0 name="imgfile0">
   </a>
  </td>
  <td>
   <a href="http://blog.naver.com/yatoyato" target="blank"
     onMouseOut="img_act('imgfile1', 0)"
     onMouseOver="img_act('imgfile1', 1)">
    <img src="http://cafefiles.naver.net/data23/2006/5/26/207/home_a.jpg" border=0 name="imgfile1">
   </a>
  </td>
</tr>
</table>

</body>
</html>