<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8" />
    <title>右下角弹窗</title>
    <style>
        *{margin:0;padding:0;}
        .content{width:960px;height:1440px;background:#ccc;color:#000;font-size:36px;text-align:center;margin:0 auto;position:relative;}
        .tipCon{position:fixed;background:#efefef;color:#000;font-size:16px;text-align:center;bottom:0;right:0;}
        .clickMe{height:24px;background:#CCC;line-height:24px;}
        .showPic{display:none;}
        .clickMe{position:relative; }
        .clickMe a{background:url(img/icon.jpg) no-repeat -399px -19px;width:16px;height:16px;display:none;position:absolute; top:5px; right:5px;}
        .clickMe a:hover{background-position:-343px -19px;}
    </style>
    <script>
        window.onload = function(){
            var TipBox = document.getElementById("tipCon");
            var ClickMe = document.getElementById("clickMe");
            var showPic = document.getElementById("showPic");
            var closeBtn = document.getElementById("closeBtn");
            ClickMe.onmouseover = function(){
                showPic.style.display = 'block';
                closeBtn.style.display = 'block';
            }
            closeBtn.onclick = function(){
                showPic.style.display = 'none';
                closeBtn.style.display = 'none';
            }
        }
    </script>
</head>

<body>
<div class="content">网页内容</div>
<div class="tipCon" id="tipCon">
    <div class="clickMe" id="clickMe">猜猜我有啥？<a href="javascrip:void(0);" id="closeBtn"></a></div>
    <div class="showPic" id="showPic"><img src="img/snow.gif" /></div>
</div>
</body>
</html>