> > Mootools Demos - Tips

Mootools Demos - Tips

Mootools Demos - Tips
移過圖片與連結浮現提示說明的效果
和ㄧ般的提示說明相比之下精緻許多

mootools.js 是 Mootools Demos 的必備通用檔案
 請先下載並上傳到自己的空間
.不可同時使用兩種效果
.可重覆使用同一效果

套用到 HTML 與 Blogger
(方法一樣 不需做個別調整)
1.下載 mootools.js
 上傳到自己的空間
 然後在 <head> 跟 </head> 裡插入以下程式碼
 ( Blogger 則是找到 </b:skin> 跟 </head> )

<script type="text/javascript" src="上傳到自己的空間的 mootools.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
/* Tips 1 */
var Tips1 = new Tips($$('.Tips1'));

/* Tips 2 */
var Tips2 = new Tips($$('.Tips2'), {
initialize:function(){
this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);
},
onShow: function(toolTip) {
this.fx.start(1);
},
onHide: function(toolTip) {
this.fx.start(0);
}
});

/* Tips 3 */
var Tips3 = new Tips($$('.Tips3'), {
showDelay: 400,
hideDelay: 400,
fixed: true
});

/* Tips 4 */
var Tips4 = new Tips($$('.Tips4'), {
className: 'custom'
});
});
</script>
</b:skin>
套用到 Blogger 的程式碼插入處
</head>

2.請先下載 bubble.png
 上傳到自己的空間之後
 然後在 <head> 跟 </head> 裡插入以下 CSS 程式碼
 若要更改 .tool 樣式的寬度
 必須連同圖片一起修改
<style type="text/css">
<!--
.tool-tip {
color: #fff;
width: 139px;
z-index: 13000;
}

.tool-title {
font-weight: bold;
font-size: 11px;
margin: 0;
color: #9FD4FF;
padding: 8px 8px 4px;
background: url(上傳到自己的空間的 bubble.png) top left;
}

.tool-text {
font-size: 11px;
padding: 4px 8px 8px;
background: url(上傳到自己的空間的 bubble.png) bottom right;
}

.custom-tip {
color: #000;
width: 130px;
z-index: 13000;
}

.custom-title {
font-weight: bold;
font-size: 11px;
margin: 0;
color: #3E4F14;
padding: 8px 8px 4px;
background: #C3DF7D;
border-bottom: 1px solid #B5CF74;
}

.custom-text {
font-size: 11px;
padding: 4px 8px 8px;
background: #CFDFA7;
}
-->
</style>

3.選擇所要呈現效果的程式碼
 Tips 1 圖片說明 - 圖片式直接浮現
<img src="圖片網址" alt="替代文字" class="Tips1" title="提示說明標題 :: 提示說明" />

 Tips 2 圖片說明 - 圖片式淡入淡出浮現
<img src="圖片網址" alt="替代文字" class="Tips2" title="提示說明標題 :: 提示說明" />

 Tips 3 連結說明 - 圖片式直接浮現
<a href="連結網址" onclick="return false;" class="Tips3" title="提示說明標題 :: 提示說明">連結名稱</a>

 Tips 4 連結說明 - 色塊式直接浮現
<a href="連結網址" onclick="return false;" class="Tips4" title="提示說明標題 :: 提示說明">連結名稱</a>

Mootools Demos - Tips 在 Blogger 執行的結果請參見 Page Lab : Tips test
<!--
雖然替代文字與提示說明效果相近
但卻是不同的屬性

alt 属性(替代文字)

主要是圖片尚未顯示或是無法顯示時使用的文字替代形式
所以圖片無效時會出現
有的人誤認此屬性為額外說明
所以也將其設置在文字連結上或是當做圖片的補充說明之用
不過除了 IE 瀏覽器和早期的 Netscape 4(windows版本) 之外都不會出現

title 屬性(提示說明)

為圖片或文字連結提供補充說明的訊息
-->