上次在mootools商品展示中介紹了網頁設計中常見的商品展示方法，有人提出是否可以點大圖會開啟連結，這樣比較適合拿來做廣告Banner，當然是可以的阿，稍微修改一下就可以達到了。
　　先來看看效果如何，在點小圖換大圖的效果和上次一致，不過這次點大圖之後，會開啟指定的連結，下面的範例，分別開啟不同的三個連結，大家可以試著操作看看，這樣的話就可以拿來作活動促銷的廣告了，點了廣告之後自動導向活動說明頁面。

 

 

點小圖看切換效果

使用說明

一樣先載入需要的js檔，這邊載入的mootools版本為V1.3，不同版本可能有所不同請大家自己注意版本差異。

<script src="/js/mootools.js" type="text/javascript"></script>

之後將圖片的Html先寫好

<div id="bigphoto">
  <a href="/網址1" target="_blank">
    <img src="/image/01.jpg"/>
  </a>
</div>
<div id="thumbphoto">
  <a href="/網址1" target="_blank">
    <img src="/image/01.jpg"/>
  </a>
  <a href="/網址2" target="_blank">
    <img src="/image/02.jpg"/>
  </a>
  <a href="/網址3" target="_blank">
    <img src="/image/03.jpg"/>
  </a>
</div>

＊其中最外面分別使用id為bigphoto及thumbphoto的div包起來，然後再用a標籤將img標籤包起來，這邊的a標籤的href屬性就是寫著要切換的連結，如果不想讓他另開視窗的話，可以將大圖的target的屬性設為"_parent"。

接下來當然要使用CSS修飾一下，這邊的CSS沒有甚麼改變

#bigphoto img{
    border:1px solid #000;
    width:400px;
    height:300px;
}
#thumbphoto{
    text-align:center;
    width:400px;
}
#thumbphoto img{
    border:1px solid #000;
    width:40px;
    height:30px;
    margin-top:5px;
}

最後就是最重要的script了

<script type="text/javascript">
　var clicktochange = function() {
　　//替縮圖增加Click事件
　　$$('#thumbphoto a').addEvent('click', function(){
　　　//取得點擊縮圖的圖片位置、連結網址
　　　var src= this.getElement('img').get('src');
　　　var url= this.get('href');
　　　var bigpic =$$('#bigphoto a img');
　　　var bigurl =$$('#bigphoto a');
　　　bigpic.set("tween", {
　　　　duration: 1000,//淡出的速度
　　　　transition: Fx.Transitions.Quint.easeIn,//淡出的效果
　　　　onComplete: function() {
　　　　　bigpic.set('src',src);//將大圖的圖片變更為縮圖的圖片
　　　　　bigpic.fade(1);//淡入
　　　　}}).fade(0);
　　　bigurl.set('href',url);
　　　return false;
　　});
　};
//當頁面讀取完後執行clicktochange函數
window.addEvent('domready', function() {
clicktochange();
});
</script>

都用完之後，就可以趕快看看效果囉，script裡面的各參數大家可以自行調整看看自己喜歡的效果是怎樣的。