BoxOver 特效輕易讓文字、圖片顯現酷炫的提示訊息


註:官網已經失效,但我有提供備份檔案可以下載,本文仍然有效

BoxOver」特效中文我不知道翻什麼,在Google的簡、繁體網頁中目前找不到相關的名詞,索性就不翻了。此特效可以應用在文字、圖片上,使用方法也蠻簡單的,個人覺得還不錯,推薦給大家試用看看;請先到把滑鼠移到下面方塊中或至「官方Demo」網頁去體驗一下吧特效。註:若本文的Demo無法正常執行,應該是Javascirpt無法正常運用的關係,請自行下載原始檔觀看範例展示,檔案內有更豐富的Demo項目

把滑鼠移到框框上體驗特效

(Update:060729)目前最新的版本是2.1,請「按此下載


準備工作

  1. 將檔案解壓縮,然後把檔案內的「boxover.js」上傳到網路空間(硬碟)中
  2. <script src="這裡填上boxover.js的位址"></script>
    把上面這一段語法,拷貝到「適合的位置」,以Yam為例,你可以放在 Blog管理頁面–>Blog基本設定–>「說明」欄位中。

使用方法
此特效是對「title」這個屬性動手腳,所以只要在可以加「title」屬性的地方,應該都可以用來呈現特效,以下是官方完整的語法:

title="para1=[value1] para2=[value2] para3=[value3]……"

para1、para2…可以套用不同參數,但最簡單且最常用的是「header」、「body」,為求簡單起見,這邊單純只介紹這二個參數的用法,若想試用更多的參數,官方網站有詳細的「列表」。

簡化後的語法如下(紅色部分,是你可以修改的):

title="header=[標題名稱] body=[文字內容]"


以下舉一些實例來說明,請特別注意「title」、「header」、「body」這些地方的差異:

文字範例:原始語法如下

改成特效的語法:

呈現的效果如下:

把滑鼠移到文字上

Update:060729
上面是使用DIV的語法調出來的,其實比較不方便,若要應用在文字的話,用SPAN的語法比較好,這裡介紹一個參數「fixedabsx」,這個參數主要是指定特效視窗出現的位置(X軸),此參數可省略,其範例如下:

呈現的效果如下:
把滑鼠移到文字上

圖片範例:原始語法如下

改成特效的語法:

呈現的效果如下:

PS:謝謝網友「AFala」提供BoxOver的資訊