タグ:マウスオーバー

案の定
エンゲル係数

かい
句風
工夫
工夫(id=kufuu_je)
句風
工夫(id=koufu_j_1)
交付(id=koufu_j_2)
テスト
テスト-ケース(-ハイフンあり)
テストケース
test
test case
交付
テストケース           エンゲル係数

このプログラムは、
ヒラギノ丸ゴ ProN とSafari8.0.3(WebKit)に最適化されています***③☆☆☆

Windowsでは
①◎下記のフォントをインストールして表示して見てください。
  和田研中丸ゴシック2004絵文字P(2015/06/18)4.3.7.0

ライブドアブログでマウスオーバーポップアップを表示できるかテストしてみるの続きです
とりあえず出来てしまった。

簡単に解説したいと思います。

操作方法
 ①◎単語にマウスを合わせるとポップアップが表示されます。
 ②◎表示後単語をクリック表示/非表示を切り替えます。
        (非表示の状態は継続します)
 ③◎表示後単語またはポップアップ以外をクリック[閉じる]
 Ⓡポップアップの右下↘でサイズを自由に変更できます。
 Ⓡウインドウのサイズを変更時にポップアップ位置が自動で調整されます。

プログラムの概要
 ①◎まず単独で表示可能なHTML書類を作成します。
  http://snowjobs.blog.jp/content/2015_08_04/DICT/DICT_test.html
 ②◎テキスト入力欄の単語
  <span class="dictPanel">案の定</span><br>
  <span class="dictPanel">エンゲル係数</span><br>
  <span class="dictPanel" data-word="kufuu_je">工夫(id=kufuu_je)</span><br>
 ③◎span.dictPanelのdata-word属性の値またはテキスト内容⇄
  DICT_test.htmlのDIV.wordのid属性の値と一致する内容(DIV.word)をポップアップに表示します。

 Ⓡ一致する項目がない場合はまだやっていません。****

入力欄の内容(先頭部分のみ)----△jqueryとjquery-UI は読み込み済みです
 <script type="text/javascript" src="http://snowjobs.blog.jp/content/2015_08_04/popup_test.min.js"></script>
 <DIV id="DICT_file_URL" class="display_none" style="display:none;"
   data-dict_URL="http://snowjobs.blog.jp/content/2015_08_04/DICT/DICT_test.html"></DIV>
 <style type="text/css" >
  P.normal_16 {
   color:#636363; line-height: normal; font-size: 16px;
   font-family:"HiraMaruProN-W4","Hiragino Maru Gothic StdN"; }
 </style>
 <P class="normal_16">
  <span class="dictPanel">案の定</span><br>.....

ポイント***③☆☆☆
 ①◎DICT_test.htmlのCSSスタイルを<DIV>で囲っています。
   jQueryで内容を取り込めるようになります。

 ②◎DICT_test.htmlの画像は「絶対パス」で指定して、
   CSSスタイルもHTML内に書いてください。(単体とポップアップ表示用の2種類)

 ③◎ポップアップのリサイズの↘ボックスのCSSスタイルを忘れずに...
  .dict_popup .ui-resizable-se {
    position: absolute;
    z-index: 998;
    right: 0; bottom: 0;
    width: 16px; height: 16px;
    cursor: se-resize; }
問題点
 ①◎この方法はDICT_test.htmlの画像を含めたすべてを読み込みます。
  表示する時だけ画像を読み込むようにするのがベストです。PHP...?

 ②◎ポップアップ表示中は単語のspan.dictPanel に余白を追加するため、
   他の要素が少し移動してしまいます。上に要素を追加する...?


ライブドアブログでマウスオーバーポップアップを表示できるかテストしてみる ①◎jQueryなどのプログラムを自身のブログ内にアップロードします

[ログイン][マイページ][画像/ファイル][画像/ファイル]
[ファイル管理][フォルダを作る][script]
[script][jqeury.js][jquery-ui.js] にアップロードすると

アドレスは次のようになりました。

  http://snowjobs.blog.jp/script/jquery.js
  http://snowjobs.blog.jp/script/jquery-ui.js

[右クリック][リンクをコピー]で確認できます。
「http://ブログのURL」 に /フォルダ/ファイル名 を付けた
分かりやすいものになるようです。


無料ブログで
階層構造でファイルを管理、アップロードが可能だとは思いませんでした。***③☆☆☆


②◎ブログにプログラムを読み込む設定を記述します
[マイページ][ブログ設定][カスタムJS]
  <script type="text/javascript" src="http://snowjobs.blog.jp/script/jquery.js"></script>
  <script type="text/javascript" src="http://snowjobs.blog.jp/script/jquery-ui.js"></script>
[記入後][保存する]

[記事を書く]に戻りテキスト入力欄の下の[プレビュー]を押した後
プレビュー画面のウインドウに切り替えます

[右クリック][要素の詳細を表示]HTMLの<head>の内容を見ると
一番下の<!-- Add Header Tag // -->部分に読み込まれていることが確認できました。
△MacOSX Safari8.0.5


動作確認
 [画像をクリック]この画像のURLが表示されます
この記事のHTMLタグ編集の入力欄では次のように記載されています。

<span class="normal">△MacOSX Safari8.0.5</span>
<img src="http://snowjobs.blog.jp/content/2015_08_02/image/08021336.jpg" id="img_test">
<script type="text/javascript">
 $(function() {
  $("#img_test").click(function(event){alert( $(this).attr("src") ); });
 });
</script>

補足
上記のタグ付きのHTML文字列は
HTML文字実体参照にエスケープして表示しています。
(javascriptタグ内のプログラムを除く)

 <&lt; >&gt; .....
MacOSXではClipMenuアプリで簡単に変換できます。
ClipMenu0.4.4a12***クリップボードの履歴をペースト
 ①◎タグ付きのHTML文字列をコピーします△履歴メニューに保存されます
 ②◎画面右上のClipMenuボタン①◎のメニュー項目[右クリック]
 ③◎[HTML▷][HTML文字実体参照にエスケープ]ペースト完了

補足
jQueryとjQuery UIは次のようにダウンロードしてください。
 ①◎Download Builder | jQuery UI
 ②◎Version1.11.4 (Stable, for jQuery1.6+)
 ③◎画面の下[Download]解凍します
 Ⓐ[jquery-ui-1.11.4.custom][external][jquery]jquery.js
 Ⓑ[jquery-ui-1.11.4.custom]jquery-ui.js
△この2つをアップロードしてください。

↑このページのトップヘ