jQueryを使ったツールチップとイメージプレビュー

1年ほど前の記事(記事中真ん中あたりの人名)にも使ったことがあるのですが、文字をオンマウスすると画像が表示されるようにしたことがあります。

これはjQueryプラグインを使って表示しています。

ちょっとメモしておかなければ忘れてしまいそうなので、備忘録がてら記事にしておきます。

Easiest Tooltip and Image Preview Using jQuery
↑こちらのサイトでJavaScriptの配布・説明などされていますが、FC2で使えるようにする手順を書いておきます。

↓サンプルです。
リンク文字や画像にマウスを置いて下さい。
(このブログは重いので、scriptの読み込みに時間がかかる場合があります。読み込んでいない場合はうまく表示されませんのでしばらく時間をおいてから試して下さい。)

【サンプル1】
「気の向くままに…」
文字の上にマウスを置くとツールチップが表示されます。
これは「title」属性で入力した文字が表示されるのですが、通常のツールチップとは違い、CSSでチップの色などを変えることができます。


【サンプル2】
「気の向くままに…」
文字の上にマウスを置くと画像が表示されます。
サンプルではスクリーンショットを使っていますが、これは自動的にサイトのスクリーンショットを取ってくるわけではなく、自分で画像を用意しなければなりません。


【サンプル3】
「去年の彼岸花」
文字の上にマウスを置くと画像と説明文が表示されます。


【サンプル4】
中秋の名月
画像の上にマウスを置くと大きな画像が表示されます。


【サンプル5】
中秋の名月
画像の上にマウスを置くと大きな画像と説明文が表示されます。



以下導入方法です。

2011092001.jpgEasiest Tooltip and Image Preview Using jQueryの「Download all 3 tricks in a bundle」のバナーをクリックし
、保存します。

2011092003.gifダウンロード(保存)したファイルを展開すると、フォルダの中に01~03の3つのフォルダが入っています。
フォルダ01は【サンプル1】(ツールチップ用)
フォルダ02は【サンプル4】【サンプル5】(プレビュー用)
フォルダ03は【サンプル2】【サンプル3】(スクリーンショット用)
のJavaScriptが入っています。

2011092004.gif01~03のそれぞれのフォルダの中に「jquery.js」と「main.js」が入っています。

「jquery.js」は同じものですので、この中から1つだけ使用すればよいですが、「main.js」はそれぞれ別のJavaScriptですので、すべてのスクリプトを使いたい場合はそれぞれ名前を変えておいたほうがよいと思います。
ここでは、フォルダ01内の「main.js」を「main_tooltip.js」に、
02内のを「main_preview.js」に、
03内のを「main_screenshot.js」に変更しました。


次にそれぞれのスクリプトに対するCSSを作ります。
「メモ帳」を開いて、下記を貼りつけてください。

#preview{
position: absolute;
border: 3px solid #ccc;
background: #333;
padding: 5px;
display: none;
color: #fff;
text-align: center;
}

#screenshot{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}

#tooltip{
position:absolute;
border:1px solid #333;
background:#cfe5f7;
padding:2px 5px;
color:#000;
display:none;
}


フォルダ02のpreviewタイプのものを例にとって簡単に説明すると
#preview{
position: absolute;
border: 3px solid #ccc; → → → → 外枠線の幅 と 線の形状、色
background: #333; → → → → 内枠線の色
padding: 5px;
display: none;
color: #fff;  → → → → 文字の色
text-align: center; → → → → 文字の位置
}

これらの数値を変えることによって色などを変更することができます。

2011092005.gif
好みの数値に変更し、適当に名前をつけて.cssで保存します。

ここでは「main.css」と名前をつけて保存しました。

2011092006.gif保存したcssファイル(ここではmain.css)をFC2の管理画面「ファイルアップロード」からアップロードします。
アップロードされたURLを使います。
URLがわからなくなった場合は、「表示」をクリックするとブラウザのURL欄にそのURLが表示されます。

2011092007.gifメモ帳を使って「main_◯◯.js」を開きます。
メモ帳から開くときに、「▼」-「すべてのファイル」にしておかないと「.js」ファイルは見えませんので、「すべてのファイル」にしておいてから選択してください。

2011092008.gif
説明画像のの部分に下記を書き足して、上書き保存します。

var cs = document.createElement("link");
cs.rel="stylesheet";
cs.href="http://blog-imgs-47.fc2.com/s/a/k/sakuraxren/main.css";
cs.type="text/css";
document.getElementsByTagName('head')[0].appendChild(cs);

↑赤字のURLは先程のcssファイルをアップロードしたURLになります。

2011092009.gif
こんな感じ。

他の「main_◯◯.js」ファイルも同様に書き加えて上書き保存します。

これらの「main_◯◯.js」ファイルと01~03のどのフォルダからでも良いので、「jquery.js」をアップロードします。
それぞれのURLが必要となりますので、アップロード画面で「表示」をクリックするなど、URLがわかるようにしておいてください。

管理画面の「テンプレートの設定」で、編集したいテンプレートの「複製」を念のために作って編集します。

2011092010.gif
HTML編集のhead内に下記を書き加えます。

(どこに挿入すればよいかわからない場合は</head>の直前にでも挿入してください。)

<script type="text/javascript" src="http://blog-imgs-47.fc2.com/s/a/k/sakuraxren/jquery.js"></script>
<script type="text/javascript" src="http://blog-imgs-47.fc2.com/s/a/k/sakuraxren/main_tooltip.js"></script>
<script type="text/javascript" src="http://blog-imgs-47.fc2.com/s/a/k/sakuraxren/main_preview.js"></script>
<script type="text/javascript" src="http://blog-imgs-47.fc2.com/s/a/k/sakuraxren/main_screenshot.js"></script>

↑赤字のURLは先程の.jsファイルをアップロードしたURLになります。

2011092011.gif
こんな感じ。

「更新」をクリックして確定しておきます。


以上で使える準備ができました。



使い方です。

【サンプル1】

「気の向くままに…」

<a href="http://sakuraxren.blog103.fc2.com/" class="tooltip" target="_blank" title="何でもありのブログです。">「気の向くままに…」</a>

赤字→リンク先URL
青字→オンマウスでツールチップを表示させるのに必要な記述
ピンク字→この場合は新しいタブで開く
水色字→ツールチップで表示される説明文です
黄緑字→表示される文字

【サンプル2】

「気の向くままに…」

<a href="http://sakuraxren.blog103.fc2.com/" class="screenshot" rel="http://blog-imgs-47.fc2.com/s/a/k/sakuraxren/20110919100.jpg" target="_blank">「気の向くままに…」</a>

赤字→リンク先URL
青字→オンマウスで画像を表示させるのに必要な記述
ピンク字→この場合は新しいタブで開く
水色字→オンマウスで表示される画像のURL
黄緑字→表示される文字

【サンプル3】

「去年の彼岸花」

<a href="http://blog-imgs-45-origin.fc2.com/s/a/k/sakuraxren/10101104.jpg" class="screenshot" rel="http://blog-imgs-45-origin.fc2.com/s/a/k/sakuraxren/10101104s.jpg" target="_blank" title="今年もそろそろ彼岸花が咲き始めましたね。">「去年の彼岸花」</a>
文字の上にマウスを置くと画像と説明文が表示されます。

赤字→リンク先URL
青字→オンマウスで画像を表示させるのに必要な記述
ピンク字→この場合は新しいタブで開く
水色字→オンマウスで表示される画像のURL
茶色字→オンマウスで表示される画像の下部に入る説明文
黄緑字→表示される文字

【サンプル4】
中秋の名月

<a href="http://blog-imgs-47.fc2.com/s/a/k/sakuraxren/20110912chuushuunomeigetu.jpg" class="preview" target="_blank"><img src="http://blog-imgs-47.fc2.com/s/a/k/sakuraxren/20110912chuushuunomeigetus.jpg" alt="中秋の名月" border="0" width="150" height="100" /></a>

赤字→リンク先URL 及び オンマウスで表示される画像のURL
青字→オンマウスで画像を表示させるのに必要な記述
黄緑字→表示される画像

【サンプル5】
中秋の名月

<a href="http://blog-imgs-47.fc2.com/s/a/k/sakuraxren/20110912chuushuunomeigetu.jpg" class="preview" title="2011年中秋の名月" target="_blank"><img src="http://blog-imgs-47.fc2.com/s/a/k/sakuraxren/20110912chuushuunomeigetus.jpg" alt="中秋の名月" border="0" width="150" height="100" /></a>

赤字→リンク先URL 及び オンマウスで表示される画像のURL
青字→オンマウスで画像を表示させるのに必要な記述
黄緑字→表示される画像
茶色字→オンマウスで表示される画像の下部に入る説明文


わかりにくい説明ですね…(^^ゞ




関連記事

コメントの投稿

おもしろそうですね。

あとでゆっくりやってみます。
ありがと~(*^ー^)/

くぅ様

クリックしなくても大きな画像が見れたり、プレビュー画面が見れるって楽しいですよね♪

ちょっとややこしい(説明が)ですが、やってみてください!

説明文書いてて、途中わけわからなくなってる状態ですので、もしわかりにくいところがあればご連絡ださいね!

こんな風に出来るようになったら、カッコイイ!
…けど、超初心者の私には、やってみる前から無理かもと思ってしまいます。

コツコツタイプなので(笑)、いつか必ず!チャレンジしてみます。

八千代様

八千代様、ご訪問とコメントありがとうございます♪

きっとすぐにできますよ!
これ、けっこう簡単でした。

ちょっと変わったこと(?)ができると嬉しくなってしまって、備忘録を兼ねてすぐに記事にしてしまっていまうんです( *^艸^)

もしチャレンジされて、わからなところなどありましたらお気軽にご連絡くださいね。
ひょっとしたら補足できるかもしれませんので。

またぜひ遊びに来てくださいねm(_ _)m



初めまして

突然コメント失礼します
是非挑戦してみようと、やってみたんですが
どこでどう間違ってるのか、小さい画像から大きい画像が表示されません。説明通りしてるはずなんですが
どこかが間違ってるんですね
HTMLのタグを張り付ける時3つ目はmain_imagepreview.jsとなっていますがmain_preview.jsかな~と・・・
でもどちらにしてもできないんです(;。;)残念です

miku様

ご訪問ありがとうございますm(_ _)m

すみませんっe-330e-466
ご指摘のとおりです。
間違えています。
「main_preview.js」ですね。

うまくできませんか……。
もし、差支えなければメールアドレスをご連絡いただけませんでしょうか。
いろいろとお伺いしながらでしたら、もう少し詳しく説明ができるかもしれません。

コメント欄に「管理者だけに表示を許可」にチェックを入れてご連絡くださるか、右のメールフォームからご連絡いただけるとうれしく思います。
また、できればブログアドレスもお聞かせいただくか、それがダメでしたら、テンプレートはどれを使っておられるか教えていただけると説明しやすくなりますので、よろしくお願い致します。

管理人のみ閲覧できます

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

ありがとうございました。

写真のポップアップがやりたかったのですが、どこのサイトを見てもどーーーーしても出来なくて困り果てていたところで、こちらのサイトを見つけました。
本当に丁寧に書かれていて、html初心者の私にも真似させていただくことが出来ました。
出来上がったときは本当に嬉しかったです。

どうもありがとうございました。

yumi様

yumi様、いらっしゃいませm(_ _)m
返信が遅くなり申し訳ございませんe-466

嬉しいコメントありがとうございますe-257
jqueryって楽しいですよ~。
こちらで説明したものはマウスオンで大きな画像が見られるようなものがほとんどですが、クリックするとポップアップしてくる…というのであれば
http://sakuraxren.blog103.fc2.com/blog-entry-1049.html
の記事に書いた「JQuery Image Flyout」というのもおすすめです!
ただ、これは設置方法など詳しく記事にしておりませんので、もしも興味がおありでしたら、ご連絡くださいね。

コメントありがとうございましたm(_ _)m

こんばんは。

れん様。
サンプル4,5のような表現の方法を探しており、こちらに辿りつきました。
JavaScriptは読みも書きもできませんが、れん様の丁寧な説明もあり、30分ほどでできました。
自分の画像で表現できた時にはめちゃくちゃ感動しました(´;ω;` )
これから使わせていただこうと思います!
本当にありがとうございます!!

まこと様

まこと様、いらっしゃいませm(__)m

嬉しいコメントありがとうございます!
私もJavaScriptちんぷんかんぷんなんですけど、見よう見まねでやってみたらできたことを備忘録として記事にしていることがほとんどです。
そのため、忘れた頃に使うとき、記事を見直すと簡単にできるようにと思い、くどくどと書き込んでおります。
それがお役に立てたようで、ほんとうに嬉しく思います!

ありがとうございました(*^_^*)

こんばんは!
ありがとうございます。
まさにサンプル4がやりたかったことでした。
途中まではできたのですが、しだいに分からなくなりまして・・・別な日にまたチャレンジしたいと思います。
また訪問させていただきますね。

からたち様

からたち様、いらっしゃいませm(__)m
返信が遅くなり申し訳ありません。

この説明はCSSの組み込みをしてあり、却ってややこしい説明になっているかもしれません。
組み込まずに、CSSの部分はFC2のテンプレート管理画面CSS編集に貼り付ける方が簡単だと思います。

うまくいくといいですね!
よくわからない箇所がありましたらいつでもご連絡ください。

コメントありがとうございましたm(__)m

枠の設定

こんにちは。
たびたびすみません。
プレビュー段階で、オンマウスで拡大表示させることができました!!
ありがとうございます!
ちょっと変更したい部分があるのですが、
サンプル4で、
枠をつけない設定にしたいときはどうすればよいのでしょうか。
必ず枠をつけないと駄目でしたら、白枠のみにしたいのですが、できますでしょうか?
変更場所や数値など、よろしくお願いいたします。

からたち様

こちらのコメントへの返信、すっかり忘れてしまっておりましたm(__)m
申し訳ありません。

うまく設置できているようですよ!
ややこしい説明にお付き合いくださってありがとうございました。

これからもよろしくお願い致します。

はじめまして
初めてコメント書かせていただきます。
ワードプレスで「サンプル03」を導入したく、頑張ったのですができません。

FFFTPにどうやってアップロードするのかわかりません。

CSSはスタイルシートに記載しました。

お時間あるときに回答頂ければ助かります。

ゴン様

ゴン様、ご訪問ありがうございます。

まず…先に謝っておきます。
私はワードプレスは使ったことがないので、仕組みがわからず、ワードプレスで使えるようにどのようにすればよいのかわかりません。
申し訳ありません。

それとも…ワードプレスでの設置方法ではなく、FFFTPを使ってのファイルのアップロード方法をお尋ねなのでしょうか?

FFFTPの設定はお済みでしょうか?
設定がお済みであれば、画像などをアップロードするのと全く同様の手順だと思いますが…。

FFFTPの使い方について詳しく書いてあるサイトがたくさんありますので、そちらをご覧いただく方が確実かと思います。

ゴン様のお力になれず、申し訳ございません。
**コメントを投稿**

コメントの投稿

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