jQuery WEB制作

jQueryでウィンドウサイズによって読み込む画像を切り替える

投稿日:

JQuery logo

サイトデザインの確認のために、
全体を一枚のJPGで書き出してサクッとブラウザで確認してもらいたい時に
ブラウザの幅を広げると大きな画像に、狭めると別に用意した小さな画像を表示させたい!

HTMLだけでは画像の差し替えは出来ないし、
CSS のbackground-imageとメディアクエリでやってみたけどうまくいかない。
長ーーーい縦スクロークがうまく表示されないのだ。 

 いつものようにググってみると、
jQueryで実現出来るらしい。

■設置手順

まずはじめに、画像を用意。
画像ファイルは末尾に_spと_pcのついた2種類を用意して、マークアップ時には_spを記述しておく。

ってことは、○○○_sp.jpgと○○○_pc.jpgの画像を用意して、
HTMLには、spの方だけ書いておくのね。

 

 画像を切り替えるためのスクリプトはこれ。

 

このスクリプトはHTMLファイルの中の<head></head>の間に<script></script>で囲って記述。

サーバーにアップして、ページを確認するとバッチリ!!思った通りの動きです。
下記ページで公開しているスクリプトを使わせていただきました。
解説もくわしく載っているので、とってもわかりやすかったですよ。
TAM inc.様に感謝! 

参照:http://www.tam-tam.co.jp/tipsnote/javascript/post8851.html

本サイトの内容に誤りや不正確な記述がある場合やサンプルに基づくいかなる結果も一切の責任を負いかねますので、あらかじめご了承ください。

-jQuery, WEB制作

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

サイトの文章や画像を簡単にコピーできないようにするには?

  Devanath / Pixabay 作ったサイトの文章や画像を簡単にコピーできないようにする方法です。 画像の保存を完全に防ぐことはできません。 でも、コピーにひと手間かかることが抑止 …

no image

HTML上で要素に直接スタイルシートを指定する

  ・style属性で、要素に対して直接スタイルを指定することができます。 ・この属性を使用する場合は、meta要素で基準と …

『IcoMoon』のWeb-FontをWebページに実装する方法

オリジナルのアイコンフォントを簡単につくれる『IcoMoon』。 自作のSVGアイコンづくりで活用していたけど、 Web-fontも使えるので実装の方法を確認しておく。 『IcoMoon』へアクセスし …

サイトで使っているサーバーを調べる方法

現在公開されているWebサイトがどこのサーバで公開されているのかを知りたいとき、どうすればいいか調べてみました。 というのも、あるレンタルサーバーを解約することにしたのですが、そこにはクライアントさん …

HTML共通部分を部品化して読み込ませる方法

今回はHTMLでサイトを作って欲しいとの要望。 ナビやヘッダー、フッター部分は全ページ共通なので、修正や後々のメンテナンスも考えて、それらを部品化して1箇所で管理したい。 HTMLには、他のページを読 …

サイト制作・グラフィック制作をしているデザイナーです。制作で躓いたことの備忘録としてこのブログを始めました。
たくさんの検索結果から、実際に何度も何度も自分で試してみて、自分に合うなと思った方法やうまくいった方法をこのブログに書き留めています。
プログラム関係のことはもっぱらコピペ派。
自分でゴリゴリ書くことはできません。。。プログラムが分かる人がうらやましいです。
そんな私でもなんとかサイト制作ができるのはグーグル先生と貴重な情報をおしげもなく公開してくださっているたくさんの方々のおかげ。
有志のみなさまに日々感謝しつつ制作させていただいています。