이미지가 바뀌는 메뉴(2)는 앞에서 배운 (1)과 약간 다른 기능을 제공한다. 아래의 미리보기에서 확인해보자.
그림에 마우스를 올려놓으면 그림이 변하는게 아니라 다른 곳의 그림이 변하는 스크립트이다. 주로 메뉴에 사용되며
메뉴 설명부분에 많이 이용된다. 잘 응용하면 자신만의 고유스크립트로 홈페이지를 더욱 멋지게 만들 수 있을 것이다.
| HTML Example |
<html>
<head><title>Demo4.html</title>
<SCRIPT language=JavaScript>
if (document.images) {
//
마우스가 올라갔을때 변하는 그림1을 지정
// 하는 곳이다.
img1on = new Image();
img1on.src = "변할그림1지정";
// 마우스가 올라갔을때 변하는 그림2을
지정
// 하는 곳이다.
img2on = new Image();
img2on.src = "변할그림2지정";
// 메뉴를 추가하고 싶으면 다음과
같이 숫자만
// 바꾸어 추가할 수 있다.
//
// img3on = new Image();
// img3on.src = "변할그림3지정";
}
function imgOn(imgName) {
if (document.images) {
document["blank"].src = eval(imgName + "on.src");
}
}
function imgOff() {
if (document.images) {
//
마우스를 오려놓으면 그림이 변할 곳의 처음그림이다
// 즉 이 곳에서 지정한 그림위에 마우스를 올려놓으면 변할 그림이 겹쳐져
//위에 나타나는 공간이 되는 부분이다.
//당연히 그림의 크기는 변할그림과 같아야겠다
document["blank"].src = "변할그림의
여백그림지정";
}
}
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
if (browserName
== "Netscape" && browserVer >= 3){
init
= "net";
}
else{
init
= "ie";
}
if ((init == "net")||((init == "ie")&&(browserVer
>= 4))){
}
</SCRIPT>
</head>
<body>
<center>
<!--
메뉴1그림을 지정한다. -->
<a HREF="연결문서.html"
onMouseover="imgOn('img1')" onMouseout="imgOff()">
<img src="메뉴1그림지정"
border=0>
</a>
<!--
메뉴2그림을 지정한다 -->
<a HREF="연결문서.html"
onMouseover="imgOn('img2')" onMouseout=imgOff()>
<img src="메뉴2그림지정"
border=0>
</a>
<!--
변할 그림이 나타날 여백부분을 지정한다.-->
<img src="여백그림지정"
border=0 name="blank">
<!-- name="blank" 반드시 기입-->
</center>
</body>
</html>
|
|
|
|
