怎么做感应标签页？[已经答复]

无艺

最近在弄院站，要用到“感应标签页”，例如下面的样子：

 

 

当光标移到“设计欣赏”上，其下的内容会显示。

 

麻烦各位高手大大了。谢谢。

 

jokke

我发一段代码 给你  加上了详细说明啊 你自己看看 不会的在问我

 

 

 

/******************************************
 做感应标签页JS代码 以下部分加在index.htm中的
   <!--
   <?php
   print <<<EOT
   -->
   后
*******************************************/

<SCRIPT language=javascript>
    function show_intro(pre,pree, n, select_n,css) {
        for (i = 1; i <= n; i++) {
            var intro = document.getElementById(pre + i);
   var cha = document.getElementById(pree + i);
            intro.style.display = "none";
            cha.className=css + "_off";
            if (i == select_n) {
                intro.style.display = "block";
  cha.className=css + "_on";
            }
        }
    }
</SCRIPT>

/******************************************
  触显CSS代码 以下部分加在css.css中
  图片大小：62×28 PS  都需要背景图片的 就是文字导航的背景图片 JOKKE
*******************************************/

.hot_off {
   BACKGROUND: url(ty1.gif) no-repeat;
   width:62px;
   height:18px;
   padding-top:10px;
}
.hot_on {
   BACKGROUND: url(ty2.gif) no-repeat;
   width:62px;
   height:18px;
   padding-top:10px;
}

/******************************************
  页面代码，以下部分加在index.htm中
*******************************************/

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="dragTable">
  <tr>
    <td class="head">
      <h3 class="L"></h3>
        <div class="hot_on" id=tzm1 onmouseover="show_intro('ytld','tzm',4,1,'hot')" style="float:left;">
          <a href="连接地址或则调用地址">就想游设计</a></div>
        <div class="hot_off" id=tzm2 onmouseover="show_intro('ytld','tzm',4,2,'hot')" style="float:left;margin-left:6px;">
          <a href="连接地址或则调用地址">就想游城市</a></div>
        <div class="hot_off" id=tzm3 onmouseover="show_intro('ytld','tzm',4,3,'hot')" style="float:left;margin-left:6px;">
          <a href="连接地址或则调用地址">就想游博客</a></div>
        <div class="hot_off" id=tzm4 onmouseover="show_intro('ytld','tzm',4,4,'hot')" style="float:left;margin-left:6px;">
          <a href="连接地址或则调用地址">就想游电台</a></div>
      <h3 class="R"></h3>
</tr>
   <tr>
     <td colspan="3" class="middle">
      <div id=ytld1 align="left">$label[a002]</div>
      <div id=ytld2 align="left" style="DISPLAY: none">$label[a003]</div>
      <div id=ytld3 align="left" style="DISPLAY: none">$label[a004]</div>
      <div id=ytld4 align="left" style="DISPLAY: none">$label[a001]</div>
</td>
  </tr>
   <tr>
    <td colspan="3" class="foot">
      <h3 class="L"></h3>
      <h3 class="R"></h3></td>
  </tr>
</table>

/******************************************
  代码说明
*******************************************/

    此代码可以在一个网页中设置多个触显。
    设置方法：
    只需要重新命名页面代码中的“ytld”、“tzm”和“4，1”（名称自己定）。
    如：要设一个五显触显：
    只需将“ytld”、“tzm”重新命名，并将“4，1”“4，2”“4，3”“4，4”，
改为“5,1”“5,2”“5,3”“5,4”“5.5”，就可以了。
    注意其中的“tzm1”“ytld1”也要做相应改变。

无艺

太感谢Jokke你了，o(∩_∩)o...哈哈，有你在还有什么不会的？:(

yang

顶起...:( :( :( 太棒啦