Richard Anderson

flaptrapsArt
Art of Richard Anderson (a.k.a. flaptraps)
flaptraps art

David Ho(何維正)

<the art of david ho>

jQuery Smart Tooltips

jQuery Smart Tooltips - Part 1
jQuery Smart Tooltips - Part 2
jQuery 為核心的工具提示功能
檔案小
使用方式也簡單
只要在連結中加入 title 屬性即可

<!--
如果能夠像 Mootools Demos - Tips 那樣
可分為說明主題與說明內容就更完美了
-->

套用到 HTML 與 Blogger
(方法一樣 不需做個別調整)
1.請先下載 jquery.smart-tooltips 檔案
 由於是以 jQuery 為核心
 所以同時也要記得引用 jQuery
 目前最新的版本是 jQuery1.3.2
 不過在此我使用的版本是 jQuery1.2.6
 然後在 <head> 跟 </head> 裡插入以下程式碼
 ( Blogger 則是找到 </b:skin> 跟 </head> )
<script type="text/javascript" src="上傳到網路空間的jquery-1.2.6.pack.js" ></script>
<script type="text/javascript" src="上傳到網路空間的jquery.small-tooltip.js" ></script>
<!--
下面的檔案是一樣的
只是檔案大小有所不同
請擇一使用
jQuery Regular (97.8 kb)
jQuery Minified (54.5 kb)
jQuery Packed (30.3 kb)
-->

2.在 <head> 跟 </head> 或是 CSS 樣式檔案中插入以下 CSS 程式碼
 然後修改成自己想要的 CSS 樣式
.tooltip{
position:absolute;
z-index:999;
left:-9999px;
background-color:#dedede;
padding:5px;
border:1px solid #fff;
width:250px;
}

.tooltip p{
margin:0;
padding:0;
color:#fff;
background-color:#222;
padding:2px 7px;
}

3.在連結內加上 title 屬性即可
<a href="連結網址" title="說明文字" ></a>

金亨泰(Hyung Tae Kim)

Hyung-taekim.org: the most comprehensive fan-composed gallery on the Web

target="_blank" & target="_new" & rel="external"

原本想趁著加上 jQuery Smart Tooltips 所需要的 title 屬性時
把文章的 target="_blank" 改成 target="_new"
後來想一想還是決定改成 rel="external" 好了

<!--
原本會用 target="_blank"
是由於個人在使用習慣上喜歡開很多新視窗
我知道有些人並不喜歡
但是文章有點多
所以就懶了
沒想到現在文章更多了才要來改...
-->
target="_new" 與 target="_blank"
這兩個一樣是開新視窗
但有著些許的不同
而 rel="external" 則沒有任何作用
以下是簡略的說明

target="_blank"

在開啟新視窗的同時不會賦予名稱
按下多個 target="_blank" 連結時
也將打開多個新視窗

target="_new"

在開啟新視窗的同時則會賦予一個名稱("_new")
所以按下多個 target="_new" 連結時
依舊會在同一個新視窗

rel="external"

只是表示連結是一個不屬於自身網站的外部連結而已
但也有的人利用 JavaScript 與這個屬性
達成開啟新視窗以通過 W3C 的檢驗
請參考網路上關於 rel="external" 開新視窗的教學
<!--
不過個人不建議這樣做
因為 W3C 會這樣規定
其實就是想把主權還給使用者
因為如果使用者要開新視窗
那麼他們可以透過瀏覽器的選項來開啟
而不應該是由網頁設計者來幫使用者決定
畢竟擅作主張幫使用者開啟新視窗帶有著強迫性
-->
<!--
但有些時候新開視窗也是不得不的選擇
譬如說
填寫表單時的 help 怕使用者按下連結時
忘了開新視窗或是不小心誤按
這樣一來填寫的資料就不見了之類的
所以有人建議若是會另開視窗的連結
後面要用一個圖示來做為標示
這個圖示有許多不同變化
大致上會類似下方的圖
new window icon
有兩個表示視窗的小方框交疊(前後順序不一定)
或是小方框內有個往斜上的箭頭
可以在重視使用者體驗的網站上看到
-->

Alex Broeckel

Alex Broeckel Concept Art and Illustration

Luis Royo

Luis Royo's Official Website

RuanJia(阮佳)

ruanjia.com|3DGallery|2DGallery|Sketch
CGPortfolio - Jia.Ruan


Reset song by ZARD