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

先日の「ツールチップで説明文を表示『BoxOver』」の補足です。

boxover12.jpg「boxover.js」をテキストなどで開くと、下記のような記述があります。

この記述の各値を変更すると、←のようにボックスの色合い等を変えることができます。


function defHdrStyle() {
dvHdr.innerHTML='<img style="vertical-align:middle" src="info.gif"">  '+dvHdr.innerHTML;
dvHdr.style.fontWeight='bold';
dvHdr.style.width='200px';  ------------G
dvHdr.style.fontFamily='arial';
dvHdr.style.border='1px solid #A5CFE9'; -------A
dvHdr.style.padding='3px';
dvHdr.style.fontSize='11px';
dvHdr.style.color='#4B7A98'; -------------B
dvHdr.style.background='#D5EBF9'; --------C
dvHdr.style.filter='alpha(opacity=85)'; // IE
dvHdr.style.opacity='0.85'; // FF
}

function defBdyStyle() {
dvBdy.style.borderBottom='1px solid #A5CFE9'; -----------D
dvBdy.style.borderLeft='1px solid #A5CFE9'; ---------------E
dvBdy.style.borderRight='1px solid #A5CFE9'; ------------F
dvBdy.style.width='200px'; --------------------------------G
dvBdy.style.fontFamily='arial';
dvBdy.style.fontSize='11px';
dvBdy.style.padding='3px';
dvBdy.style.color='#1B4966'; ----------------------------H
dvBdy.style.background='#FFFFFF'; -------------------I
dvBdy.style.textAlign="left"; ---------------------------J
dvBdy.style.filter='alpha(opacity=85)'; // IE
dvBdy.style.opacity='0.85'; // FF
}


boxover11.gif→ボックスタイトル部分の外枠の色
「1px」は枠線の太さ、「solid」は枠線のタイプ。
solid→1本線  double→2本線  dashed→破線  dotted→点線 など
→ボックスタイトル部分の文字色
→ボックスタイトル部分の背景色

→ボックス説明部分の枠線の底辺の色
→ボックス説明部分の枠線の左側の色
→ボックス説明部分の枠線の右側の色
→ボックス説明部分の文字色
→ボックス説明部分の背景色

→ボックスの幅
 タイトル部分と説明部分の幅がそれぞれに決められますが、同じ数字にしておいたほうが見た目良いかと……。
→これがあることで説明文が左寄せになっていますが、この行を削除すると文字がセンタリングされます。

お好みでいろいろと数値を変えてみてください。

他にもタグで表示の仕方が変わってくるようですが、こちらの方は下記を参考にしてください。
http://opatia.com/js/BoxOverParameters.htm

↓上記を日本語で説明してあるサイト様です。
『ウェブ航海備忘録:ボックスオーバー BoxOver』


関連記事

コメントの投稿

**コメントを投稿**

コメントの投稿

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!
このページのトップへ