レスポンシブなサイトで画像をPCと他端末で切り替えたい場合ってありますよね。

背景画像を入れ替えれば一発じゃんと思いますが、実際の制作において、全部が全部その方法でできるわけでもないです。

 

ハードコーディングの際に、

<p><img src="images/pcimage1.jpg" alt="画像1(PC)" class="pcView" />
<img src="images/spimage1.jpg" alt="画像1(SP)" class="spView" /></p>
<p><img src="images/pcimage2.jpg" alt="画像2(PC)" class="pcView" />
<img src="images/spimage2.jpg" alt="画像2(SP)" class="spView" /></p>
<p><img src="images/pcimage3.jpg" alt="画像3(PC)" class="pcView" />
<img src="images/spimage3.jpg" alt="画像3(SP)" class="spView" /></p>

とimgタグを余分に書かなきゃいけないわけで、ソースコードにそういった記述が散見すると、あとから見た時にかなり見づらい。

imgの設置数が単純に2倍となり、さらにそれに全てALTを設定すると・・・なかなかどうしておぞましいことに。

更にHTML直書きの見えないimgへALTを設定するわけなので、隠しテキストと間違えられたり。（これは確証なし）

 

とりあえず、そろそろひとつのimgタグだけで両方指定できるようにスクリプト作ってもいいんでないか、と思いました。

 

で、例によって超便利なjQuery。

まぁ、本当はJavaScript単体だけで動作させたかったんですがね。

まぁ、時間と実力の兼ね合いと、きょうび、jQuery使ってないサイトなんてそこまでないわけでこっちで作成。

 

JavaScript

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script>
	$(document).ready(function(){
		$('img[data-addsrc]').each(function(){
			$(this).addClass('pcView');
			$src = $(this).data('addsrc');
			$alt = $(this).attr('alt');
			$(this).parent().append('<img src="'+$src+'" alt="'+$alt+'" class="spView" />');
		});
	});
</script>

HTML

<p><img src="images/pcimage1.jpg" data-addsrc="images/spimage1.jpg" alt="画像1" /></p>
<p><img src="images/pcimage2.jpg" data-addsrc="images/spimage2.jpg" alt="画像2" /></p>
<p><img src="images/pcimage3.jpg" data-addsrc="images/spimage3.jpg" alt="画像3" /></p>

 

CSS

.spView{ display:none; }
@media screen and (max-width:667px){ .pcView{ display:none; }
  .spView{ display:inline-block; }
}

サイズの変わるバナーイメージとかに使うといいかもね。

 

さぁて・・・フラストレーションがたまる仕事へまた戻りますかね・・・。