數位時代的寫作,是一種新形態的文本表達模式!
首頁
初學者技能教案專區
google Meet遠距上課技能
javascript互動文本寫作
融媒體Wix教學
網路新聞寫作:HTML&CSS
新聞影音剪輯:premiere
匯流寫作基模知識:gravit
基礎影音編輯:shotcut
基礎圖像編輯:GIMP
匯流新聞專題寫作
影音新聞製作與剪輯(上課用)
基礎新聞攝影(上課用)
數位排版/敘事(上課用)
西洋哲學史導讀
老子探義導讀
《論語》小談
《法華經》的思
品嚐《華嚴經》
Unsplash圖像集
Pexels 圖像集
我的給大學生書單
傳播理論/研究

2013年12月11日 星期三

超快速、好用的補充說明互動法:Hint.css Tooltips








除了可在「編輯物件」的上、下、左、右這四個方向跑出說明文字外,同時也可以再變化顏色。Hint.css 預設了四組顏色,分別是「錯誤」的紅色「警告」的橙色「資訊」的藍色,以及「成功」的綠色
文字、DIV、表格的TD以及圖片,都可以作用。請參考教學影音。



影音教學




1.將下列css程式置放於<head>xxx</head>之間或是<body>之後。使用KompoZer編輯器,最好置於< body>之後:
<link rel="stylesheet" href="http://lmcdwriting.org/userfiles/lmcsilver20121007/hint.css-master/hint.css"></link>
2.使用 Html 語法:
<span class="hint--top" data-hint="從上邊跑出說明文">上</span>
<span class="hint--bottom" data-hint="從下邊跑出說明文">下</span>
<span class="hint--left" data-hint="從左邊跑出說明文">左</span><br>
<span class="hint--right" data-hint="從右邊跑出說明文">右</span>
3.加入背景色,請把下列代碼加入於class="xxx"裡面:
紅色:hint--error
橙色:hint--warning
藍色:hint--info
綠色:hint--success
example: class="hint--top hint--error",就以紅色背景在上方↖跑出來。
4.圖片的補充說明語法:
<span class="hint--top" data-hint="圖片的補充說明"><img src="xx"></span><br>





原始語法出處:Hint.css

2 則留言: