自定義 Title 提示樣式 開啟網頁裡的馬卡龍

3856

Preview Summary

website Reviews : 49 5.0

許多新式設計的網頁會使用圖示取代文字說明的功能,「 title 提示 」屬性再度利用翻新。這種正確引導與描述該連結的功能,一般稱為「Tootip」的設計。例如在 a 標籤當中附加 title 提示 當作文字描述,當滑鼠指向該連結時會顯示一小塊區域 HTML title 提示 。

適切運用提示功能可提升使用者體驗,請網站訪客品嚐愛心甜點

隱藏在網頁裡 HTML 屬性

在 HTML 結構中有個「title」的屬性,是網頁發展以來的元老級元素;但較少人願意去運用它。例如在 <a> 標籤當中附加 title 的文字描述當作提示,當滑鼠指向該連結時會顯示一小塊提示區域。不過由於它的樣式很「古老」;反應時機也慢,又因為觸碰螢幕的出現讓「title」這類隨著滑鼠動作的屬性立場變得很尷尬,所以更少人記得它的好處。文字提示樣式在使用上不迫切,因此我將它的修改排程放到後面。

HTML Title 用法

首先有些要點應該先澄清。

  • 「title」對於搜尋優化並沒有幫助,它純粹是提示作用。
  • 當連結標示「title」提示時,無助於輔助閱讀器,語音系統是不會將它讀出來的。
  • 並非僅有 <a> 標籤才會使用到「title」,其實大部分的標籤都能附加。

既然它沒什麼用處,乾脆省略不就好了,何必使用它呢?
不知道你有無這樣的經驗?當你造訪一個陌生網站時,你可能不會知道裡面有哪些功能,或是超連結設置是否清楚?那麼你是否希望網站裡除了主要文章外,尚且佈滿一堆說明引導文字而可能分散主題的注意力?

圖示說明的設計

許多新式設計的網頁會使用圖示取代文字說明的功能,這對於經常接觸各式網站的人來說,這是常見的事。受到行動裝置桌面及 APP 的影響,逐漸接受以圖代字的設計,但這類網頁設計並非所有人能夠明白的網路默契。從另一角度來看,一個寫得非常明白又符合 SEO 的文義超連結不一定是最符合使用者體驗的方式,至少在有限的行動網頁視覺上非常臃腫。

待命狀態的 Tooltip

為了平衡圖文提示狀態,「title」屬性再度利用翻新。這種正確引導與描述該連結的功能,一般稱為「Tootip」的設計。可以在 jQuery UI Bootstrap 找到相關運用。它可以不破壞頁面的整齊簡潔,僅有訪客準備點入連結區域時才會像恐怖箱一樣跳出來嚇人告知。這次文章不是介紹 jQuery UI 的使用,而是直接利用原本的 title 屬性,以簡單的 JavaScript 替換它的樣式,同時也省下修改舊文章添加 id 與參數的時間;只要原本有附加「title」屬性即可顯示。

之前我介紹過 Bootstrap 的提示效果,與 Tooltip 的差異在於小燈泡是一種「Click」的動作,需要點擊它才有反應;在行動裝置也適用。Tooltip 則是滑鼠動作,經過了就有反應;相當於在行動裝置上只有「Click」動作。

文字提示安裝方法

CSS

將以下樣式寫入樣式表。#tooltip 是種通稱命名,可以另外命名。裡面的參數修改就不細說了,後續會附上示範檔案當作修改練習。

#tooltip {
background: #555;
color: #FFF;
text-align: center;
margin-right: 10px;
border: 1px solid #FFF;
border-radius: 3px;
box-shadow: 0 0 5px #666;
padding: 3px 15px;
font-size: 14px;
line-height: 36px;
position: absolute;
z-index: 999;
display: none;}
jQuery

</head> 之前需要使用 jQuery 函式庫,無須重複申裝。詳見: 如何使用 jQuery 版本

<script src='https://code.jquery.com/jquery-latest.min.js'></script>
JavaScript

將以下程式碼寫入 </body> 之前。
Title 一般的顯示時機在於連結標籤 <a>,這種方式可以自訂你想要顯示效果的任何標籤,例如圖片提示 <img>(雖然很少人這樣使用),或是按鈕提示 <button>

<script>
$(function(){$("a,img,button").each(function(e){if(this.title){var t=this.title;var x=30;var y=-45;$(this).mouseover(function(e){this.title="";$("body").append('<div id="tooltip">'+t+"</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>
HTML

撰寫文章時,文件編輯器可以輸入 title 的值(文字),或是將 title=”文字提示” 寫入 HTML,例如標籤 a 附加 title:

<a href="http://markxii.com" title="歡迎造訪我的網站">馬克十二</a>

DEMO A

特定標籤

當我需要設定某個特定標籤以區別其他的 Tooltip 時應該如何修改?

  • 另設一組 id 如:#tooltip-2
  • 修改另一組 CSS 樣式
  • 另設一組鮮少使用的標籤以區隔

例如我可以自訂一個標籤叫做「dog」,雖然在 CSS 定義裡沒有這個標籤,但瀏覽器仍會識別。修改請參閱 DEMO A 的設置方式。

CSS
#tooltip-2 {
background: #ddd;
color: #000;
...
}
JavaScript
<script>
$(function(){$("dog").each(function(e){if(this.title){
... 
});
</script>
HTML

不會有連結動作,滑鼠移入時只會出現提示。

<dog title="歡迎造訪我的網站">馬克十二</dog>

馬卡龍的世界

只要您搜尋「Tooltip」就可以找到許多樣式與程式碼的內容當作參考,一般樣式為方塊區域,這個段落主題是改寫成漂浮氣球的「馬卡龍」樣式。由於範圍有限,適合簡短提示的特殊用途,例如 <div> 區塊幾乎不會有人將它附加提示;但這個文字提示功能對 div 標籤非常實用。
在 JavaScript 的標籤部份,寫入 div 這個標籤元素,其餘參考範本二號。這一段章重點並不是樣式教學,而是一點配色心得。

DEMO B

網頁配色參考

當我們要對網頁配色設計時,可以參考一些雜誌配色或室內裝飾、攝影專輯等作品,甚至一些調色特殊的點心也能當成參考。網頁元素的配色主要參考主色調作選擇,一個最簡單的二分法:淺色調與深色調。對 Tooltip 來說,「淺色版面 + 深色提示」,或「深色版面 + 淺色提示」這兩組搭配再簡單不過。近年來網頁配色從粉彩系傾向濁色調發展,但也不一定,我認為配色能反映作者個性比較重要。

Flat Colors

配色趨勢可以搜尋關鍵字「Flat color」,你可以找到流行又耐看又適合高顯像螢幕的配色。如果你拿不定主意,以下我製作了一些「馬卡龍色系」配色,複製下方 HEX – 16 進位色碼 – 「#AABBCC」,請參考。版面採取復古暗色系可以嘗試任選深淺配色。

一般而言,「Tooltip」這類設計元素的配色較少使用極厚重的低明度或純色高彩色票。

範例下載

做了簡單的示範檔案讓網友先行配色定案後再修改至網頁。
請開啟密碼區下載,密碼為網站網址。

49
· · ·