商务通代码

CSS代码：

* html {        
        background-image: url(about:blank);    
        background-attachment: fixed;    
    }    
    body{height:1000px;}    
    img{border:0;}    
    #swt_c{    
        width:455px;    
        height:333px;    
        position:fixed;    
        left:50%;    
        top:50%;    
        margin-left:-222px;    
        margin-top:-165px;    
        z-index:9999;    
        display:none;    
        _position: absolute;    
        _top:expression(eval(document.documentElement.scrollTop));    
        _left:50%;    
        _top:50%;    
        _margin-top: 165px;    
        _margin-left:-222px;    
    }    
    #swt_b{    
        width:165px;    
        height:437px;    
        position:fixed;    
        right:10px;    
        top:150px;    
        z-index:9999;    
        display:block;    
        _position: absolute;    
        _top:expression(eval(document.documentElement.scrollTop));    
        _margin-top: 100px;    
    }

HTML代码

div id="swt_c">
        <img src="http://www.aa.com/aa.jpg" width="455" height="330" usemap="#Map">
        <map name="Map">
            <area shape="rect" coords="0,20,455,333" href="javascript:;" onClick="swt_url();">
            <area shape="rect" coords="435,1,455,20" href="javascript:;" onClick="hide_c();">
        </map>
    </div>
    <div id="swt_b">
        <img src="http://www.aa.com/bb.jpg" width="165" height="437" usemap="#Map2">
        <map name="Map2">
            <area shape="rect" coords="145,1,170,20" href="javascript:;" onClick="hide_b();">
        </map>
    </div>

JS代码

function domReady(fn){//封装domReady，类似于jquery的domReady()    
        if(document.addEventListener){    
            document.addEventListener('DOMContentLoaded',function(){    
                fn && fn();    
            },false);    
        }else{    
            var oS=document.createElement('script');    
            oS.defer='1';    
            oS.src='';    
            var oHead=document.getElementsByTagName('head')[0];    
            oHead.appendChild(oS);     
     
            oS.onreadystatechange=function(){    
                if(oS.readyState=='complete'){    
                    fn && fn();    
                }  
     
            }  
     
        }  
     
    }    
    var timer_c = timer_b = null;    
    var timeOut = 1000;//第一次    
    var timeInt = 3000;//第二次之后    
    function hide_c(){    
        clearInterval(timer_c);    
        swt_c.style.display="none";    
        swt_b.style.display="block";    
        timer_c=setInterval(show_c,timeInt);//关闭中间，开启定时器    
    }    
    function hide_b(){    
        clearInterval(timer_b);    
        swt_c.style.display="block";    
        swt_b.style.display="none";    
    }      
     
    function show_c(){    
        clearInterval(timer_c);    
        swt_c.style.display="block";    
    }    
    function show_b(){    
        clearInterval(timer_b);    
        swt_b.style.display="block";    
    }    
    function swt_url(){    
        window.open("http://www.baidu.com/","_blank")    
    }    
    domReady(function(){    
        var swt_c = document.getElementById('swt_c');    
        var swt_b = document.getElementById('swt_b');       
     
        window.onscroll=window.onresize=function(){    
            //改变窗口大小或滚动鼠标，清除定时器，从新计时    
            clearInterval(timer_c);    
            clearInterval(timer_b);    
            timer_c=setInterval(show_c,timeInt);    //中间第二次弹出    
            timer_b=setInterval(show_b,timeInt);    //边侧第二次弹出    
        }    
        setTimeout(show_c,timeOut);         //中间第一次弹出    
        timer_c=setInterval(show_c,timeInt);    //中间第二次弹出    
        timer_b=setInterval(show_b,timeInt);    //边侧第二次弹出    
    });