본문 바로가기

javascript

스타일쉬트를 이용한 메뉴 설명 스크립트

[스크립트]

<STYLE>
.desc {
text-align:     center;
font-family:    times;
font-size:      20px;
color:          red;
position:       absolute;
top:            250px;
left:           20px;
width:          1000px;
visibility:     hidden;
z-index:        0;
}

BODY {
background:     #000000;
}
A {
text:           bold;
text-decoration:none;
color:          lime;
}

A:HOVER {        color : yellow;        

}
</STYLE>
<SCRIPT LANGUAGE = "JavaScript">
    /* Show an object */
    function showObject(object) {
        object.visibility = VISIBLE;
    }
    /* Hide an object */
    function hideObject(object) {
        object.visibility = HIDDEN;
    }
</SCRIPT>
<BODY BGCOLOR="#ffffff" link="green" TEXT="lime">
<p> </p>
<p> </p>
<H2 ALIGN=CENTER>
<A HREF = "#" onMouseOver = "showObject(desc1)" onMouseOut = "hideObject(desc1)">Main Page</A><BR>

<A HREF = "#" onMouseOver = "showObject(desc2)" onMouseOut = "hideObject(desc2)">Gallery</A><BR>

<A HREF = "#" onMouseOver = "showObject(desc3)" onMouseOut = "hideObject(desc3)">Interesting Facts</A><BR>

<A HREF = "#" onMouseOver = "showObject(desc4)" onMouseOut = "hideObject(desc4)">Info</A><BR>
</H2>

<DIV ID = "desc1" CLASS = "desc">
Back to the Main Page
</DIV>

<DIV ID = "desc2" CLASS = "desc">
Visit a Gallery of Madbull's maniac
</DIV>

<DIV ID = "desc3" CLASS = "desc">
Find out facts you never knew before
</DIV>

<DIV ID = "desc4" CLASS = "desc">
Visit my Home Page for fun and share<br>
my cool life
</DIV>
<SCRIPT LANGUAGE = "JavaScript">

    /* Simple version detection */
    var isNS = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) >= 4);

/* They can be used in place
       of hidden and visible because on occasion Navigator has problems with the two */
    var HIDDEN = (isNS) ? 'hide' : 'hidden';
    var VISIBLE = (isNS) ? 'show' : 'visible';

    /* Create shortcut variables for different absolutely positioned elements */
    var desc1 = (isNS) ? document.desc1 : document.all.desc1.style;
    var desc2 = (isNS) ? document.desc2 : document.all.desc2.style;
    var desc3 = (isNS) ? document.desc3 : document.all.desc3.style;
    var desc4 = (isNS) ? document.desc4 : document.all.desc4.style;
    
</SCRIPT>