*YouTube 教學頻道* *影像布落格*
首頁
初學者技能專區
布落格寫作
小世界習作網
《台灣立報》

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://newsweek.shu.edu.tw:8080/lmc201410/tooltipster-master/css/tooltipster.css">
<script type="text/javascript"
src="http://newsweek.shu.edu.tw:8080/lmc201410/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