2015年1月18日

CSS tooltip 進階探討﹍(3) 讓提示框顯示圖片及應用方式

A+
CSS tooltip 系列文前兩篇「安裝懶人包」及「疑難雜症排除」詳細說明了安裝及解決所有問題的方式。而 +Ken CHEN 提出了「CSS tooltip 能否顯示圖片」的問題,答案雖然是可以,但很麻煩,且需要考量的因素不少。

+Mark X 在前一篇留言的觀點很正確:「網頁物件的設計應該建立主從關係;而 Tooltip 就是屬於附屬的效果」一般來說,圖片是可以抓住訪客目光的標的物,絕大多數情況下,應該將其設計為主要內容,而非隱藏在 tooltip 之中。而且行動裝置無法實現滑鼠 hover 效果,所以 CSS tooltip 是個只能在網頁展現的效果。如果真要在提示框之中安插圖片,必須要有很好的理由,證明這圖片不是必要內容、以輔助的作用為主,沒被訪客看到也影響不大

因此,本篇的主題改為討論,哪些情境適合「tooltip + 圖片」的應用,以下提出一些案例參考,並說明語法如何實現。



一、tooltip + 圖片的應用


1. 家樂福官網:預覽標題內容


家樂福官網:http://www.carrefour.com.tw/



進入官網,滑鼠移到上方導覽列後,可預覽這個項目的內容及預覽圖片。如下圖,這是移到「家樂福生活」後的畫面,紅框為提示訊息中的圖片:




左側的導覽列一樣有預覽訊息,如下圖,這是移到「電腦/3C」後的畫面,紅框為提示訊息中的圖片:




雖然以上效果並非 CSS tooltip,不過這些範例代表一種可能的應用方式,當導覽列的文字項目敘述,無法讓訪客瞭解細節、無法決定是否前往這個項目時,「CSS toolip + 圖片 + 文字敘述」可以做出更完整的說明。


2. AT&T 官網:預覽輪播圖片內容


AT&T 官網:http://www.att.com/



AT&T」是目前行動電話服務供應商的世界龍頭,其官網首頁有個輪播圖片設計的很好,請見下圖:




一般輪播圖片設計的索引圓圈,訪客像是玩刮刮樂,不曉得點下去會出現什麼,所以也懶得點。而 AT&T 的五個輪播索引小圓圈,當滑鼠移到對應的圓圈時,就會出現該輪播項目的縮圖及說明文字。就像上圖移到第三個小圓圈,便立即出現這個項目的縮圖及說明文字,加快了訪客決定要點選那個輪播項目的時間



二、CSS 語法說明


看完以上的範例,在設計上「tooltip + 圖片」的應用其實還不錯,只是用 CSS 實現不是最佳解,以下來說明 CSS 的語法。首先必須先瞭解「簡單漂亮的 CSS tooltip 提示框﹍(2) data-title 設定 + 疑難雜症排除」→「二、使用 data-title 屬性 + 換行語法」的內容。

1. 修改 tooltip 內容

CSS tooltip 提示框出現的內容,是由 T 行參數 content 的內容決定的。先利用偽類 :before 產生 tooltip 區塊,接著設定這個區塊的內容 content:

content: attr(data-title);

從該行內容可看出,tooltip 的內容是抓取該區塊 data-title 所存放的內容。如果要改為顯示圖片,那麼必須將以上內容改為:

content: url(圖片網址);

括弧中的圖片網址就是代表填入 http 開頭的網址字串。實際操作一遍就會發現,這麼改的結果,會讓所有套用 tooltip 的區塊一律顯示同一張圖片,覆蓋掉原本每個區塊各自抓取 data-title 來顯示的內容。


2. tooltip 含圖片+文字

如果要讓 content 的內容可同時顯示圖片及文字,可參考「content 使用說明」,合併各種參數使用,例如以下的語法可同時顯示字串、圖片、data-title 內容:

content: "先顯示圖片" url(圖片網址) "再顯示文字" attr(data-title);

如果每個 tooltip 想要顯示不同的圖片,那麼工程將會非常浩大,每個單獨 tooltip 得設定個別的 class 或 id,這些個別的 class 或 id 得各自設定 CSS、設定 tooltip 要顯示的圖片網址。

由於操作麻煩、實用價值不高,就不特別列出完整語法了,想測試的話,經由以上說明應可自行實作出來。



三、用 Javascript 實現「tooltip + 圖片」


在 CSS3 沒有新的參數語法出現之前,要實現「tooltip + 圖片」最方便的方法還是得藉由 js。以「自定義 Title 提示樣式 開啟網頁裡的馬卡龍」→「文字提示安裝方法」為例,請按照該篇步驟,依序進行 CSS、jQuery 的安裝,接著將原本的 js 語法改為以下,可將圖片加入 tooltip:

<script>
$(function() {
$("a,img,button").each(function(e) {
if (this.title) {
var t = this.title;
var src = $(this).attr("data-src");
var x = 30;
var y = -45;
$(this).mouseover(function(e) {
this.title = "";
$("body").append("<div id='tooltip'><img src='" + src + "'/></div>");
$("#tooltip").css({
left: e.pageX + x + "px",
top: e.pageY + y + "px",
opacity: "0.8"
}).fadeIn("slow", "swing")
}).mouseout(function() {
this.title = t;
$("#tooltip").remove()
}).mousemove(function(e) {
$("#tooltip").css({
left: e.pageX + x + "px",
top: e.pageY + y + "px"
})
})
}
});
});
</script>

以上程式碼沒有配合本篇的主題進行優化,純粹 DEMO 之用。紅字的部分為修改 mark 原始碼的內容。藍字的參數可調整 tooltip 的 X、Y 軸距離,以及透明度。


<a href="http://www.wfublog.com/" data-src="http://1.bp.blogspot.com/-vhIWukZmniI/VA3My_ptRfI/AAAAAAAAKM0/DaF4uGRxB0Q/s100/wfublog-logo-8abeb7.png" title="WFU BLOG">WFU BLOG</a>
最後是要顯示「tooltip + 圖片」的 HTML 碼,例如下面這個展示效果用的按鈕,滑鼠移過去可看到效果。可參考以上的 HTML 碼來修改,紅色字串可改為自訂的圖片網址,其他字串請自行修改:






四、文章列表的應用


使用 js 的威力在於可批次處理,例如「文章列表__依日期排列」,在取得資料的過程就能拿到縮圖網址,如果配合以上的 js 碼,就能輕鬆做出「滑鼠移到文章標題時,tooltip 顯示文章縮圖」這樣的效果。

由於本站屬於教學性質,就算文章標題配上縮圖也不一定效果比較好,所以就沒另外弄範例了。不過如果是「美食、旅遊、攝影」等性質的文章列表,或許「文章列表 + tooltip + 圖片」就是個可以嘗試的構想了,相信預覽圖片的美味食物、壯麗景觀可大大增加訪客點擊的誘因

有了本文的這些範例,希望能拋磚引玉,讓讀者對於 tooltip 的設計有更多應用與延伸。


CSS tooltip 系列文章:

3 則留言:

  1. 原來如此,難怪先前會說如此處理會很麻煩= =

    回覆刪除
  2. Wayne 富有研究精神,好厲害!

    回覆刪除
    回覆
    1. @ken, 沒錯~要方便還是得回到 js

      @mark, 還好有你現成的 code 可以套 ^^

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。