リプタクのもう覚えられません
Google
Web サイト内
topmemo ▶ 重なり順を変更する方法

JavaScript

重なり順を変更する方法

JavaScriptでz-indexの順番を入れ替えるサンプル。

【サンプル】画像クリックで順番入れ替え

画像1 画像2 画像3


【サンプルソース】JS

<script type="text/javascript">
// <![CDATA[
function jsTest(z1,z2,z3){
	document.getElementById("p1").style.zIndex = z1;
	document.getElementById("p2").style.zIndex = z2;
	document.getElementById("p3").style.zIndex = z3;
}
// ]]>
</script>


【サンプルソース】CSS

<style type="text/css">
<!--
#p1 {
	z-index: 1;
	position: absolute;
}
#p2 {
	z-index: 2;
	position: absolute;
	margin-top: 50px;
	margin-left: 50px;
}
#p3 {
	z-index: 3;
	position: absolute;
	margin-top: 100px;
	margin-left: 100px;
}
-->
</style>


【サンプルソース】XHTML

<a href="JavaScript:jsTest(3,1,2)"><img id="p1" src="pic1.jpg" alt="画像1" width="300" height="300" /></a>
<a href="JavaScript:jsTest(1,3,2)"><img id="p2" src="pic2.jpg" alt="画像2" width="300" height="300" /></a>
<a href="JavaScript:jsTest(1,2,3)"><img id="p3" src="pic3.jpg" alt="画像3" width="300" height="300" /></a>
last update 2009.12.25
参考・出典等
「JavaScript ポケットリファレンス 古簱一浩 著」

▲page top

topmemogalleryblogtestaboutlinksmail
Copylight(C)2008-2009 Riptac. All Rights Reserved.