发个惠谱的Banner特效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>惠谱</title>
<style type="text/css">
div#CMenu_Root {
/*底层*/
width:600px;
}div.CMenu_Img {
/*第一层：图片*/
width:100%;
height:200px;
}div.CMenu_Title div {
/*第二层：标题内的DIV*/
width:118px;
height:40px;
padding-top:10px;
float:left;
background-color:#DFDFDF;
border:#CCCCCC 1px solid;
cursor:pointer;
}div.CMenu_Title div span {
/*第二层：标题内的DIV里的SPAN*/
margin-left:10px;
font-weight:bold;
color:#FFFFFF;
}div.CMenu_Content {
/*第三层：内容*/
clear:both;
padding-top:5px;
}div.CMenu_Left {
/*第三层：内容——左边*/
width:200px;
float:left;
clear:left;
margin-left:10px;
*margin-left:5px;
}div.CMenu_Center {
/*第三层：内容——中间*/
width:auto;
margin:0 170px 0 220px;
}div.CMenu_Right {
/*第三层：内容——右边*/
width:150px;
float:right;
margin-right:10px;
*margin-right:5px;
}div.CMenu_Left_Title {
/*第三层：内容——标题*/
border-bottom:#999999 1px solid;
padding-bottom:5px;
margin-bottom:5px;
font-weight:bold;
}
</style>
<script type="text/javascript">
//.....
</script>
</head>
<body>
<div id="CMenu_Root">
<div class="CMenu_Img"><img width="100%" height="100%" border="0" alt="变换的图片" style="display:none;" /></div>
<div class="CMenu_Title">
<div><span>&nbsp;</span></div>
<div><span>&nbsp;</span></div>
<div><span>&nbsp;</span></div>
<div><span>&nbsp;</span></div>
<div><span>&nbsp;</span></div>
</div>
<div class="CMenu_Content">
<div class="CMenu_Left">
<div class="CMenu_Left_Title">Stop for:</div>
<div>left_value</div>
</div>
<div class="CMenu_Right">
<div class="CMenu_Left_Title">Learn about:</div>
<div>center_value</div>
</div>
<div class="CMenu_Center">
<div class="CMenu_Left_Title">View move:</div>
<div>right_value</div>
</div>
</div>
</div>
</body>
</html>

解决方案 »

  1.   

    偶也写了一个，不过我是初学这个，不知道哪个更好<html>
    <head>
    <title></title>
    <style type="text/css">
    <!--
    body{border:0px; margin:0px;}.divimg{ width:400px; height:250px; border:0px; margin:0px;}.divMenu{ width:400px; border:0px; margin:0px;}.menu{ width:99px; margin:0px; float:left; background-color:#999999; border-right:1px solid #fff;}
    .menu1{ width:99px; margin:0px; float:left; background-color:#009900;border-right:1px solid #fff;}
    .menu2{ width:99px; margin:0px; float:left; background-color:#336699;border-right:1px solid #fff;}
    .menu3{ width:99px; margin:0px; float:left; background-color:#996699;border-right:1px solid #fff;}
    .menu4{ width:99px; margin:0px; float:left; background-color:#66CC33;}#tab_1{width:400px; height:200px; border:0px solid #333; background-color:#009900; display:block;}
    #tab_2{width:400px; height:200px; border:0px solid #333; background-color:#336699; display:none;}
    #tab_3{width:400px; height:200px; border:0px solid #333; background-color:#996699; display:none;}
    #tab_4{width:400px; height:200px; border:0px solid #333; background-color:#66CC33; display:none;}-->
    </style>
    <script type="text/javascript">
    <!--
    //=======================================================
    //函数名称：getObject(objectId)
    //          参数objectId:控件的ID值
    //函数功能：获得控件的ID值
    //返 回 值：ture(获得ID值) false(获取ID失败)
    //=======================================================
    function getObject(objectId) {
        if(document.getElementById && document.getElementById(objectId)) 
    {
      // W3C DOM
      return document.getElementById(objectId);
        } 

    else if (document.all && document.all(objectId)) 
    {
      // MSIE 4 DOM
      return document.all(objectId);
        }

    else if (document.layers && document.layers[objectId])
    {
      // NN 4 DOM.. note: this won't find nested layers
      return document.layers[objectId];
        }

    else
    {
      return false;
        }
    }function change(menu_num)
    {
      var menuNum = menu_num - 1;
      
      var arr1 = new Array(4);
      arr1[0] = "tab_1";
      arr1[1] = "tab_2";
      arr1[2] = "tab_3";
      arr1[3] = "tab_4";
      
      var arr2 = new Array(4);
      arr2[0] = "menu1";
      arr2[1] = "menu2";
      arr2[2] = "menu3";
      arr2[3] = "menu4";
      
      var img = new Array(4);
      img[0] = "ad-01.jpg";
      img[1] = "ad-02.jpg";
      img[2] = "ad-03.jpg";
      img[3] = "ad-04.jpg";
      
      for ( i = 0; i < 4; i++)
      {
        if (menuNum == i)
    {
      getObject(arr1[i]).style.display = "block";
      getObject(arr2[i]).className = arr2[i];
      getObject("img").src = img[i];
    }

    else
    {
      getObject(arr1[i]).style.display = "none";
      getObject(arr2[i]).className = "menu";
    }
      }
    }
    -->
    </script>
    </head>
    <body>
    <div class="divMenu">
      <img id="img" src="ad-01.jpg" width="400px" height="250px;">
    </div><div class="divMenu">
      <div id="menu1" class="menu" onMouseOver="change(1)">
        menu1
      </div>
      <div id="menu2"  class="menu" onMouseOver="change(2)">
        menu2
      </div>
      <div id="menu3"  class="menu" onMouseOver="change(3)">
        menu3
      </div>
      <div id="menu4"  class="menu" style="border-right:0px;" onMouseOver="change(4)">
        menu4
      </div>
    </div>
     
     <div> 
      <div id="tab_1">
        内容1
      </div>
      <div id="tab_2">
        内容2
      </div>
      <div id="tab_3">
        内容3
      </div>
      <div id="tab_4">
        内容4
      </div>
    </div>
    </body>
    </html>