ツールチップで説明文を表示『BoxOver』

写真を貼り付けると(FC2では)下記のようなタグが挿入されます。

<a href="http://blog-imgs-45.fc2.com/s/a/k/sakura/12345.jpg" target="_blank"><img src="http://blog-imgs-45.fc2.com/s/a/k/sakura/12345s.jpg" alt="12345.jpg" border="0" width="199" height="149" /></a>

この赤字の部分のaltって「代替えテキスト」のことですけど、画像が表示されない場合に画像の代わりとしてalt属性値がテキストして表示されます。

boxover01.jpgIEではこのalt属性値のテキストは左のように画像の上にツールチップ表示されますが、FireFoxでは表示されません。
Operaもたぶん表示されないと思います…。(他のは確認していませんが…。)

FireFoxやOperaでツールチップを表示するには「title属性」で記述してやらなければなりません。
例えば…先程の画像のタグでいうと……

<a href="http://blog-imgs-45.fc2.com/s/a/k/sakura/12345.jpg" target="_blank"><img src="http://blog-imgs-45.fc2.com/s/a/k/sakura/12345s.jpg" alt="12345.jpg" title="12345.jpg" border="0" width="199" height="149" /></a>

と、「title=」を書き加えてやると、IEで見る「alt属性」のようにFireFoxでもツールチップ表示されるようになります。

「alt」は「代替えテキスト」であり「説明文」ではありません。
説明文は「title」属性で記述するのが本来です。
両方記述している場合は、「title」属性のツールチップが表示されるようです。


……毎度のことながら、前置きがとっても長くなりましたm(__)m

今日書きたかったのはこの「title属性」を使った説明文をちょっとカッコよく見せるようにしてみましょう、というお話です。

boxover02.jpg画像にマウスを持って行くと……
こんなふうに説明文が表示されるJavaScriptの紹介です。
(ほとんど自分の復習と備忘録のための記事ですが…( *^艸^))

この↓画像の上にマウスオンしてみてください。
説明文が出てきましたか?
Java Scriptを読み込んでしまわないと表示されないので、
一呼吸置かないと表示されない場合もあります。
10101111.jpg


これは「Box Over」というJavaScriptを使うと簡単にできます。

ところが……まず問題がありまして……。

通常であればダウンロード先をここに表示させていただくのですが、どうもダウンロード先が見つかりません。
ひょっとしたら私が見落としているのかもしれませんが、
Box Overについて紹介されている記事のダウンロード先はほとんど「http://boxover.swazz.org/download/boxover2.1.zip」になっています。
でも、ここに飛んでみてもよくわからないんですよね~。

まぁ…要は、どこかから「boxover.js」というJavaScriptをダウンロードすればよいのですが……。

例えばね、このブログからとか……。
URLを書いておけばよいのでしょうけど、それって再配布になってしまうかもしれないので書きません。

私のブログのソースから「boxover.js」がアップロードされてるURLを探して、そこへアクセスして「保存」すればダウンロードできますね( *^艸^)
それとも……この記事の説明の中にアップロード先のURLが書いてありますのでそのURLを表示して保存してください。
(よくわからない方は秘密コメントかメールフォームでメールアドレスをご記入の上ご連絡下さい。)


boxover03.jpgでは使い方です。
(FC2での説明ですので、他のブログの場合、参考になるかどうかわかりませんが…。)

ダウンロードした「boxover.js」をアップロードします。

アップロード先が表示されるので、そのURLをコピーしておきます。

↓赤字で書いてある部分が先程コピーしておいたアップロード先のURLになります。

<script type="text/javascript" src="http://blog-imgs-45.fc2.com/s/a/k/sakuraxren/boxover.js"></script>


boxover04.gifこれを「テンプレート設定」-「HTML編集」のヘッド部分に挿入します。
挿入場所が分かりにくければ「</head>」を探してこの直前に入れておいてください。

テンプレートの「更新」ボタンをクリックしてテンプレートの編集を終わります。


記事を書くときは、通常通り画像を挿入し、そのタグの中に↓赤字部分を書き込んでやります。

<a href="http://blog-imgs-45.fc2.com/s/a/k/sakuraxren/10101111.jpg" target="_blank"><src="http://blog-imgs-45.fc2.com/s/a/k/sakuraxren/10101111s.jpg" alt="10101111.jpg" title="header=[タイトル] fade=[on] body=[説明文]" border="0" width="199" height="300" /></a>

「fade=[on]」はチップの表示の仕方が変わるだけなので、必要に応じて付けてください。

また文章にも説明文を入れることができます。

例えば
「気の向くままに…」にようこそ♪』
↑「気の向くままに…」の部分にマウスを置いてみてください。
説明文が出ます。

文字に説明文をつけるには先程の文を例として表示すると下記のようにします。

<span title="header=[気の向くままに…] body=[何でもありのブログですが、ごゆっくりどうぞm(__)m]">「気の向くままに…」</span>にようこそ♪

例ではツールチップが表示される部分の色を変えていますが、このタグには色を変える設定は削除しています。変更する場合は通常通りの手順で文字色変えるようにしてください。)

その他にも画像の一部分だけにマウスを置くとチップが表示されるようにしたり、タイトル部分に画像を付けたりすることもできます。
また、チップの色を変えたりもできます。
いくつかサンプルを書いておきますので、参考になれば幸いです。

気の向くままに…(クリックするとリンク先に飛びます。)
<a href="http://sakuraxren.blog103.fc2.com/" title="header=[気の向くままに…] body=[なんでもありのブログです]" target="_blank" >気の向くままに…</a>


気の向くままに…
(ツールチップのタイトル部分に小さなアイコンが付いています。)
<a href="http://sakuraxren.blog103.fc2.com/" title="header=[<img src='http://blog-imgs-45.fc2.com/s/a/k/sakuraxren/boxover_bee.png' style='vertical-align:middle;padding-right:5px;>気の向くままに…] body=[なんでもありのブログです]" target="_blank">気の向くままに…</a>


boxober05

(彼岸花の部分だけにチップが出るようにしています。)
<img src="http://blog-imgs-45.fc2.com/s/a/k/sakuraxren/boxover05s.jpg" usemap="#usermap"/>
<map name="usermap">
<area shape="rect" coords="81,53,126,94" title="header=[平成22年10月11日] body=[そば畑の中の彼岸花]" />



なんだか…よくわからない説明文ですね
「Boxover」で検索をかけていただくと、もっとわかり易く説明を書いているサイトさんが出てくると思うので、ぜひそちらも参考になさってください。

「ツールチップで説明文を表示『BoxOver』 追記」



関連記事

コメントの投稿

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

鍵コメ 2010/10/22(Fri) 17:20様

昨日メールをお送りしたのですが、届いてますでしょうか?
gooのメールに送信しましたので、ご確認くださいね~。


管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

鍵コメ 2010/10/23(Sat) 13:37様

ご連絡ありがとうございま~す!

登録、変更しておきました♪

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
**コメントを投稿**

コメントの投稿

Private :

トラックバック


この記事にトラックバックする(FC2ブログユーザー)

プロフィール

れん

管理人:れん
写真は下手の横好き。
そのせいか、画像編集ソフトで写真を弄ぶのも大好き♪
思いついたことを気の向くままに書いています。
カレンダー
11 | 2016/12 | 01
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
最新の記事
最近のコメント
カテゴリ
月別アーカイブ
12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05 
お気に入り
リンクしてね♪
トラックバック
記事について
フリーソフト・WEBアプリなどの紹介記事は紹介した時点のものです。
バージョンアップ、その他で使用方法などが変更されている場合があります。
また,紹介時点ではフリーだったものが有料になっているものもあります。
記事には日付が表示されていますのでご確認ください。
あまり古い記事は参考にならない場合も多いと思います……(T_T)
ブログ管理MENU
いらっしゃいませ~
検索フォーム
メールはこちら
こちらのメールフォームもご利用ください。
アイコンをクリックするとメールフォームが開きます。
返信の必要な場合には必ずメールアドレスをご記入下さい。
メールはこちら
月間アクセスの多い記事 
ブログパーツ
月間リンク元ランキング
スポンサードリンク
おすすめ
・楽天市場
・eBOOKOFF
・FUJICOLORプリントおとどけ便
・インターネットで「デジカメプリント」
・ジャパネットたかた
・住信SBIネット銀行
・楽天銀行
・OLYMPAS ONLINE SHOP
・Yahoo!ショッピング
・上海問屋


楽天トラベル株式会社

デル株式会社

エプソンダイレクト株式会社

ホームセンターのコメリドットコム

プレミアム バンダイ

太る原因
FLAG COUNTER
Free counters!
このページのトップへ