PHP - 點擊更換頭像

原理：

操作流程：

首先點擊頭像圖片，彈出選擇窗口，選中其中一個則窗口推出頭像更換。

 

效果：

 

主頁面代碼：

<tr>
    <td>頭像：</td>
    
    <td><input type="hidden" name="face" value=""/>
    <img src="./face/m01.gif" alt="頭像" class="face" id='faceimg' onclick="javascript:window.open('face.php','face','width=420,height=600,top=0,left=0,scrollbars=1');"/></td>
</tr>

 

子頁面代碼（彈出窗體頁面）：

http://www.cnblogs.com/KTblog/p/4958731.html

    <!-- 使用遍歷文件夾函數，獲取頭像 -->
    <?php $facearray = _myreaddir(dirname(__FILE__)."/face"); ?>

 

    <div id="face">
        <h3>請選擇頭像：</h3>
        
            <?php foreach ($facearray as $num){
                    echo "<img src='face/".$num."' alt='face/".$num."' title='".$num."'/>";
            }?>

    </div>

 

使用的JS代碼：
引用：

    <!-- 點擊更換頭像 -->
    <script type="text/javascript" src="./js/face.js"></script>    

代碼：

window.onload =  function() {
    //獲取face.php頁面中的頭像對象
    var img = document.getElementsByTagName('img');
    //進行循環
    for(i=0;i<img.length;i++){
        //對選擇的對象觸發點擊事件
        img[i].onclick = function (){
            //調用 _opener()函數
            _opener(this.alt);
        };
    }
}

//顯示頭像函數
function _opener(src){
    //獲取父頁面頭像對象
    var faceimg = opener.document.getElementById('faceimg');
    //將頭像的img更換
    faceimg.src = src;
    //將父頁面中的register表單中的name為face的值更改為src。
    opener.document.register.face.value = src;
}