很无聊的一个找碴游戏

 家里没网络，实在无聊，玩游戏都没味道，只好玩CSS。

这个东西实在没什么技术含量在里面，纯属打发时间。

简单说明：一张图片放在底层，上面覆盖一个操作范围区域的层，然后再叠加5个a的位置，这样基本的就完成了。如果会JS的话，可以做得更完美，可惜不会。努力学习！

CSS内容：

* {margin:0;padding:0;}
body {background:#000000;}
.wrapper {width:828px;height:502px;margin:10px auto;padding:5px;border:1px solid #999999;background:url(pic.jpg) 5px 5px no-repeat;}
.opArea {float:right;width:407px;height:502px;position:relative;cursor:pointer;z-index:99;}
a {width:50px;height:50px;display:block;position:absolute;}
    .d1 {top:147px;left:51px;}
    .d2 {top:150px;right:121px;}
    .d3 {width:100px;height:40px;right:90px;bottom:156px;}
    .d4 {width:110px;top:53px;right:25px;}
    .d5 {right:55px;bottom:227px;}
.fRight {background:url(right.gif) center center no-repeat;}

XHTML内容：

<div class="wrapper">
    <div class="opArea">
        <map id="fd">
            <a href="##" class="d1" onclick="this.className='fRight d1'"></a>
            <a href="##" class="d2" onclick="this.className='fRight d2'"></a>
            <a href="##" class="d3" onclick="this.className='fRight d3'"></a>
            <a href="##" class="d4" onclick="this.className='fRight d4'"></a>
            <a href="##" class="d5" onclick="this.className='fRight d5'"></a>
        </map>
    </div>
</div>