ベストセラー人気 WordPress テーマTop 30 詳細

jQueryを使ってイメージオーバーレイ実装する

Last Updated:2020年11月15日| 4のコメント
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

特定の画像の上に別の画像をオーバーレイさせる方法です。 次のようなjQueryコードを使用して、特定の要素の画像の上に別の画像を重ね配置することができます。

$('.target').before('<img src="이미지 URL" class="overlay" />');

このとき、CSSで position:absoluteを使用します。

サンプル:

HTMLサンプル

<img class="target" src="http://dummyimage.com/300x200/fc0000/faf5f8" />

jQueryのサンプル

$(function() {
$('.target').before('<img src="http://dummyimage.com/50x50/1500fa/faf5f8" class="overlay" />');
});

CSSのサンプル

.overlay
{
padding-left:5px;
position: absolute;
margin-left: 3px;
margin-top: 15px;
}

結果:

これにより、次のように、本来の画像の上にjQueryのスクリプトで指定されたイメージがオーバーレイされて表示されます。

イメージオーバーレイjQueryのサンプル

デモ:  jsfiddle

この方法は、さまざまな応用が可能です。 たとえば、販売終了した画像に「品切れ」という道標を付けたい場合、在庫切れの場合、イメージ classに "soldout「クラスを追加するようにコーディングして、上記のjQueryコードを使用すると、簡単に "品切れ"のラベルを追加することができます。 WordPressで使用する場合には、 WordPress Codexページを参考にjsファイルをenqueque(フック)必要があります。

メモ:



4のコメント

コメント

    • こんにちは?
      https://www.thewordcracker.com/kboard-download/kboard-quote-request-form-bootstrap-skin/ 文にjQueryをenqueueする例を示します。 参考にしてください。

      回答する