ホームページ、ページのカスタマイズなど、お客様のEC事業をレベルアップいたします。jQueryjQueryで画像とキャプションの表現方法!今回は、jQueryで画像とキャプションの表現方法!につきまして、実際にサンプルコードを用いて、詳しく記載していこうと思います。HTML上に配置された画像にjQueryでマウスオーバーするとキャプション(説明文)が追加で表示する方法を記載してみようと思います。写真をよく見せたい、また、配置スペースが限られていて説明を少し付け加えたい時などに有効かと思います。汎用的な実践方法になるので、ぜひ試して頂きたい技術のひとつになっています。・jQueryでキャプションを表現する際のHTML・キャプション表現のCSS・jQuery:マウスオーバーキャプション表現1・jQuery:マウスオーバーキャプション表現2・jQuery:マウスオーバーキャプション表現3上記について記載していこうと思います...。jQueryでキャプションを表現する際のHTMLそれえはまず、完成サンプルを記載してみます。サンプルdemoページ今回使用するサンプルHTMLを記載してみます。上記サンプルの3枚の画像を配置してみます。src=”images/vol3.jpg”><strong>碓氷峠の森公園交流館「峠の湯」</strong><span></span></p></div></div>上記コードで特徴的なのは、各キャプション(strong要素)の後に空のspan要素を記述する点になります。この要素にはテキストや画像などは含まれていませんが、後でjQueryからCSSを操作することで、この要素にマウスオーバーした際に「半透明の背景色」と「内側の影」を加えます。キャプション表現のCSSそれでは今度はCSSを記述してみます。0;——3}CSSでは、初期状態としてキャプションの背景(半透明の紺の四角形)1と、マウスオーバー時にspan要素に指定する「半透明の背景色」と「内側の影」を指定しています2。span要素に関しては3で透明にしています。ここで「キャプションを含むstrong要素は透明にしなくてもよいのか」と思われた方は勘の鋭い方です。初期状態ではキャプションも非表示にする必要があるのですが、その方法はこれからご説明いたしますが、サンプルの3つの画像ごとに異なるので、あえてここでは指定していません。jQuery:マウスオーバーキャプション表現11つめの画像のキャプションはとてもシンプルです。画像上にマウスオーバーすると、徐々にキャプションが表示され、画像の外周に影がつきます。strong)のみに以下のCSSを適用します。ここではstrong要素、つまり画像のキャプションを透明にしています。0;}1つめの画像のjQueryそれでは1つめの画像にキャプション表現を加えてみます。上記サンプルの効果を実現するコードは以下のようになります。duration);});});初めに変数durationと変数$imagesを宣言しています1。変数durationには、300ミリ秒を格納しています。変数$imagesには今回の処理対象である画像のjQueryオブジェクトを格納しています。このようにjQueryオブジェクトを変数に格納して使い回すと、プログラム全体のパフォーマンスを向上させることができます。変数durationと変数$imagesは後述する2つの画像でも使用しますが、以降の各説明ではこれらの変数については解説しませんので、ここでしっかり把握しておいてください。各画像に対する処理では、最初にfilter()メソッドを使用して処理対象の画像を絞り込んでいます2。filter()メソッドは「jQueryオブジェクトに含まれる各要素の中から、セレクタを使用してさらに要素を絞り込むメソッド」です。今回の場合、変数$imagesには3つの画像すべてが含まれているので、最初にfilter()メソッドで処理対象を1つめの画像に限定しています。on()メソッドについては、簡単に記載すると今回の場合、「マウスが乗ったらナニナニもしくは、マウスが外れたらナニナニ」になります。find()メソッドを使用して処理対象をさらに絞り込んだうえで3、次の処理を実行しています。・マウスオーバー時は徐々に不透明度が(opacity)が「1」、表示された状態になる4。・マウスアウト時は徐々に不透明度(opactity)が「0」になる5。上記ではfilter()メソッドを使用して処理対象の要素を絞り込んでいますが、以下のように指定することでも同様の結果になります。p”).filter(“nth-child(1)”);jQuery:マウスオーバーキャプション表現22つめの画像ではキャプションが左からスライドインしてくるような表現を実装しています。仕組み自体はシンプルですが、この表現は応用次第で様々な個所に利用できます。strong)のみに以下のCSSを適用しています。ここではstrong要素(画像のキャプション)を透明にし、また画像の上から左側に少しずらして配置しています。-200%;}2つめの画像のjQueryそれでは2つめの画像にキャプション表現を加えてみます。上記サンプルの効果を実現するコードは以下のとおりです。duration);});});変数durationと変数$imagesは、1つめの画像と共通の変数になります。先に記載いたしました1つめの画像との違いはanimate()メソッドの処理内容です。1つめの画像の場合はstrong要素とspan要素に対して同じ処理を実行していましたが、2つめの画像の場合、キャプションをスライドインで表示させるため、処理を分けています。‘0%’に向かってアニメーションさせることで表示領域に移動しています1。‘-200%’に向かってアニメーションさせることで表示にしています2。jQuery:マウスオーバーキャプション表現33つめの画像では、2つめの画像に適用したキャプション表現をさらに発展させています。3つめはキャプションを画像下部からスライドさせるとともに、画像自体も少し上方向にスライドさせています。strong)のみに以下のCSSを適用しています。ここではstrong要素(画像のキャプション)の下部に不透明の色面を敷き、画像下部に配置しています1。0px;へと変化させることで、画像下部から表示されるキャプションを表現しています。0px;に配置しています。0px;——2}3つめの画像のjQuery3つめの画像のキャプション表現の説明を記載します。上記の効果を実現するコードは以下のとおりになります。duration);});});ここまでの説明をしっかり読まれた方であれば、上記のコードは比較的簡単に読解できるものと思います。基本的な仕組みや処理内容は他のキャプション表現と同じです。異なるのは処理対象や細かい処理内容になります。1.2」があります3。この変数の値は「アニメーションにかける時間」です。この値を1.2倍にすることで、アニメーションにかける時間が増えます。アニメーションされることになります。このように共通で使用する変数に対して部分的に計算を加えることで、均一的になりがちなアニメーションの動きに変化を加えることが可能になります。といことで今回は、jQueryで画像とキャプションの表現方法!につきまして、実際にサンプルコードを用いて、詳しく記載しました。比較的簡単な内容ですが、キャプションの表現方法を加えることで、ページ自体の表現方法が広がることと思います。地味で少ない動きですが、見ているユーザーにとっては印象的で画像自体の内容を、覚えてもらいやすくするような効果があることと思います。今回はここまで...。お仕事のご依頼は↓コチラより...、それではまた次回...。私はWeb制作をすべて独学で勉強してきました。今も継続中で、すでに16年ほど勉強中です。