コニファ・ロゴ

ツール集:backgroundのパターン画像を変更して見た目を比較、確認

jQueryを使って、backgroundのパターン画像を変更して敷き詰め、実際の見た目がどうなるのか確認します。
使い方:パターン画像の一覧から、画像名をクリックすると、下側のサンプルの背景が選んだ画像に置き換わります。

パターン画像の一覧

サンプル

bg-4x4gray.gif

上のh4要素が画像の名称です。下は背景のパターン画像とのマッチング確認用のダミー画像です。

ダミー画像

サンプルのhtmlソース

  <div id="sample">
    <h4>bg-5x5gray.gif</h4>
    <p>上のh4要素が画像の名称です。下は背景のパターン画像とのマッチング確認用のダミー画像です。</p>
    <img src="img3/dummy.png" alt="ダミー画像">
  </div>

サンプルのscriptソース

$(function(){
	$('ul#img_list li a').click(function(){
		var bglink = $(this).attr("href");
		var name = $(this).text();
		$("div#sample")
		.css("background-image","url("+bglink+")");
		$("div#sample h4").text(name);
		return false;
	});
});

 

戻るボタン