›2004年 11月 10日

[ 範疇 : Movable Type ]
[ 範疇 : Web航海録 ]

あれこれポップアップ

0 コメント: Post / View / 0 TrackBack [EDIT]

 皆さん、HTMLを記述するときには「title属性」をつけていますか?
 
 「title属性」とは、リンクだの画像表示だの様々な要素において、補足情報を表示するものです。
 バーッと所有しているHTML辞典を見てみたけど、もうほとんどと思われるくらいの要素に「title属性」が利用できるようです。
 私が主に使っているのは、リンクタグとimgタグだけなんですけどね。
 
 おそらくWYSIWYGエディタを愛用している人でも、リンクを貼る際には「title属性」を指定する欄とかがあると思います。

 それを指定すると、どうなるか?
 なんと、リンクや画像などにマウスカーソルをあわせて、しばらく放置すると、その補足情報がポップアップとして表示されるんです。…もちろんブラウザによりますけど。
 今回は、それを派手にしてしまうスクリプトの紹介。
 是非、素敵なホームページづくりの参考として下さい♪

 まずは実際にポップアップを見てもらいましょう。
 下の画像にカーソルをあわせて、1秒くらい放置してみて下さい。
 

磯山さやか

 
 どうですか?
 灰色の妙なウィンドウみたいなのが出てくれば成功。
 黄色い枠が表示されたならば私の設置ミスです。是非ご報告ください(;´Д`)直します。
 
 続けて、下のリンク部分でも実験してみましょう。
 ■ここにカーソルをあわせるとリンク先が表示されます
 
 如何でしょうか?
 このように豪華なポップアップを生成するためには、以下のサイト様にあるスクリプト一式をダウンロードして、サーバーにインストールする必要があります。 

 ■娘娘飯店しるきぃうぇぶ:あれこれホップアップ
 
 設置方法も非常に簡単です。
 ダウンロードして、適当な場所に置くだけ。
 あとはHTMLのHead属性に、CSSとJavaScriptまでのリンクを書き込むだけです。
 MovableTypeの場合は、インデックスや個別インデックスのテンプレートに2行ばっかり書き加えるだけで全ページに反映されることになります。もちろん再構成を忘れちゃいけませんが。
 
 ぶっちゃけ、インストールしなくても他人様がアップロードしておいたファイルにリンクを貼るだけでも充分に動作するとは思いますが、もちろんマナー違反です(;´Д`)迷惑千万です。
 それにファイル容量も大したことはないし、インストールも簡単だから、せめてそれくらいは自前で用意するべきでしょう。
 むしろ面倒くさいのは、HTMLにリンクを書き加える作業なんですから。
 
 なお、上手く動作しない場合は以下の点を疑ってみて下さい。
 ●HTMLに記述したスクリプトまでのリンクが間違っている。
 ●MovableTypeの場合、再構成をしていない。
 ●ブラウザが対応していない(Windows IEについてはこちら参照)
 ●ありえないとは思うが、パーミッション設定などの初歩的ミス
 ●夢だった。
 
 なお、デフォルトだとリンク属性に関してはURLまで表示されることになると思います。
 これがオイラ的にはちょっとウザかったので、表示されないよう設定を変更しています。
 こういう変更も簡単なのが嬉しいですね♪
 このことからもわかるように、標準状態のブラウザではtitle 属性だけしかポップアップされないんですが、「あれこれポップアップ」を利用するとtitle 属性以外も表示できるようになります。
 ついでにいえば画像やリンク以外でもポップアップさせることができるはずです。未確認だけど。
 それらをどのように活用するかは、利用者の腕次第です!
 
 なお、デフォルト状態でどのようなポップアップが表示されるかの良い例があったのでリンクしておきます。
 ■海月庵:草津旅行記
 ここはすべての画像にtitle 属性をつけていたので、マウスカーソルを置くとポップアップが表示されるはずです。少なくともsafariとWinIEでは表示されたのを確認しています。
 これが「あれこれポップアップ」を設置する前の状態ってわけですね。これはこれで味があるとは思いますが。

Comments
Trackback
Accessed from following URLs...
ツッコミをいれる



※秘密厳守。絶対に公開されません※








クッキーに記録しますか?