이 스크립트는 이미지 파일을 이용하여 플래쉬처럼 부드럽게 전환되는
메뉴를 만들수 있습니다.
우선 HTML의 <head></head>사이에 아래의 문장을 삽입합니다.
<script language="JavaScript">
<!--
for (var i=1; i<=9; i++)
{
eval(Menu+i+A = new Image(););
eval(Menu+i+B = new Image(););
eval(Menu+i+A.src = "menu/+i+-1.gif";);
eval(Menu+i+B.src = "menu/+i+-2.gif";);
}
function BrowserCheck() {
var b = navigator.appName
if (b=="Netscape") this.b = "ns"
else if (b=="Microsoft Internet Explorer") this.b = "ie"
else this.b = b
this.version = navigator.appVersion
this.v = parseInt(this.version)
this.ns = (this.b=="ns" && this.v>=4)
this.ns4 = (this.b=="ns" && this.v==4)
this.ns5 = (this.b=="ns" && this.v==5)
this.ie = (this.b=="ie" && this.v>=4)
this.ie4 = (this.version.indexOf(MSIE 4)>0)
this.ie5 = (this.version.indexOf(MSIE 5)>0)
this.min = (this.ns||this.ie)
}
is = new BrowserCheck()
function chng(ImgName,ImgSrc)
{
if ((screen.colorDepth >= 24) && (is.ie4))
{
eval(document.images.+ImgName+.src = +ImgSrc+.src;);
}
else
{
eval(ImgName + .filters.blendTrans.stop(););
eval(ImgName + .filters.blendTrans.Apply(););
eval(ImgName + .src= + ImgSrc + .src;);
eval(ImgName + .filters.blendTrans.Play(););
}
}
function chng2(ImgName,ImgSrc)
{
eval(document.images.+ImgName+.src = +ImgSrc+.src;);
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
이 부분에서 붉은색과 푸른색으로 표시해둔 부분은 사용자의 편의에 따라 변경하여 사용할 부분입니다.
우선 붉은색으로 표시된부분은 이 문장이 포함된 HTML파일의 위치에서 메뉴이미지파일이 들어있는 디랙토리를 설정합니다.(위의 상태라면 바로상위에 있는 menu라는 폴더에 메뉴이미지가 들어있다는 것입니다.)
푸른색으로 표시된 부분은 메뉴 이미지 파일명중에 모든 파일에서 중복되는 부분의 롤오버 전의 이미지와 후의 이미지를 설정해놓은것 입니다.
예로서 메뉴이미지 파일명이 1-1.gif(롤오버전) 1-2.gif(롤오버후) 2-1.gif(롤오버전) 2-2.gif(롤오버후) ....등으로 있다면 이곳에서 중복되는부분은 -1.gif가 되며 -2.gif가 됩니다.
아래의 문장은 실재로 표시될 부분입니다.
<a onfocus="this.blur()"
onmouseover=chng("MENU1","Menu1B") onmouseout=chng("MENU1","Menu1A") href=""><img src="menu/1-1.gif" width="149" height="15" border="0" id="MENU1" style="filter:blendTrans(duration=0.6)"></a>
위의 문장이 메뉴이미지에 들어갈 소스입니다. 앞부분의 보라색으로 된부분이 메뉴마다 바꿔줘야 할 부분입니다.
대문자로 된 MENU1은 첫번째의 메뉴를 나타냅니다. 꼭 대문자로 사용하여야 합니다.(2번째 메뉴라면 MENU2 가 됩니다)
뒷부분의 Menu1B 와 Menu1A 는 롤오버 전과 롤오버 후의 이미지를 설정해주는 부분입니다.(2번째 메뉴라면 Menu2B와 Menu2A 가 됩니다.)
마지막부분의 duration=0.6 부분은 변환될 속도를 지정하는것입니다. 취향에 맞게 설정하면 됩니다.
|
