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

2015年6月6日 星期六

快速補充資訊的tooltips(一):通用格式



互動的功能之一,在於快速補充資訊。tooltips這種功能,是常用的技法。學會使用這一互動模組, 可以有多種的變化形式來處理資訊補充的方式。這次是使用Tooltipster這 一互動模組。




這是DIV裡面的內容,可以是文 字、 圖像、 影音和所有html的格式資訊。

這是圖像的tooltips說明。
這是表格TD裡面的資訊。表格的格子內容也可 以使用 tooltips。
表格文字居中。



通用式範例一的快速 語法表:
DIV
<div  class="tooltipsa1" title="這是通用式的tooltip說明。"  ...> xxx</div>
圖像
<img  class="tooltipsa1" title="可以重覆使用在很多地方。"  .../>
表格格子
<td  class="tooltipsa1" title="而且呈現的格式都相同。"  ...> xxx</td>
表格本身
<tabel class="tooltipsa1" title="這個表格本身的說明。"  ...> xxx</table>
youtube影音
<iframe class="tooltipsa1" title="youtube影音,即iframe,也可以用。"  ...> </table>



教學影音:




共用的必要程 式碼,請置於<body>之後:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" type="text/css"
href="http://lmcdwriting.org/userfiles/lmcsilver20121007/tooltipster-master/css/tooltipster.css">
<script type="text/javascript"
src="http://lmcdwriting.org/userfiles/lmcsilver20121007/tooltipster-master/js/jquery.tooltipster.min.js"></script>




通用範例一的CSS以及 jQuery,請放置於<body>之後:
<style>
/* 創製自己的class,取名為 "my-theme01" */
.my-theme01 {
border-radius: 5px;
border: 2px solid #000;
background: #4c4c4c;
color: white;
}
/* 使用這個設定進一步更改文字細節 */
.my-theme01 .tooltipster-content {
font-family: Arial, '新細明體';
font-size: 15px;
line-height: 16px;
padding: 8px 10px;
letter-spacing: 0.1em;
}
</style>

<script>
$(document).ready(function() {
$('.tooltipsa1').tooltipster(
{
position: 'top',
theme: 'my-theme01'
});
});
</script>

使用說明:
一、可以調整tooltips的出現位置,即position:,改藍色字體處,共有right, left, top, top-right, top-left, bottom, bottom-right, bottom-left,共八個位置。
通用範例二的CSS以及 jQuery,請放置於<body>之後:
<style>
/* 創製自己的class,取名為 "my-theme02" */
.my-theme02 {
border-radius: 5px;
border: 2px solid gray;
background: #93FF93;
color: red;
}
/* 使用這個設定進一步更改文字細節 */
.my-theme02 .tooltipster-content {
font-family: Arial, '新細明體';
font-size: 15px;
line-height: 16px;
padding: 8px 10px;
letter-spacing: 0.1em;
}
</style>

<script>
$(document).ready(function() {
$('.tooltipsa2').tooltipster(
{
position: 'left',
theme: 'my-theme02'
});
});
</script>








2 則留言: