それは階層メニューの新たな変形である。
　今は階層メニューのメインアイテムは左カラム内に縦に並んでいる。そしてサブメニューはその縦に並んだ第1階層の右横に浮上するようになっている。
　これを変形してメインアイテムを横一列に並べ、そのサブメニューをそれぞれの下にプルダウン的に浮上させ、次にサブ・サブメニューをその右横に展開するように配置し直してみたい。それはこちらで触れたような配列の階層メニューである。
　さて、これを実現するには、今までの階層メニューに若干手を加えねばならない。メインアイテムの横幅と展開する階層メニューの横幅は一致しないことが一般的であり、そのことの処理を行わなければならないのだ。
　そこで活用するのはイベント発生要素の位置とサイズを取得して、それを踏まえて絶対配置するpopup表示である。これまで利用してきた階層メニューは、その子メニューが親メニューの内包要素として位置づけていた。今度作成する階層メニューは一般的なものであり、それは子要素を独立した絶対配置要素として位置づけ、それをイベント発生要素＝親要素の位置とサイズ情報を頼りに配置するものである。
　これにより第1階層メニューは縦でも横でもその配置に無関係に子要素を配置することが可能となるので、階層メニューのレイアウト自由度は一気に高まることになる訳だ。

• 「イベント」関連エントリイ in this Blog

popup窓のpaddingとborderサイズを考慮に入れた表示に成功したことを受けて、早速それを実用的に利用してみた。

それは階層メニューの主階層の各アイテム（左カラムトップにある Browsing Menu のArchives、Categories等）にmouseがoverになったその時に、そのアイテムの説明をpopupすることである。これまでそのpopup表示位置は、onoverになったマウス位置から求めていたが、mouseoverによって表示されたHTMLエレメントの位置から、popup表示位置を取得することに変えたのである。これによりマウス位置によって左右に浮動していたpopupが固定的に表示されるようになり、すっきりした訳だ。

今回の成果

今回の実用化を通して、外部ファイル化しているJavascript文の全面的な見直しも行った。引数の受け渡し方、サブルーチンの活用等を整理したのだ。併せて次の3つのpopup窓を設定した。(1)マウス位置に応じて表示位置を決めるballoon1、(2)イベント発生要素位置に応じて位置を決めるballoon2、(3)同じくイベント発生要素位置に応じて位置を決めるballoon3（但しballoon2と異なるデザインとする）。

(3)は未だ利用してないがいつでも利用できるよう準備は整えてあり、第2階層のメニューアイテム説明用popupに利用する予定である。

それにしても、突き詰めるほどにJavascript森の更なる奥へと進んでいくことを実感し、改めてその奥深さに呆れかえるほどに驚嘆している昨今である。

　template大改造計画の第一歩として、indexページに最近のエントリイタイトルに加えてカテゴリイ一覧を掲載してみた。
　エントリイタイトルだけでは余りに寂しいからであるが(苦笑)、カテゴリイ一覧があっても邪魔にはならないだろうし、カテゴリイ名を頼りに興味を抱いてくれる方もいるかもしれない、との思いも籠めたつもりだ。

• 「イベント」関連エントリイ in this Blog

　イベント発生要素の位置情報等を取得して、それを頼りにpopupすることには成功した。正確に言えば成功したと思っていた。
　ところがそれには問題があった。popup窓のpaddingとborderの大きさを考慮に入れてなかったことだ。
　IEの場合には、互換モードではwidthもheightも、規定されている値にpadding値とborder-width値を加えたものになっているから逆に問題はないのだが、画面右端や下端を越えてpopup窓が配置されようとする場合に、それを修正して丁度右端に、あるいは丁度下端に揃うようにpopup窓を配置しようとすれば、Firefoxを始めとしたその他のブラウザではwidthだけではなく、paddingもborderも考慮しなければならない訳である。───そのことをすっかり忘れていた。
　そして、これを解決しようとしてまた新しい問題に遭遇してしまったのである。
　それは、インラインではなく外部ファイルで設定されているCSS属性値を、Javascriptでどのようにしてゲットするか、という問題である。
　object.style.width も object.style.heightも共に設定だけでなく「取得も出来る」とJavascript関連書籍には書いてある。しかし、それはインラインCSSで明示的に宣言されている場合に於いては、という条件付きの「取得可」であることに気づくまでに、一体どれだけの時間を費やしてしまっただろう。あれこれのサイトをサーフィンしてやっと解決したのではあるが、マニュアル本の不完全な説明故に費やしてしまった無駄な時を恨みに思う。
　インラインで設定されてないCSS値の取得について、IEにおいては例えば、parseInt(object.currentStyle.paddingTop)　で値をゲットすることが出来るのだが、手持ちのどの本にもそのことは書いてないし、ましてやfirefoxにおける例えば、
　parseInt(document.defaultView.getComputedStyle(object, '').getPropertyValue("padding-top"))に至っては、余りに長い式に閉口してしまったのだが、同様に何も触れていないのだから困ったものだ。
PS：
それでもなお、firefoxにおいては画面右端にジャストフィットする配置が出来ないでいる。僅かに20数pixelだけ画面右に飛び出してしまうのだ。その原因が解明できないが故に、更なるストレスに苛まれているわけである。

　Javascriptを本格的に利用するようになってまだ半年くらいしか経過していないが、何冊かの書籍を購入し、関連サイトをサーフィンしても、なかなか全容を把握するに至らないことに、忸怩たる思いを抱いている。
　本家本元のEnglishヴァージョンを読めばよいのだろうが、そこには英語力という大きな障害が立ちはだかっている。
　そこで「これならば力になる」と思われる関連リンク集があれば大いに重宝することは間違いない。そしてそう思うのは私一人ではないだろう。
　ということで特選Javascriptリンク集を作ろうか、と思う。

　　
　

エントリイ内JavascriptExercise

• エントリイ内 Javascript Exercise 関連エントリイ一覧 in this Blog
• 「イベント」関連エントリイ in this Blog

1-3 任意の要素位置等の情報からpopup窓の位置を決める

例えば、任意の要素上でmouseoverすると、その要素の右、上、下等にぴったりより沿った位置に表示されるpopupを作ってみる。この表示方法は言うまでもなく階層メニューに応用できる。

なお、このスクリプトは汎用するつもりのため、インラインではなく、外部ファイルに取り込んでしまった。

試験

この文章の上にマウスを置くと、この要素（p要素）の真上に左端を揃えてpopup窓が表示される。また、mouseoutになればそのpopupは消失する。

この文章の上にマウスを置くと、この要素（p要素）の真下に左端を揃えてpopup窓が表示される。また、mouseoutになればそのpopupは消失する。

この文章の上にマウスを置くと、この要素（p要素）の左側に上端を揃えてpopup窓が表示される。また、mouseoutになればそのpopupは消失する。

この文章の上にマウスを置くと、この要素（p要素）の右側に上端を揃えてpopup窓が表示される。また、mouseoutになればそのpopupは消失する。

【注】右表示popupの場合には、スクリーン右端に収まるよう、Javascriptによって位置を調整している。

関連エントリイリスト in this Blog(2007/06/27追記)

• offset○○○ 関連エントリイ一覧 in this Blog
• Javascript演習ページ(1)通常配置要素の高さ取得
  【エントリイ外のオリジナルページ】

検索語「offsetParent」で検索を掛けてみたところ、そのものずばり、目的とする関数をゲットすることが出来た。

昨晩から試行錯誤してなかなか完成しなかっただけに、これを見つけたときには、その余りのスマートさに驚愕し、感心してしまった。

その関数は以下のとおりで、これはhttp://www.phoenix-c.or.jp/~zspc/cgi-bin/wwwlng.cgi?print+2000-10/00100100.txt に掲載されていたものである。

  function getPos( elm ){ 
    var target = elm; 
    var pos = new function(){ this.x = 0; this.y = 0; } 
      while( target ){ 
      　pos.x += target.offsetLeft; 
      　pos.y += target.offsetTop; 
      　target = target.offsetParent; 
    　} 
    return pos;
  }

2007/07/12追記

しかしながら、この方法では正確な位置は取得できない。Opera以外はそれぞれ毎の補正が必要である。

その補正方法についてはこちら、offsetLeft,offsetTop,offsetWidthそしてoffsetHeight──静的配置要素の絶対位置を確実に取得する方法について　で解明したので、ご覧いただければ幸いです。

　先の方法で取得した任意要素の位置等の情報の活用を考えている。
　既に昨日、任意の要素の位置、サイズ等を取得するスクリプトは完成した。次に行うべきことは取得した位置等の情報を元にして、例えば、popup窓を任意要素のきっちり右側に表示する、あるいはサブメニューを上位メニュー要素のきっちり下部に配置する、等々に活用する関数を作ることである。
　その関数・popup窓表示・階層メニュー作成を次の課題とする。

flashは今や企業のどのホームページにも必ず掲載されているcoolな素材と言えるだろう。素材集も沢山あるようだ。

ところで好みのflashを見るだけではつまらない。自分のサイトで活用しようと思えば、当然ダウンロードしたくなる。

HugFlash

そのためのソフトとしてまずHugFlashがお勧めだ。窓の杜によれば「ローカルPC内のFlashファイルに含まれる画像・音声・動画を抽出できるツール」とのこと。flashデータの部分切り出しさえ可能なのかも知れない。自分のパソコンのCacheから以前見たflashデータを保存できるのも魅力だろう。窓の杜によるHugFlash紹介はこちらから。窓の杜 - 【NEWS】Flashファイルに含まれる画像・音声・動画を抽出できるツール「HugFlash」。

FlashPlayerEx

こちらのソフトもお勧めだ。zan9/soft

実はMyBlogの右上にある時計はflashデータなのであるが、開く度にサーバーにアクセスしていては遅くてたまらないので、FlashPlayerExを使ってダウンロードし、それをfc2サーバーにuploadして表示している。この時計のダウンロード先はこちら。

　パーツではないが・・・。
　絵文字が入力表示できるようになったことは素晴らしい。
　これでブログの表情はマスマス豊かになるだろう。
-------------------------------------------------------

エントリイ内JavascriptExercise

• エントリイ内 Javascript Exercise 関連エントリイ一覧 in this Blog
• offsetLeft,offsetTop,offsetWidthそしてoffsetHeight──静的配置要素の絶対位置を確実に取得する方法について（2007/06/27完）
• offset○○○ 関連エントリイ一覧 in this Blog
• 「イベント」関連エントリイ in this Blog
• Javascript演習ページ(1)通常配置要素の高さ取得
  【エントリイ外のオリジナルページ】(2007/06/24完)

1-2 任意の要素の画面上の位置、幅、高さ等の諸属性を取得する

何らかのイベント発生に対応して、或る位置に文字や画像を表示したいことは沢山ある。その場合には当然乍ら、その表示位置を指定する必要がある。そしてその表示位置はイベント発生要素が持つ諸属性値の関数として、つまりイベント発生要素の位置・幅・高さの関数として設定することが出来るはずである。

そこでまずイベント発生要素の位置、サイズ等を取得してみる。

イベント発生要素の位置と大きさを取得できれば、position absolute属性を持つ要素にも、また通常のストリーム内にある要素にも、あるいはposition relative属性を持つ要素にも、全ての表示に利用することが出来るし、言わずもがなであるがpopup表示にも活用できる。

試験内容

次の文字列（p要素）にmouseoverすると、p要素の位置属性等を各テキストフィールド内に表示する。

sizes & positions of this element

offsetプロパティによって位置やサイズを取得してみた。ここでもまた、IEとGekkoではoffsetParentが全く異なる概念であることに悩まされなければならなかった｡ _(･･;φｳｯ･･･

tagName :

マウス座標 x :

マウス座標 y :

この要素幅：offsetWidth :

この要素高：offsetHeight :

(IEは第1)offsetParentのtagName（FFはbody） :

(IEは第1)offsetParentのID （FFはbodyのID）:

(IE)第1offsetParent上の、(FF)body上のx座標:

(IE)第1offsetParent上の、(FF)body上のy座標:

(IE Only)第2ParentのtagName :

(IE Only)第2ParentのID :

(IE Only)container上のx座標 :

(IE Only)container上のy座標 :

(IE Only)第3ParentのtagName :

(IE Only)第3ParentのID :

(IE Only)body上のx座標 :

(IE Only)bpdy上のy座標 :

コメント

1. mouse位置については、Javascript外部ファイル内で取得関数を設定している。

2. IEでは第1offsetParent、第2offsetParent、・・・と階層構造を為すが、Firefox の場合にはoffsetParentは唯1つ（body要素）しかないことが試行錯誤の結果やっと解明できた。(^。^;)フウ〜。

   同じプロパティ名でこれ程に概念が異なるとは全く厄介なことである。そのことを試行錯誤して解明するのに丸々1日掛かってしまった！

   世に出回っているJavascript解説本で、offsetParentについて正確に記述したものはあるのだろうか？ 少なくとも手持ちの数冊の書籍では記述があっても誤っているか、あるいは全く記述がなかった。

3. IEにおけるoffsetParentは極めて扱いにくい。それは上位要素parentElementとイコールではなく、一定の条件下にある上位要素がoffsetParentになるらしい。その一定の条件については、「offsetParentとparentElement」に詳述されている。

4. 結論として、IE以外では任意要素の位置はoffsetLeftとoffsetTopで容易に取得できる。(2007/06/27追記：←この記述は間違いだった。Opera9は簡単にoffsetLeft,同Topによって要素の位置を取得出来るが、FF2.0.0.4でもoffsetLeft等だけでは正確な絶対位置や取得できない。詳細は offsetLeft,offsetTop,offsetWidthそしてoffsetHeight──静的配置要素の絶対位置を確実に取得する方法についてに記述した。）　しかし、IEにおいてはHTML文上でoffsetParentの階層構造を解析し、しかもparentElementの内、どれがoffsetParentなのかも特定し、しかる後にbody要素からのoffsetLeft値とoffsetTop値を取得しなければならないことになる。非常に煩雑であり面倒で堪らない。もっと簡便な方法はないのだろうか？！IE7という果報を寝て待つか？(苦笑)

   しかし、果たしてそれは果報たり得るのだろうか？

Javascript呼び出しHTML文

<p style="text-align:center" onmouseover="dispSizePos(this)">sizes & positions of this element</p>

エントリイ内インラインJavascript文

<script type="text/javascript"><!-- //エレメント属性取得 function getElementSizePos(which){ 　if (!document.all) { 　var values = new Array( 　　which.tagName, 　　absX,　//頁上の絶対横位置。外部スクリプトでGlobal変数として定義し値を取得。 　　absY, //頁上の絶対縦位置。同上 　　　//p.width p.height 　　which.offsetWidth, 　　which.offsetHeight, 　　which.offsetParent.tagName, 　　(which.offsetParent.id) ? which.offsetParent.id : "未定義",　//body 　　which.offsetLeft, 　　which.offsetTop　//i=8 　); 　} else { 　var values = new Array( 　　which.tagName, 　　absX, 　　absY, 　　　//p.width p.height 　　which.offsetWidth, 　　which.offsetHeight, 　　which.offsetParent.tagName, 　　which.offsetParent.id,　//IEではcolumn1_block 　　which.offsetLeft, 　　which.offsetTop, 　　which.offsetParent.offsetParent.tagName, 　　which.offsetParent.offsetParent.id,　//←container 　　which.offsetLeft + which.offsetParent.offsetLeft, 　　which.offsetTop + which.offsetParent.offsetTop, //body 　　which.offsetParent.offsetParent.offsetParent.tagName, 　　(which.offsetParent.offsetParent.offsetParent.id) ? which.offsetParent.offsetParent.offsetParent.id : "未定義", 　　which.offsetLeft + which.offsetParent.offsetLeft 　　　+ which.offsetParent.offsetParent.offsetLeft, 　　which.offsetTop + which.offsetParent.offsetTop 　　　+ which.offsetParent.offsetParent.offsetTop 　); 　} 　return values; } 　//サイズ等の表示 function dispSizePos(which) { 　var pos = new Array(getElementSizePos(which)); 　for (i=0; i< pos.length ; i++) { 　　if (i < 9 && (pos[i] == null || pos[i] == undefined)) 　　　pos[i] = ""; 　　document.forms[0].elements[i].value = pos[i]; 　} } //--> </script>

　indexページ＝topページのpopupスクリプトをDOMに拘ってinnerHTMLから変更してみた｡結果は何も変わらないので、どうってこともないし、しかもinnerHTMLを使った方が遙かに書きやすいのだが、DOMで書いたことに意味があると納得させている自分がいる。(苦笑)
　ところで、改行コードはHTML内で無視されてしまうので、一旦スクリプトで置換関数を噛ませて、それを<br />に置換してから出力するようにすれば、popupがもっと見やすくなる。近いうちにそうしようかと思っているが、当面はDOM版でもやってみた、という全くの自己満足に過ぎない・・・。

ということで初めての出来事が起きたのである。

率直に嬉しい〜

さて、アクセス解析を見てみると、色々なことが分かるが、今日はその中からまず、ブラウザについて。

閲覧者のブラウザ種別は次のようであった。圧倒的にIE6が多いことが分かる。しかしよく言われている90％前後ではなく既に8割を切り、変わってMozillaの勢いが凄まじいと言えるかも知れない。

──────

　順 　　ブラウザ 　　　　数　 割合 　1 Internet Explorer 6.0 91 76.47% 　2 Mozilla 5.0 　　　　　26 21.84% 　3 Internet Explorer 5.5 2

次にサーチワードを見てみると面白い。

数週間ほど前までは圧倒的にGoogle Desktop　Searchをキーワードに含むアクセスが多かった。それは社内LAN上でのGDS利用について、以前に少しく細かく書いたからであろう。

その傾向がずっと続いていたのであるが、最近になってJavascriptに関する件が一気に増えてきている。これは階層メニューについて書き連ねていることによるものだと考えられる。

いずれにしても、書いていることへの反応がある───といってもコメントやトラックバックはほとんどないのだが───のは嬉しいことだ。

願わくば、批判も含めて書き込みがあることを希望したい。

　文字ばかりでは十分な説明にならないので、イメージを絵にしてみた。

　多段階層メニューは問題なく動いているのであるが、firefoxでテスト閲覧中に、ふとJavascriptコンソールを見ると、いくつかのエラー警告が出ていた。利用上支障がないので放っておいたが、やはり気にならないと言えば嘘になる。
　ってわけで帰宅後「ちょ、ちょいのちょいっ」と直そうと思ったら、これが全くの地獄の世界！
　あれを直せばこちらがおかしくなり、こちらを直せばそちらもおかしくなり・・・、挙げ句の果てにはスペルミス（特に小文字と大文字の使い分け。例えばchildNode、hasChildNodesが正しいのだが、cは前者では小文字、後者では大文字となっており間違いやすい）を繰返したり、行末を示すセミコロンを入れ忘れたり、・・・たり、・・・たりのケアレスミスを繰り返すばかりで、冷酷に時は流れ去り、とっくにお風呂は沸いているのに既に2時間が経過した。
　やっとの思いでバグ取りは完了したものの、後味の悪いてん末ではあった。

　新設されたブロック変数を活用してindex頁を特設してみた。その成功に意を強くした今、更に他の新設ブロック変数を利用して、このブログテンプレートの抜本的な改造に取りかかろう、と思う。
　インデックス頁設置の他に用意された変数は、カテゴリイ別、月別、個別エントリイ別、検索時等で表示を変更できるものであるが、これらを意味のある範囲内で活かして、それぞれのタイプ毎に頁の表情を変化させてみたい。といっても、その場合の基本的考え方は、例えばそれぞれ毎に全く別な表情（デザイン、色、画像等々を全く異にする別々のサイトのようなもの）にするような方向性ではない。（※　それはそれで面白いかも知れないので副次的には行うことになろう。）

エントリイ内JavascriptExercise

• エントリイ内 Javascript Exercise 関連エントリイ一覧 in this Blog

エントリイ内にJavascriptを記述して成功するかどうか試してみる。

あれこれのスクリプトをテストするのに、ブログのテンプレートをいじって試験するよりも、任意のエントリイ内でテストする方が、失敗した場合の痛手が遙かに少ない。その点からエントリイ内でのスクリプト走行テストは、メリットが多いと思う。

しかも、CSSテンプレートに設定したclass指定がエントリイ内で利用できるから、自在にあれこれ装飾することも出来、嬉しさ・楽しさ倍増である！

1-1　HTML文内の文字を置換する

試験内容

リンク要素上でのmouseoverにより文字を置換する。なお、mouseoverを繰り返すと文字も交互に変化するようにし、何度でも試せるよう工夫した。

※　別にonmouseoverでなくても良いのだが、onclikよりもこの方がユーザーの消費エネルギー負担が少ないと考えた。

• パターン1　　これはbeforeです。

• パターン2　　晴れています。

• パターン3　　●▲●▲●▲●▲●▲●▲●▲●▲●▲

• ここは変化しません。

結論

firefoxでは成功。IE6（互換モード）では何の変化もない。

───というのは真っ赤な嘘だった。インラインJavascriptを久しぶりに書いたため、最後に重大なミスを犯していたのだった。今更乍ら慌て者で、とちり屋の自分に呆れかえるばかりである。

さて、その重大なミスとはこうだ。

//--></script>と書くべき所を、何を思ったのか疲れていたのか、完全なる勘違いで-->//</script> と記述していたのだ。

それを正しく直したところ、後方互換モードのIE6でも何の問題もなくスクリプトは狙い通りに動いたのだった。お騒がせしてしまいました。゜~(^O^゜~)))))ヒェェエ

Javascript呼び出しHTML文

<ul> <li><p>パターン1　　これは<a href="javascript:void(0)" onmouseover="replaceTxt(this,'before','after')">before</a>です。</p></li> ・・・ </ul>

このエントリイ内に記述したインラインJavascript文

二つのタイプを作成し、どちらでも同じように動くことを確認した。現在はDOM版を生かしている。

──────

<script type="text/javascript"><!-- //文字置換（innerHTML利用タイプ） /* function replaceTxt(repTarget,bStr,aStr) { temp = repTarget.innerHTML; if (temp.indexOf(bStr,0) >= 0) while (temp.indexOf(bStr,0) >= 0) temp = temp.replace(bStr,aStr); else while (temp.indexOf(aStr,0) >= 0) temp = temp.replace(aStr,bStr); repTarget.innerHTML = temp; } */ //DOM仕様 function replaceTxt(repTarget,bStr,aStr) { temp = repTarget.firstChild.nodeValue; if (temp.indexOf(bStr,0) >= 0) while (temp.indexOf(bStr,0) >= 0) temp = temp.replace(bStr,aStr); else while (temp.indexOf(aStr,0) >= 0) temp = temp.replace(aStr,bStr); repTarget.firstChild.nodeValue = temp; } //--> </script>

　インラインフレーム表示でエントリイを掲載している秀丸マクロ「lodPadEx.mac」に関して、初めて閲覧してくれた方からの反応がありました。しかし、プライベートコメントで、かつURLもメルアドも記されていないため、お答えすることが出来ません。
　コメントを寄せてくれた方にお願いです。連絡方法をお知らせください。
　「複合タグ設定ファイル」については、エントリイ内で説明もせず、例示もせず、ご迷惑をお掛けしました。「text文を秀丸macroでxhtmlに変換」に詳細な説明文を追加しましたのでご覧いただければ幸いです。

　それは出来上がってみれば、どうってことのないスクリプトであった。innerHTMLの利用を思いつくまでの煩悶はまるで嘘のようだ。
　しかし今回のチャレンジの中で、改行コードの扱いについて悩んだことは貴重な経験となった。また、ネットサーフィンで答えが直接得られることに期待を掛けすぎたことも反省点である。
　筋道を立てて具体的に考えれば、自ずから解決策が見えてくる場合もある、ということだろう。

　<!--index_area-->ブロック変数による独自の表紙頁を作り、まずは最近のエントリイのタイトルリストを掲載した。ここにおいて、悩ましかったのはタイトルを見てちょっと興味を持った場合に、タイトルをクリックしてエントリイを実際に開くまでもなく、エントリイの一部を閲覧させることは出来ないか、という点であった。

-------完成図---------

タイトルonmouseover状態で白いpopup窓が表示されている。
-----------------------

　最も簡単な方法は、title属性を使うことであることは言を待たない。しかも、最初の200文字を抜粋する<%topentry_discription>という便利な単変数も用意されている。
　実際、title属性を利用したpopupは、リンクタグの属性値として、title="<%topentry_discription>"と記述するだけで、mouseover時にpopup表示が出来るので、fc2Blogの様々なテンプレートでふんだんに活用されている。
　しかし、title属性によるpopupは、(1)Gekkoエンジンブラウザの場合には一行しか表示されない、(2)全てのブラウザにおいて一定の時間が経過すると消えてしまう、という短所、限界がある。popupされた文字をじっくり読もうと思っても、ユーザーを待つことなく冷酷に勝手に消えてしまうpopupは余りに不親切であり、また煩わしい。読み切ることが出来ないpopupならば、いっそない方がすっきりするというものだ。
　そこで、この不親切なtitle属性は使わず、mouseoutしない限り消えることがなく、popup幅も位置もコントロール出来るエントリイ部分きりだしpopupをJavascriptで作ろうと考えた。
　-----------------------------
　さて、昨晩そう思ったときには、数時間もあれば直ぐに完成するだろうと踏んでいた。
　ところが、ところがである。このスクリプト作成は私にとっては初めての難題を孕んでいたのだった。
　それは、HTMLから取得したい文字列内に改行コードがある場合の、当該文字列の取得方法を知らなかったこと、これである。　関数の引数として<%topentry_discription>を与えて、popup用の関数で表示すればよいと簡単に考えていた。だから直ぐに出来上がると思いこんでいた。しかし、<%topentry_discription>内には、一般に改行コードが入っている場合が多々あり、その場合にはスクリプトエラーとなってしまうのだ。当然目的としたpopupはうんとも寸とも言わない。
　所期の関数が一切機能しないのである。
　-----------------------------
　改行コード（改行タグではない）が入っている文字列のJavascriptへの引き渡し───この問題にはこれまで遭遇することがなかった。かくしてジャバスクリプト関連サイトのサーフィンを開始したのだ。半日以上掛けて・・・。
　しかし、結局目的とするサイトは発見できず（Google による検索方法が不適切だったのだろう）、夕食を前に疲れ切り、諦念が湧き上がってきた。
　そんな状況の中でふと閃いたのだ。innerHTMLがあるではないか！どうして思いつかなかったのだ。これを活用して何とか出来ないか。！！