3D互動式相簿

最近看到http://blog.xuite.net/tatt_tatt/summer，這個活動網站。看到它的檔頭區塊有些圖片按鈕，有網友問道怎麼做的，所以我也貼過來(貼到我自己的部落格裡面)，然後跟大家討論一下怎麼做的！

基本上原本我的部落格也就有一堆的按鈕，像是這一些↓

這些圖片按鈕是貼在自由欄位中的！一般而言，貼這些圖片按鈕的HTML語法到自由欄位(自訂欄位)中，它會顯示在左邊側欄Left SideBar或是Right SideBar！

要怎麼將自由欄位的內容"跳脫"左右欄？跑到Banner檔頭區塊？其實這部份以前寫過教學：http://blog.xuite.net/jeanson61/xuite/4495005，透過CSS裡面的"位置"定義，去將要顯示的東東"位移"！所以看到這次的http://blog.xuite.net/tatt_tatt/summer夏日活動，當然也是這樣來弄的，只是他們有美化(美工啦)，我是弄得很醜的按鈕。我看到它頁面上的Banner圖片是↓

然後壓在上面的按鈕是↓
     我故意弄空白在圖片中間，讓大家知道它是分開的不同圖片。

然後看到它的程式碼是比我之前寫的複雜，它還做mouse over滑鼠移動過去變換圖片↓

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i  for(i=0;!x&&d.layers&&i  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->

 
   
     
     
     
     
           
  
 

http://blog.xuite.net/tatt_tatt/summer">         http://7.blog.xuite.net/7/2/a/6/20470973/blog_1158550/txt/17865022/30.jpg" alt="活動首頁" title="活動首頁" id="m" name="m" onmouseover="MM_swapImage('m','','http://7.blog.xuite.net/7/2/a/6/20470973/blog_1158550/txt/17865022/31.jpg',0)" onmouseout="MM_swapImgRestore()">

http://blog.xuite.net/tatt_tatt/summer/17876124">         http://7.blog.xuite.net/7/2/a/6/20470973/blog_1158550/txt/17865022/32.jpg" alt="好玩徵文" title="好玩徵文" id="i" name="i" onmouseover="MM_swapImage('i','','http://7.blog.xuite.net/7/2/a/6/20470973/blog_1158550/txt/17865022/33.jpg',1)" onmouseout="MM_swapImgRestore()">

http://blog.xuite.net/tatt_tatt/summer/17876128">           http://7.blog.xuite.net/7/2/a/6/20470973/blog_1158550/txt/17865022/34.jpg" alt="好玩徽章" title="好玩徽章" id="s1" name="s1" onmouseover="MM_swapImage('s1','','http://7.blog.xuite.net/7/2/a/6/20470973/blog_1158550/txt/17865022/35.jpg',2)" onmouseout="MM_swapImgRestore()">

http://blog.xuite.net/tatt_tatt/summer?st=c&w=1183067&p=1">           http://7.blog.xuite.net/7/2/a/6/20470973/blog_1158550/txt/17865022/36.jpg" alt="強打優惠" title="強打優惠" id="s2" name="s2" onmouseover="MM_swapImage('s2','','http://7.blog.xuite.net/7/2/a/6/20470973/blog_1158550/txt/17865022/37.jpg',3)" onmouseout="MM_swapImgRestore()">

http://7.blog.xuite.net/7/2/a/6/20470973/blog_1158550/txt/17865022/38.jpg" alt="得獎公布" title="得獎公布" id="s3" name="s3" onmouseover="MM_swapImage('s3','','http://7.blog.xuite.net/7/2/a/6/20470973/blog_1158550/txt/17865022/39.jpg',4)" onmouseout="MM_swapImgRestore()">

然後重點是它語法中的：div id="menubar" style="z-index:50;border: 0px solid #000000;  position: absolute; top: 258px; left:0px; width:163px;"
這部份就是在定義圖片的"位置"，它是採絕對位址定位position :absolute;，然後位置在距上方258px(top: 258px)，左邊0px( left:0px)。這個絕對位置的原點座標(0,0)，並不一定是剛好位於版面的左上角！一般而言就是對於一個特定區塊的左上角，所以如果這些CSS語法(position: absolute; top: 258px; left:0px; width:163px)是貼在左欄，那麼原點它就是在左欄區塊的左上角；如果如果這些CSS語法(position: absolute; top: 258px; left:0px; width:163px)是貼在右欄，那麼原點它就是在右欄區塊的左上角。不過這是當左右欄是一個絕對區塊而言，這裡所謂的絕對區塊就是像在自定樣式CSS裡面的↓
/*左欄*/
#linksLeft{
 position:absolute;
 left:25px;
 width: 210px;
 margin-top: 0px;
}

/*右欄*/
#linksRight{
 position:absolute;
 right:25px;
 width: 210px;
 margin-top: 0px;
}
它都有一個位置的絕對定義(position:absolute;)，所以它有它自己的原點！！
但是如果它是↓
/*左欄*/
#linksLeft{
 float: left; 
width: 200px;
 padding-left: 0px;
}
/*右欄*/
#linksRight{
float: right;
width: 200px;
  padding-right: 0px;
}
那麼左右欄區塊它們並非絕對的位置，是相對於Parent區塊的相對位置，所以其原點就是Parent區塊[/*定位框*/#container ]的左上角。其他資訊可以參考之前寫的文章：http://blog.xuite.net/jeanson61/xuite/14283354

當 然這個範例是比較炫、比較複雜的方式，因為圖片按鈕與背景圖片要放對位置，否則將會出現圖片歪斜的情形。我個人建議用另外一種簡單的做法，就是將按鈕跟背 景就都畫好在一張圖片上，然後用透明的圖片當作連結語法壓在圖片上面，這樣就不會需要將圖片對得非常正確整齊！這個做法比較像是http://blog.xuite.net/hitravel/fun/17876045，這個網頁的上方按鈕的作法，它的背景圖片↓

按鈕跟圖片是做在一起的，它的按鈕在自由欄位貼的是↓

http://blog.xuite.net/hitravel/fun" title="首頁">
http://c.blog.xuite.net/c/f/7/b/11732000/blog_4704/txt/17851115/13.gif" border="0" />

http://blog.xuite.net/hitravel/fun/17876045" title="活動說明">
http://c.blog.xuite.net/c/f/7/b/11732000/blog_4704/txt/17851115/13.gif" border="0" />

這些教學可能需要對HTML及CSS語法略有概念的人比較容易瞭解，初入門的網友，我想我並不期望大家看得懂，立即會用。所以雖然有人問，我也回答了，可是就真的要看個人是否可以瞭解箇中奧妙。