Movable Type 備忘録

 コメントフォームに吹き出しメッセージを表示する

コメント・フォームやメールフォームに吹き出しを付けるJSを見つけました。 フォームになら何でも吹き出しが付けれそうです。

Tooltip for formsで配布されてるJSでカンタンに設置できます。

吹き出しタイプのメッセージ設置

まずは設置してみましょう (●＞∀＜●)／
Tooltip for formsから圧縮ファイルをダウンロードして適当なフォルダに展開します。

次にJSを修正します。 js/form-field-tooltip.jsをテキストエディタで開きます。 そして、イメージファイルのパスを変更します。 わたしの場合は以下のように変更しました。

  1. 53行目
  2.  
  3. 変更前
  4. this.imagePath = 'images/';
  5.  
  6. 変更後
  7. this.imagePath = 'http://bizcaz.com/formtooltips/images/';

わたしの場合は、index.html と同じ場所にformtooltipsというディレクトリを新規作成して、その中にアップロードしたので上記のような修正にしました。 アップロード先はどこでも構いませんので、各自の環境に合わせて修正してください。
ちなみにわたしの場合のディレクトリ構成は以下の通りになります。

  1. http://bizcaz.com/
  2.   |
  3.   +--formtooltips/
  4.       +---css/
  5.       | +---form-field-tooltip.css
  6.       |
  7.       +---images/
  8.       | +---green-arrow-right.gif
  9.       | +---green-arrow.gif
  10.       |
  11.       +---js/
  12.               +---form-field-tooltip.js
  13.               +---rounded-corners.js

修正したら保存してcss、images、jsフォルダをまるごとサーバにアップロードします。
次にテンプレートを修正します。 個別エントリ・アーカイブ、コメント・プレビュー、コメント・エラーをそれぞれ同じように変更します。

<head>～</head>の間に以下を追加します。

  1. <script type="text/javascript" src="<$MTBlogURL$>formtooltips/js/form-field-tooltip.js"></script>
  2. <script type="text/javascript" src="<$MTBlogURL$>formtooltips/js/rounded-corners.js"></script>

青い字の部分を各自の環境に合わせて修正します。
次にコメントフォームの各<input>タグを変更します。 例として以下に名前入力用の<input>タグを記します。

  1. 変更前
  2. <input id="comment-author" name="author" tabindex="10" accesskey="n" value="" />
  3.  
  4. 変更後
  5. <input id="comment-author" name="author" tabindex="10" accesskey="n" value="" tooltiptext="お名前を入力してください。[必須]" />

青い字の部分に吹き出しとして表示させたいメッセージを追加します。 tooltiptext="メッセージ内容"という形式で、各<input>タグ、<textarea>タグにそれぞれ追加します。

追加したら、最後に</body>タグの直前に以下を追加します。

  1. <script type="text/javascript">
  2. var tooltipObj = new DHTMLgoodies_formTooltip();
  3. tooltipObj.initFormFieldTooltip();
  4. </script>

追加したら保存して再構築します。 適当なエントリのページを開いて、フォームの各入力欄をクリックすると吹き出しメッセージが表示されますね。 とりあえず、設置は完了です。

後は、各自のテンプレートに合わせて色などのカスタマイズを行います。 配布元の設置説明を見れば分かると思いますが、色や表示位置などを変更するための関数が用意されています。 ですが、テンプレート内に埋め込む必要があるようなので、それでは非効率過ぎるから直接form-field-tooltip.jsを変更します。

先ほどのイメージファイルのパスを変更したように、ツールチップの背景色などを変更してください。 以下はわたしがカスタマイズしたform-field-tooltip.jsの抜粋です。

  1.     this.tooltipDiv = false,
  2.     this.tooltipText = false;
  3. ★ this.imagePath = 'http://bizcaz.com/formtooltips/images/';
  4. ☆ this.arrowImageFile = 'green-arrow.gif';
  5. ☆ this.arrowImageFileRight = 'green-arrow-right.gif';
  6. ★ this.tooltipWidth = 240;
  7. ★ this.tooltipBgColor = '#317082';
  8. ☆ this.closeMessage = 'Close';
  9. ☆ this.disableTooltipMessage = 'Don\'t show this message again';
  10.     this.activeInput = false;
  11. ☆ this.tooltipPosition = 'right';
  12.     this.arrowRightWidth = 16;
  13.     this.arrowTopHeight = 13;
  14.     this.tooltipCornerSize = 10;
  15.     this.displayArrow = true;
  16.     this.cookieName = 'DHTMLgoodies_tooltipVisibility';
  17.     this.disableTooltipByCookie = false;
  18.     this.tooltipDisabled = false;
  19.     this.disableTooltipPossibility = true;
  20.     this.tooltipIframeObj = false;
  21. ★ this.pageBgColor = '#FFFFFF';

★印はわたしがカスタマイズしたところです。☆印は人によっては変更するだろう…と思うところです。 詳しいことは圧縮ファイル中のdocフォルダの中のHTMLファイルを見ればだいたい検討がつきます。

以下はCSSになります。

  1. #DHTMLgoodies_formTooltipDiv{
  2.     color:#FFF;
  3.     font-family:arial;
  4.     font-weight:bold;
  5.     font-size: 1em;
  6.     text-align:left;
  7.     line-height:120%;
  8. }
  9. .DHTMLgoodies_formTooltip_closeMessage{
  10.     color:#FFF;
  11.     font-weight:normal;
  12.     font-size: 1em;
  13. }
  14.  
  15. #DHTMLgoodies_formTooltipDiv a {
  16.     font-size: 1em;
  17.     color: #fff;
  18. }

ツールチップの背景色を変更した場合、添付されている吹き出し用イメージを同色で作り直す必要があります。

またまたIEですが、IEでは吹き出し部分のイメージが表示されませんでした

では、SEE YOU♪

 Trackback Pings(0)

No trackbacks found.

 Comments(2)

#1: Posted by Author Profile Page ikias @ October 23, 2006 [REPLY]
user-pic

かっこいいですね。設置してみます。

 
#2: Posted by bzbell @ October 23, 2006 [REPLY]
user-pic

>>1 ikias さん

こんにちわ^^

制限事項などある場合などに便利かもですね♪
ユーザビリティ向上になりますかね(￣∇￣)b

 

 Post a Comment

 

コメント用フィード