サイドバーに便利なコンテンツ？５

ベーシックプランで使えるコンテンツの「ページめくりの合成版」。右側サイドバー「CSSのお勉強」にある「ページめくり合成版１」の続き。
今回は、ソースの公開とコンテンツを複数個設置するときの変数や関数名の変更が必要な場所を説明します。

ソースの説明は前回の記事を参照してください。複数個の設置をするときは、赤い文字の部分を区別して設定します(別の名前にします)。これを区別しないと、一緒に設置した別の「ページめくり」が開きます。まあ、それも面白いかもしれませんが．．．．．．．。
<table border="0" width="170" bordercolor="white">
<tr>
<td height="20" bgcolor="#d2691e">
<script type="text/javascript"><!--
var subpage = new Array(2), pageOpen = new Array(false, false);
function setPage() {
    if (document.getElementById) {
今回は、「ページめくりの別方式」は１ページのみなので、つぎの数値は１。(使用するページ数より大きい数値のときは、あまりこだわらなくても良いようです)
        for (var j = 0; j < 1; j++) {
            subpage[j] = document.getElementById("subp" + j);
        }
    }
}
function dispPage(index) {
    if (document.getElementById) {
        if (pageOpen[index]) {subpage[index].style.display = "none";}
         else         {subpage[index].style.display = "block"; }
        pageOpen[index] = !pageOpen[index];
    }
}
//-->
</script>
<style type="text/css"><!--
    #menupage { position:relative; left:0px; top:0px; }
    .mainpage { width:164px;color:#000000; background-color:#ffcc99;             padding:2px; margin:1px; cursor:default; }
    .subp { width:170px;height:220px; background-color:#ffffcc; padding:0px;             position:relative; left:0px; display:none; }
    a     { color:#000000; }
-->
</style>
<div onMouseDown="setPage();">
<div id="menupage">
<div class="mainpage" onclick="dispPage(0);">ページめくり合成版 1</div>
    <div id="subp0" class="subp">
ここから下は、最初に紹介しました「ページめくり」の記事を参照してください。この部分も複数個設置する場合は変数や関数などの名前を区別する必要があります。複数個設置の場合の変更点や下記で省略した部分も書いてあります．
<script type="text/javascript"><!--
var uppermost=0, upperZ=8; function changeOrder(number) {
    if (document.getElementById) {
        if (number == uppermost) { return; }
     document.getElementById("ban" + number).style.zIndex = upperZ + 1;     document.getElementById("icn" + number).style.zIndex = upperZ + 2;
        uppermost = number;         upperZ += 2;    
}
}
//-->
</script>
<style type="text/css"><!--    
.ban  { width:170px; height:220px; border:0px solid gray; position:relative; left:0px; top:0px; z-index:5; background-color:#ffcc99;}
#ban0 { width:170px; height:200px; position:absolute; left:0px; top:20px; z-index:7;               background-color:#ffffcc; }
この間省略(#ban1,#ban2)
#ban3 { width:170px; height:200px; position:absolute; left:0px; top:20px; z-index:1;               background-color:#ffffcc; }
#icn0  { position:absolute; left:5px;  top:0px; z-index:8; }    
この間省略(#icn1,#icn2)
#icn3  { position:absolute; left:140px;  top:0px; z-index:2; }
.ban a:hover[href]{     color: yellow; }
-->
</style>
<div class="ban">
<div id="ban0">１ページ目の内容(メモ、画像、リンクなど)</div>
この間省略(ban1,ban2)
<div id="ban3">４ページ目の内容(メモ、画像、リンクなど)</div>
<div id="icn0" onclick="changeOrder(0);"><a href="#">page1</a></div>
この間省略(icn1,icn2)
<div id="icn3" onclick="changeOrder(3);"><a href="#">page4</a></div>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
おわり
ぜひ活用してくださいね。