散歩のテレビといえばテレビ朝日の「ちい散歩」ですが、TBSでやっている「東京ウォーキングマップ」も良いです。
こっちは突然通販番組になったりもしません。
日曜日の朝5時半から15分くらいです。
---
WEBの話です。
PCT3 DISC DESIGN EXHIBITION 参加アーティストのページをTooltips.jsを使って更新した。
こんな感じです。
まずPCTのページはコンテンツ少ないですがMovable Typeで動いております。
このページ（http://pct.p-web.org/event/pct3-ddea.html）はエントリーページ。
このページにTooltips.jsとかを読み込ませるのですが、すべてのエントリーページ（エントリーアーカイブのテンプレート）にTooltips.jsを読み込ませたら重くなりそうなので、MTのプラグインRightFieldsを入れて、htmlのヘッダーに書きたい内容を入れる入力フォームを作る。
（RightFieldsは「エントリーの内容」とか「追記」とか「投稿日」とか基本の入力フォーム以外の項目と、それにあった独自タグが作れるんですよ。カスタムフィールドみたいな）
<MThtmlheader>みたいなのタグを作ったので、エントリーアーカイブの<head>～</head>内に↓を書いて再構築。
<MTExtraFields>
<$MThtmlheader$>
</MTExtraFields>
このエントリー（http://pct.p-web.org/event/pct3-ddea.html）の投稿画面に「HTMLヘッダー」というテキストエリアが出来上がっているので、↓を入力します。やっとTooltips.jsを読み込ませます。
<script type="text/javascript">
// <![CDATA[
function debug(msg) {
var d = $('debug');
if (d) d.innerHTML = msg + "<br>" + d.innerHTML;
}
// ]]>
</script>
<script type="text/javascript" src="scripts/prototype.js"></script>
<script type="text/javascript" src="scripts/getElementsBySelector.js"></script>
<script type="text/javascript" src="scripts/scriptaculous.js"></script>
<script type="text/javascript" src="scripts/tooltips.js"></script>
<script type="text/javascript">
// <![CDATA[
Tooltips.activateOnLoad();
ActionHints.activateOnLoad();
SectionTriggers.activateOnLoad();
// ]]>
</script>
<style type="text/css">
.tooltipTrigger {}
～～～ （Popup内のデザインとかをする）
</style>
エントリーの内容には
<a class="tooltipTrigger" id="tooltip01">kunitake shou</a>
<div class="tooltip" id="tooltip01PopUp">
<h3>kunitake shou</h3>
<p>
ショウでーす。
</p>
こんな感じで書いて投稿します。
そうするとピンクにマウスオーバーしたときオレンジがPOPUPするわけです。
できあがり。
さらに
クリックするとページの下にある場所へページ内リンクで移動したかったので、
<a href="#a01" class="tooltipTrigger" id="tooltip01">kunitake shou</a>
<div class="tooltip" id="tooltip01PopUp">
<h3>kunitake shou</h3>
<p>
ショウでーす。
</p><div class="tooltip" id="tooltip01PopUp">
<h3><a name="a01">kunitake shou</a></h3>
<p>
ショウでーす。
</p>
こんなふうに書いてみたのですが、
こうするとPopupする内容が、ページ内リンクで移動したい場所の内容を表示してしまい、どうやってもだめだったので、
<a onclick="location.href='#a01'" class="tooltipTrigger" id="tooltip01">kunitake shou</a>
<div class="tooltip" id="tooltip01PopUp">
<h3>kunitake shou</h3>
<p>
ショウでーす。
</p><div class="tooltip" id="tooltip01PopUp">
<h3><a name="a01">kunitake shou</a></h3>
<p>
ショウでーす。
</p>
こんな感じで書いて動いています。むりやり
書いたらだれかが読むだろう。
以上。
さようなら。