*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
布落格寫作
數位影音敘事專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
flickr圖像集

2015年6月12日 星期五

快速補充資訊的tooltips(二):圖文格式



Tooltips這種模式的互動機制,在於速迅的為某一文本媒材增加補充「小額量的」訊息。
這次使用的Tooltipster模組,可以快速的形成「圖、文式」的補充資料。作法很簡單。



黑格爾的《小邏輯》開始讀出味道之後,居然是一種苦讀的心情在催促著自己,彷 若重回高三要拼聯考的時光。是什麼力量呢?一種「理性」思維的動 力,燒起那團團的熱情之火。很難想像,那麼嚴格的邏輯的推論之文,倒是一字一字地鼓風起火焰之燃。這是黑格爾的力道。一種用理性撼動人的力道。《小邏 輯》是談「本體論」的「邏輯」。邏輯被他談得是一種具體性的生命過程之邏輯。




jQuery 程式碼:

<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>

<script>
$(document).ready(function() {
$('#id061201').tooltipster({
content: $('<span><img style="width: 192px;" src="https://lh3.googleusercontent.com/zvR-7E4XU2ZMXY_6wFpFp0I_iknhuXSdIeUuZScHn27E=w278-h302-no" /> <br><strong>黑格爾及其 《小邏輯》一書。</strong></span>'),
position: 'left',
offsetX:0 ,
offsetY: 30
});
});
</script>

語法說明:
一、要被滑入的物件,記得要設id。綠色字體者。
二、請寫入圖像網址、大小以及圖說。紅色字體者。
三、設定tooltips出現的位置以及位移的量(正、負數字)。藍色字體者。
四、位置有八種:right, left, top, top-right, top-left, bottom, bottom-right, bottom-left 。





影音教學:






更 多tooltips的教學內容:

一、快速補充資訊的tooltips(一):通用格式 ,clikc here
二、小額資訊量的快速互動補充:純CSS互動範例,click here
三、超快速、好用的補充說明互動法:Hint.css Tooltips,click here




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>








2015年6月1日 星期一

快 速簡單又有變化: 標題內文式互動開合



快 速簡單又有變化
content slider / 互動式文字列表/摘要內文

這次的模組使用「表 格」來設計,在使用操作上更為簡單。一個更為便利的使用特色在於:可以用來處理互 動文字列表的需求,也可以用來表現互動摘要 /內文式的互動寫作呈現。
使用表格!

可以快速、直覺以
數位文本寫作思維
來對文本進行寫件布局。


這是標題/摘要(一)   [click]
這是內文。這是內文。
這是內文。這是內文。
這是內文。這是內文。
這是內文。這是內文。
這是內文。這是內文。
這是標題/摘要(二)   [click]
這是內文。這是內文。
這是內文。這是內文。
這是內文。這是內文。
這是內文。這是內文。
2017出版。本書更深刻地探討數位文本的文本理論。
購買:五南書局



jQuery的互動程式組,請放置於<haed></head>之間或<body>之後:

<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">


<script>
$(function() {
$('#ta052901').find('>tbody >tr:even >td').click(function() {
$(this).parent().next().children().toggle('slide', {direction: 'left'}, 800);
});
});

</script>

說明:
一、紅色字體為表格內所設的id。
二、藍色字體為滑動的方向,可設 up / down / left / right ,四選一。
三、褐色字體者,為滑動速度,1000是一秒。



CSS的語法,請放置於<haed></head>之間或<body>之後:

<style>
/* 標題列的TD之CSS,請放置於TD */
.title0529 {
font-family: Verdana, '微軟正黑體';
font-size: 1.4em;
font-weight: bold;
line-height: 2;
text-align: left;
letter-spacing: 0.1em;
padding-left: 5px;
cursor: pointer;
}

/*標題背景色互動*/
.title0529:hover {
background-color: rgba(152, 152, 152, 0.4);
}

/* 內文列的TD之CSS,請放置於TD */
.word0529 {
font-family: Verdana, '新細明體';
font-size: 15px;
font-weight: normal;
line-height: 1.8;
text-align: left;
letter-spacing: 0.1em;
padding-left: 5px;
}

/* 讓內文列消失之CSS,請放置於TABLE */
.tabdispnone >tbody >tr:nth-child(even) >td {
display: none;
}
</style>



教學影音: