範例五：完整版

:::

[1001]XOOPS網站門面專業設計

18-5 範例五：完整版

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>

<style>
    #menu{
        width:200px;
        height:297px;
        background-image:url(bg_studygroup.png);
        position:relative;
    }

    #menu a{
        width:130px;
        height:40px;
        display:block;
        position:absolute;
        left:65px;
    }

    #menu a.b1{top:85px;}
    #menu a.b2{top:135px;}
    #menu a.b3{top:185px;}
    #menu a.b4{top:235px;}

    #menu a.b1:hover{
        background:url(bg_studygroup.png) -265px -85px no-repeat;
    }
    #menu a.b2:hover{
        background:url(bg_studygroup.png) -265px -135px no-repeat;
    }
    #menu a.b3:hover{
        background:url(bg_studygroup.png) -265px -135px no-repeat;
    }
    #menu a.b4:hover{
        background:url(bg_studygroup.png) -265px -135px no-repeat;
    }

    </style>

    </head>
<body>

<div id="menu">
        <a href="#" class="b1"></a>
        <a href="#" class="b2"></a>
        <a href="#" class="b3"></a>
        <a href="#" class="b4"></a>
    <div>

</body>
</html>