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

2013年7月7日 星期日

使用 "menu" 的互動文本技巧:一次秀出來讓你慢慢選




"menu"
既能「互動」又給讀者充分「選擇權」的文本呈現形式!















1. 先於 <head>xxx</head> 之內或<body>之後寫入 javascript
<script type="text/javascript" src="http://lmcdwriting.org/userfiles/lmcsilver20121007/jsmenu/jscookmenu-2.0.4/JSCookMenu.js"></script>
<link rel="stylesheet" href="http://lmcdwriting.org/userfiles/lmcsilver20121007/jsmenu/ThemePanel-1.1/ThemePanel/theme.css" type="text/css">
<script type="text/javascript" src="http://lmcdwriting.org/userfiles/lmcsilver20121007/jsmenu/ThemePanel-1.1/ThemePanel/theme.js"></script>

2. 於版面上置放一部影音,並設上 ID="xxx",此例為 id="gotosouth20130706" 。
<iframe allowfullscreen="" frameborder="0" height="315" id="gotosouth20130706" src="http://www.youtube.com/embed/1Qoe0H_Qkp8?rel=0" style="margin-right: -20px;" width="560"></iframe>

3. 套裝程式語法
<script type="text/javascript">
function gotodiv01 ()
{
 document.getElementById("gotosouth20130706").src="http://www.youtube.com/embed/EjO1lTZ5pXY?rel=0";
};
function gotodiv02 ()
{
 document.getElementById("gotosouth20130706").src="http://www.youtube.com/embed/4q58G5Z1KHI?rel=0";
};
function gotodiv03 ()
{
 document.getElementById("gotosouth20130706").src="http://www.youtube.com/embed/fOdRMvtrerc?rel=0";
};
function gotodiv04 ()
{
 document.getElementById("gotosouth20130706").src="http://www.youtube.com/embed/c80sS-EfSTI?rel=0";
};
var myMenu02 =
[
    ['▲ ', '暑假南行的四篇影像散記  ', null, null, null,  // a menu item
          ['↗  ', '屏東萬金聖母堂 ', 'javascript: gotodiv04()', null, null],  // a submenu item
          ['↗  ', '屏東隨走的雲和風 ', 'javascript: gotodiv03()', null, null],  // a submenu item
          ['↗  ', '水里蛇窯的光澤 ', 'javascript: gotodiv02()', null, null],  // a submenu item
          ['↗  ', '中部的溪頭散步 ', 'javascript: gotodiv01()', null, null]  // a submenu item
     ]
           
];
</script>

<style>
.ThemePanelMenu,.ThemePanelSubMenuTable
{
 font-family: 微軟正黑體, verdana, arial, sans-serif;
 font-size: 1.2em;

 cursor:  default;
 white-space: nowrap;
}
</style>

<div id="myMenuID02" ><br>
</div>

<script type="text/javascript">
 cmDraw ('myMenuID02', myMenu02, 'hur', cmThemePanel);
</script>

影音教學:




Javascript 程式來源:JSCookMenu


3 則留言:

  1. 老师,目录所连接的内容能否换成不是视频的内容呢?还有能不能做到,点击目录里面的某一个子项,然后网页就会出现仿佛刚刚是被折叠起来的一部分内容呢?(这部分内容包含图文视频等。)

    回覆刪除
  2. 可以的,但難度是有的,所以我還沒有很正式的教這個,你如果有興趣,找個時間我跟你講一下就會了

    回覆刪除
  3. 你好,此功能實在強大,感謝分享!將其套用到我的blogger並隊功能做些許修改如是:http://goo.gl/2d0Hf7,待正式測試完成後會另創文章並標註碼源來自貴站。此外,日前於另篇文章向您請益的相關頁面亦屆測試完成,不嫌棄請您賞光並不吝指教:http://goo.gl/fC2p0E,謝謝。
    另請教您,欲將所點選的subitem取代main menu上的主文,是否有可能達成,如是能否指點迷津或略述其概念,再次感謝您!

    回覆刪除