*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
融媒體Wix教學
數位影音敘事專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
《法華經》的思
Unsplash圖像集
我的給大學生書單

2012年5月17日 星期四

滑鼠移到文字或圖片上,跑出說明文字

title="說明性文字"


請把滑鼠移到我

多媒體文本寫作,寫作元素之間互動性,
是寫作者要常放在心上的。
互動性,並不只是好玩而已,那真的不是
挺重要的。而是透過寫作元素的互動,
讓資訊的呈現更為豐富。這才是「心法」。
這是因為螢幕閱讀的時代來了。

這次我們要處理,把滑鼠移到某一文字或圖片,會跑出更多的說明性文字。 這是常用的技法,也是基礎性的互動文本練習,即一般所說的 tooltips 功能。這一語法就是 title="xxx" 。


文字互動說明的語法:

<span title="世新新聞系多媒體新聞授課老師">李明哲</span>


結果
李明哲

說明
我們可以看到,在「李明哲」這三個字的前後有加上語法。
<span title="xx">李明哲</span>。
這樣,滑鼠移到這三個字時,就會跑出說明文字。


圖片說明性文字的語法:

<img title="夏天的花朵等待著陽光" src="http://farm8.staticflickr.com/7065/6868049716_15fc49cb6c_z.jpg" width="320" />


結果


說明
同樣的,在<img src="xx"/>的裡面,加上相同的語法 title="xxx",
當滑鼠移到圖片時,就會有說明性文字跑出來。<img src="xx"/>這還記得嗎?
這是嵌入圖片的語法。


好了,有同學會想問:
Q:如果說明文字很長,我想段行,那要如何來處理呢?
A:這也很簡單,請看下面說明:


也就是,在title 裡面寫文字時,你也直接按下 enter 來分行,這樣就可以形成斷行的文字呈現樣態。


補充說明:
title="xxx" 這一語法可以和許多 html 或是 css 語法相互配合。除了文字和圖片語法外,例如<div title="xxx"...>,<a href="xxx" title="xxx" ... >,<embed title="xxx" ... > 亦可。


超快速上手:使用kompozer




更多有趣、好看的tooltips式的互動補充說明做法:

一、請參考Hint.css(滑鼠請移入)。

二、請參考Tooltipster(滑鼠請移入)。



2 則留言:

  1. 老師您好:滑鼠移到文字或圖片會跑出說明文字。
    但我希望除文字外還可跑出很多圖片,每張圖片還可以超連結。列如滑鼠移到,跑出15學系圖片,點圖片,跳到學系網頁。請問如何處理。

    回覆刪除
  2. 前留言滑鼠移到世新大學,世新大學有括弧被自動刪除了

    回覆刪除