TShopping

標題: 濾鏡變換連結說明 [打印本頁]
作者: woff    時間: 2008-9-23 20:15
標題: 濾鏡變換連結說明
步驟一、複製程式碼至<head></head>之間
  1. <style type="text/css">
  2. .box {font-size:9pt; font-family:tahoma; color:#000000; border:1 solid #99CC00; background:#C1E7AB; padding:5;}
  3. </style>
  4. <script language="JScript">
  5. /******** http://galaxy.channeli.net/bio028/ ********/
  6. var n = (document.layers) ? 1:0;
  7. var ie = (document.all) ? 1:0;
  8. function overTip(boxObj) {
  9. if (ie) {
  10. boxObj.style.visibility = "visible";
  11. boxObj.filters.item(0).stop();
  12. }
  13. }
  14. function outTip(boxObj) {
  15. if (ie) {
  16. boxObj.style.visibility = "visible";
  17. boxObj.filters.item(0).transition = 23;
  18. boxObj.filters.item(0).apply();
  19. boxObj.style.visibility = "hidden";
  20. boxObj.filters.item(0).play();
  21. }
  22. }
  23. </script>
複製代碼

步驟二、複製到網頁<body></body>之間
  1. <span class="tipElm" onMouseOver="overTip(kiss)" onMouseOut="outTip (kiss)">
  2. <a href="#">
  3. 將重複滑鼠移至這裡看效果</a>
  4. </span>
  5. <div id="kiss" class="box" style="position: absolute; z-index: 20; width: 259; filter: revealTrans(duration=1); visibility: hidden; left: 16; top: 130; height: 68">
  6. 這裡是說明方塊.除了文字來可以放圖檔喔!<img border="0" src="img/logo-2.gif" width="88" height="31">
  7. </div>           
複製代碼

修改事項：
  • 步驟一用CSS設定說明區塊的文字大小font-size:9pt;文字字型 font-family:tahoma;文字色彩 color:#000000; 框線色彩border:1 solid #99CC00; 背景色彩background:#C1E7AB; 區塊四邊空白padding:5
    步驟二duration=1濾鏡速度.數值越大速度越慢.不建議修改
  • 增加連結和步驟二相同但必須用不同的ID名稱.例如以下橘色部分
    <span class="tipElm">
    <a href="#">
    將重複滑鼠移至這裡看效果</a>
    </span>
    <div id="kiss" class="box" style="position: absolute; z-index: 20; width: 259; filter: revealTrans(duration=1); visibility: hidden; left: 16; top: 130; height: 68">
    這裡是說明方塊.除了文字來可以放圖檔喔!</div>
作者: ccok123    時間: 2012-3-1 00:46
樓上的稍等啦  
作者: airingge    時間: 2012-7-30 00:45
嘿嘿  
作者: 8077616717    時間: 2012-7-30 00:52
好人一個 推推
作者: btgztwao    時間: 2013-6-12 03:51
不错， 了解一下。



歡迎光臨 TShopping (http://www.tshopping.com.tw/) Powered by Discuz! X3.2