画像の表示切り替え

特定のページだけ画像を変える

すべてのページに貼られた画像（ヘッダとかバナーとか）

このページだけに表示される画像


$(function(){
	$("img.headerimg").attr("src","images02.png");
});


//すべてのページに貼られた画像（ヘッダとかバナーとか）
	<p>
		<img src="images01.png" alt="">
	</p>

//このページだけに表示される画像  //ページIDなどと組み合わせるのが吉
	<p>
		<img class="headerimg" src="images01.png" alt="">
	</p>

クリックで画像をチェンジ

ここの表示画像が変わる

上の画像の切り替えリンク。ここをクリックで上の画像が変わる。


a.linkbutton {
	background: #87cefa;
	width: 200px;
	height: 50px;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	}


$(function(){
	$("a.changeImg").click(function(){
		$("img#changeSpace").attr("src",$(this).attr("href"));
		return false;
	})
});


<p>ここの表示画像が変わる</p>
<p>
	<img src="display.png" id="changeSpace" alt="">
</p>

<p>上の画像の切り替えリンク</p>
<ul>
	<li><a href="display01.png" class="changeImg"><img src="changeButton01.png" alt="ボタン１"></a></li>
	<li><a href="display02.png" class="changeImg"><img src="changeButton02.png" alt="ボタン2"></a></li>
	<li><a href="display03.png" class="changeImg linkbutton">ボタン3（テキスト）</a></li>
</ul>

TOP