[omi24] ZakFong: CSS – 浮動廣告

20120109

CSS – 浮動廣告

說明

最近客戶要求網頁上有浮動廣告，這個理論上是小問題，因為以前早就寫過一支。但是沒想到臨時卻找不到Code，於是先上網找找。

找到了Code，但是掛在單頁HTML下可以跑，改成ASPX卻不能跑了。我正納悶是怎麼一回事，原來是因為Visual 2005之後ASPX最上面的聲明是遵循XHTML 1.0 Transitional。

  1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

而不是舊有Visual 2003的 HTML 4.0。

  1: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

所以不支援語法中的「onscroll」事件等等。

解決方法

解決方式如下→

1. 改聲明

2. 改用CSS

3. 改Code

用CSS來處理，比JavaScript簡單得多，唯一一個小小的缺點就是，沒有動態移動廣告的Feel。不過瑕不掩瑜，直接看要移動的圖層html碼如下

  1: <div id="divFadR" style="position:fixed;top:100px;left:1000px;visibility:visible;">
  2:   <table>
  3:     <tr>
  4:       <td valign="top">
  5: <a href="http://www.zakfong.com/" target="_blank"><img border="0" src="http://www.zakfong.com/test.png" alt="Test" width="100" height="100" vspace="5" /></a>
  6:       </td>
  7:     </tr>
  8:   </table>
  9: </div>
 10: