spiqa logo

コーディング

jQueryのみで画像の切り替え

2019.09.27 Fri. コーディング

画像をレスポンシブで切り替える場合に、
cssのメディアクエリを使い、display:none(block)で切り替えている場合が多いかと思いますが
jQueryを使えばhtml上にはPC用の画像のみを設置することで、CSSの記述が不要になります。

 

 

 

【手順】

①PC用の画像には「xxx-pc.jpg」と命名
SP用の画像には「xxx-sp.jpg」と命名

 

 

②PC版の画像のみマークアップし、「rwd」クラス名を付ける
 

 

 

③jQueryに下記を入力する

 

 

 

 

【ポイント】
・画像のクラス名の”rwd”とjQuery内の
$(“img.rwd”)
を合わせる

・画像ファイル名の”-pc””-sp”とjQuery内の
var changeImg = $(this).attr(‘src’).replace(‘-pc.’ , ‘-sp.’);
を合わせる
 

 

 

いかがでしたでしょうか。
ぜひご活用ください。

 

 

 

最新記事

もっと見る≫

カテゴリー

spiqa logo

スピカ

ホームページ制作、LP制作、広告運用はお任せください。
ロゴや名刺などのデザイン制作、また店舗販促物などもお作りします。
お客様の立場、ユーザーの立場の両方に立ち+αの価値を提供し続けます。

制作のご相談はこちらから