画像にカーソルを合わせる事で、画像のタイトルをポップアップ表示させるスクリプトをホームページと、エントリー個別のページに導入しました。これは、カーソルを合わせる事で、img要素のtitle属性からタイトルを取得して、ポップアップ表示させる代物です。title属性が設定されていなければ、ブラウザに一任されます（普通は、alt属性がブラウザによってポップアップされる）。
普通のブラウザでは、画像にカーソルを合わせるとtitle属性（あるいはalt属性）の値が簡単なポップアップ（チップヘルプ、ツールチップ、バルーンなどとも呼ぶ）が表示されますが、それを拡張させたような物。似たような物にあれこれポップアップがありますが、それと違って「画像のキャプション表示」に用途を絞った物となります。…とは言うものの、どんな要素のどんな属性でも使えますが（例えば、a要素のhref属性とか）。あと、ソースが短くて（70行ぐらい）分かりやすいと思います(笑)。「あれこれポップアップ」のソースは見たけど、複雑すぎて何やってるのかさっぱり分からんかった…。
何故このような物を設置したかと言えば、以前から画像にキャプションを付けたいと思っていたのだけど、HTMLには画像にキャプションを付けるためのタグは無いし、title属性に書くだけでは気付かれにくいという難点があり、ならばJavascriptによって実現させてしまおうではないか、と考えた次第。せっかく苦労して作ったので、鬱陶しいとか言わないでくださいな(笑)。これでも一応、極力余計な物を排除して軽くしたつもりなので…。
なお、スクリプトはこちら。
https://melog.info/scripts/titlePopup.js
現在、読み込み処理軽減のためにスクリプトは統合されています。現在のスクリプトはこちら。
ちなみにこれ、別にこのサイト専用に特化したスクリプトではなく、汎用的に使える物ですので、もし興味があればご自由に使用していただいて構いません。使用方法としては、まずダウンロードしたスクリプトを自分のサーバ上の適当なディレクトリに置いて、以下のソースを書く。
<script type="text/javascript" src="スクリプトのあるディレクトリ/titlePopup.js" charset="UTF-8"></script>
<script type="text/javascript" src="スクリプトのあるディレクトリ/titlePopup.js"></script>
このソースを、表示させたいHTMLソースの一番下、</body>の直前に置けば動きます。少なくとも、ページ上にある全ての画像よりも後に置いてください。あるいは、Javascriptが書けるならbody要素にonloadイベントを与えて、ソースを書き換えてそこから読み出してください。ちなみに、改変とかそういう物はどうぞご自由に。文字コードとか変更しても問題ないです。ただし、このサイトから直接読み出して使用するのはご遠慮ください。テストに使うだけなら別に構いませんが。これを置くことで、title属性がついた画像全てについて、ポップアップが表示されます。
例えば以下のソースの場合。
<img alt="20041112_negima.jpg" src="https://melog.info/archives/items/2004/20041112_negima.jpg" title="これが10位って！" />
これによって表示される画像にカーソルを合わせる事で、カーソルの右下辺りにポップアップが表示されるようになります。（要Javascript）。
また、ポップアップウィンドウは、以下の構成となっています。必要に応じて、CSSでスタイルを設定してください。
<div id="POPUP_WINDOW">
<h5>属性名(大文字)</h5>
<p>値</p>
</div>
属性名、値というのは要するに、「TITLE」という文字とtitle属性に書かれている内容です。「h5」はこのサイトの構成上のタグなので、これはサイトに応じて変えた方がいいかもしれないですね。h4でもh6でも何でもいいですが。これは、ソースの中のどこかにある”h5″を変えれば、それでいいです。
実はこのスクリプト、別に画像でしか使用できないわけではありません。ソースの中の「popElem」が要素、「popAttr」が属性を表すので、これを適当に変えることで、画像以外、title属性以外を対象にすることができます。例えば、popElemを「a」、popAttrを「href」にすれば、リンクにカーソルを合わせることでリンク先をポップアップすることも可。ただし、元々画像のキャプション表示に使うつもりだったので、複数要素、複数属性の指定はできません。
ちなみに、動作にはDOM対応Javascript必須。具体的には、IE5、Mozilla1.?、Firefox、Opear7以上。…多分。出来る限り環境依存は抑えたつもりなので、多分MacのSafariでも大丈夫だと思いますが、もしダメダメだった場合はご一報ください。一応、こことかこことか参考にした上で作ったので大丈夫だと思いますが…。非対応・Javascript未使用なら非表示。ただしIE4とOpera6は怪しい。
追記
べてみたら、IE4もOperaも無理。使用する人も少ないので別にいいと思うけど、気になる場合は最初のif条件文で、DOM非対応ブラウザもろとも追い返した方が。
12日追記
一応他人が使う事も想定して、スクリプトをいくつか修正。
- スクリプトから日本語を排除。普通、script要素によって動作するスクリプトは、charset属性で文字コードを指定すれば、HTMLソースと文字コードが違っていても大丈夫のはずだけど、それでも不安なので、余計な問題が起こらないように、念のため。よって、「charset=”UTF-8″」は不要。
- デフォルトのスタイルを用意。「スタイルシートで勝手にしてね」のスタンスは、我ながらさすがにどうかと思ったので、デフォルトのスタイルを用意。コメントアウトされてるので、スクリプト中の”// default style”以下、”/*”と”*/”排除すれば、このサイトと同じスタイルのウィンドウが表示されるようになる。ただし、スタイルシートによってbody要素のフォントサイズが変更されていると、それに応じてフォントサイズが変わってくるので注意。
コメントを残す