마우스를 올리면 그림이 변하는 자바스크립트이다. 흔하게 볼 수 있는 스크립트 기교이며, 자신의 홈페이지 안에
삽입하여 응용하는 것 또한 비교적 쉬운 스크립트이다. 아래의 미리보기를 통해 먼저 사용되는 스크립트를 보자.
이 스크립트를 이용하기 위해서는 우선 적용하고자하는 그림이 필요하다. 각각의 그림에는 마우스를 올려 놓았을때의
그림과 마우스를 치웠을 때의 그림 두가지의 그림이 필요하며 두개의 그림의 넓이와 높이는 같게 해주는게 일반적이다.
주로 메뉴같은곳에 응용되며 원하는 메뉴를 그림으로 제작하고 각각의 그림에는 두개의 이미지를 만들어 원하는 갯수의
메뉴에 적용이 가능하다. 아래의 html 예제는 4개의 메뉴를 사용한 예이며 각각의 메뉴에는 2개의 이미지가
사용되었다. 파란색부분을 자신의 홈페이지에 맞게 수정하여 그래도 삽입하면 된다.
| HTML Example |
<html>
<head>
<title>Demo3</title>
<script
language="javascript">
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
if (browserName == "Netscape" && browserVer >= 3){
init = "net";
}
else{
init = "ie";
}
if ((init == "net")||((init == "ie")&&(browserVer
>= 4))){
// 마우스
온/오프일때의 메뉴그림1 지정
image1on = new Image;
image1on.src = "tab1on.gif";
image1off = new Image;
image1off.src = "tab1off.gif";
// 마우스 온/오프일때의 메뉴그림2
지정
image2on = new Image;
image2on.src = "tab2on.gif";
image2off = new Image;
image2off.src = "tab2off.gif";
// 마우스 온/오프일때의 메뉴그림3
지정
image3on = new Image;
image3on.src = "tab3on.gif";
image3off = new Image;
image3off.src = "tab3off.gif";
// 마우스 온/오프일때의 메뉴그림4
지정
image4on = new Image;
image4on.src = "tab4on.gif";
image4off = new Image;
image4off.src = "tab4off.gif";
}
function img_on(imgName)
{
if (((init == "net")&&(browserVer >=3))||((init
== "ie")&&(browserVer >= 4))){
imgOn = eval(imgName + "on.src");
document[imgName].src = imgOn;
}
}
function img_off(imgName)
{
if (((init == "net")&&(browserVer >=3))||((init
== "ie")&&(browserVer >= 4))){
imgOff = eval(imgName + "off.src");
document[imgName].src = imgOff;
}
}
</script>
</head>
<body>
<!-- 원하는 위치에 그림을
위치시키고 링크시킨다 -->
<!--
온,오프되는 그림의 크기는 같은 크기를 가진다 -->
<!--
메뉴를 구분하는것은 image1,image2,image3.image4 임을 꼭 기억한다.-->
<!-- name=image1 부분은 반드시
써야한다.-->
<!--
첫번째그림-->
<a href="문서명.html"
onMouseover="img_on('image1')"
onMouseout="img_off('image1')"><img
src="tab1off.gif" width=그림넓이
height=그림높이 border=0 name="image1"></a>
<!-- 두번째그림-->
<a href="문서명.html"
onMouseover="img_on('image2')"
onMouseout="img_off('image2')"><img
src="tab2off.gif" width=그림넓이
height=그림크기 border=0 name="image2"></a>
<!-- 세번째그림-->
<a href="문서명.html"
onMouseover="img_on('image3')"
onMouseout="img_off('image3')"><img
src="tab3off.gif" width=그림넓이
height=그림크기 border=0 name="image3"></a>
<!-- 네번째그림-->
<a href="문서명.html"
onMouseover="img_on('image4')"
onMouseout="img_off('image4')"><img
src="tab4off.gif" width=그림넓이
height=그림크기 border=0 name="image4"></a>
<-- 그림넓이와 그림크기는 생략해도
된다 -->
</body>
</html>
|
|
|
|
