php,播放資料夾裡面的音樂-2

懶的說明了。因為部落格資料庫有設定自動備份,就當作我把程式碼備份上來好了!

<?php
setlocale(LC_ALL, 'zh_TW.UTF8');
$path = $_GET['path'];
if( $path == NULL){
    $path = ".";
}
if( @ereg("..", $path) ){
    $path= ".";
}
SETCOOKIE("path", $path);
echo "n";
echo "path is $path
n"; // e.g. url:"page.php?upload=true" as handler property if(isset($_GET['upload']) && $_GET['upload'] === 'true'){ $headers = getallheaders(); if( // basic checks isset( $headers['Content-Type'], $headers['Content-Length'], $headers['X-File-Size'], $headers['X-File-Name'] ) && $headers['Content-Type'] === 'multipart/form-data' && $headers['Content-Length'] === $headers['X-File-Size'] ){ // create the object and assign property $file = new stdClass; $file->name = basename($headers['X-File-Name']); $file->size = $headers['X-File-Size']; $file->content = file_get_contents("php://input"); // if everything is ok, save the file somewhere if(file_put_contents($_COOKIE['path'].'/'.str_replace(""", "", $file->name), $file->content)) exit('OK.請重新載入頁面!'); } // if there is an error this will be the output instead of "OK" exit('Error'); } ?> 電音大帝國 Alpha /** basic Safari 4 multiple upload example * @author Andrea Giammarchi * @blog WebReflection [webreflection.blogspot.com] */ onload = function(){ function size(bytes){ // simple function to show a friendly size var i = 0; while(1023 < bytes){ bytes /= 1024; ++i; }; return i ? bytes.toFixed(2) + ["", " Kb", " Mb", " Gb", " Tb"][i] : bytes + " bytes"; }; // create elements var input = document.body.appendChild(document.createElement("input")), bar = document.body.appendChild(document.createElement("div")).appendChild(document.createElement("span")), div = document.body.appendChild(document.createElement("div")); // set input type as file input.setAttribute("type", "file"); // enable multiple selection (note: it does not work with direct input.multiple = true assignment) input.setAttribute("multiple", "true"); // auto upload on files change input.addEventListener("change", function(){ // disable the input input.setAttribute("disabled", "true"); sendMultipleFiles({ // list of files to upload files:input.files, // clear the container onloadstart:function(){ div.innerHTML = "Init upload ... "; bar.style.width = "0px"; }, // do something during upload ... onprogress:function(rpe){ div.innerHTML = [ "上傳檔案佇列: " + this.file.fileName, "目前檔案進度: " + size(rpe.loaded) + " of " + size(rpe.total), "總共檔案進度: " + size(this.sent + rpe.loaded) + " of " + size(this.total) ].join("
"); bar.style.width = (((this.sent + rpe.loaded) * 200 / this.total) >> 0) + "px"; }, // fired when last file has been uploaded onload:function(rpe, xhr){ div.innerHTML += ["", "Server Response: " + xhr.responseText ].join("
"); bar.style.width = "200px"; // enable the input again input.removeAttribute("disabled"); }, // if something is wrong ... (from native instance or because of size) onerror:function(){ div.innerHTML = "The file " + this.file.fileName + " is too big [" + size(this.file.fileSize) + "]"; // enable the input again input.removeAttribute("disabled"); } }); }, false); bar.parentNode.id = "progress"; }; function mkdir(){ var dirName = prompt("輸入資料夾名稱", "新資料夾"); var path = document.getElementById('path').innerHTML; window.location.replace("mkdir.php?path="+path+"&dirName="+dirName); } <?php if( @!chdir("$path") ){ echo "error when chdir to $path
n"; $path= "."; } exec("ls", $file); $end = strrpos($path, "/"); $upper_path = substr($path, 0, $end); echo "上一層n"; echo " | "; //echo "新增資料夾n"; echo "新增資料夾"; echo "
"; foreach( $file as $per_file ){ $string = filetype("$per_file"); if( $string == "file" && @ereg(".mp3",$per_file) ){ echo "$per_file"; echo " "; echo "移除
n"; } elseif( $string == "file" && @ereg(".MP3",$per_file) ){ echo "$per_file"; echo " "; echo "移除
n"; } elseif( $string == "file" && @ereg(".Mp3",$per_file) ){ echo "$per_file"; echo " "; echo "移除
n"; } elseif($string == "dir"){ echo "$per_filen"; echo "移除
n"; } } ?> 上傳檔案:



var r = confirm("這個資料夾內有檔案,你真要的刪掉?");
if( r == true ){
    window.location.replace(this.location+"&f=yes");
}else{
    window.location.replace(this.location+"&f=no");
}
//window.location.replace(this.location+"&back=1");

/** Basic upload manager for single or multiple files (Safari 4 Compatible)
 * @author  Andrea Giammarchi
 * @blog    WebReflection [webreflection.blogspot.com]
 * @license Mit Style License
 */

var sendFile = 10240000; // maximum allowed file size
                        // should be smaller or equal to the size accepted in the server for each file

// function to upload a single file via handler
sendFile = (function(toString, maxSize){
    var isFunction = function(Function){return  toString.call(Function) === "[object Function]";},
        split = "onabort.onerror.onloadstart.onprogress".split("."),
        length = split.length;
    return  function(handler){
        if(maxSize && maxSize < handler.file.fileSize){
            if(isFunction(handler.onerror))
                handler.onerror();
            return;
        };
        var xhr = new XMLHttpRequest,
            upload = xhr.upload;
        for(var
            xhr = new XMLHttpRequest,
            upload = xhr.upload,
            i = 0;
            i < length;
            i++
        )
            upload[split[i]] = (function(event){
                return  function(rpe){
                    if(isFunction(handler[event]))
                        handler[event].call(handler, rpe, xhr);
                };
            })(split[i]);
        upload.onload = function(rpe){
            if(handler.onreadystatechange === false){
                if(isFunction(handler.onload))
                    handler.onload(rpe, xhr);
            } else {
                setTimeout(function(){
                    if(xhr.readyState === 4){
                        if(isFunction(handler.onload))
                            handler.onload(rpe, xhr);
                    } else
                        setTimeout(arguments.callee, 15);
                }, 15);
            }
        };
        xhr.open("post", handler.url || "?upload=true", true);
        xhr.setRequestHeader("If-Modified-Since", "Mon, 26 Jul 1997 05:00:00 GMT");
        xhr.setRequestHeader("Cache-Control", "no-cache");
        xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
        xhr.setRequestHeader("X-File-Name", handler.file.fileName);
        xhr.setRequestHeader("X-File-Size", handler.file.fileSize);
        xhr.setRequestHeader("Content-Type", "multipart/form-data");
        xhr.send(handler.file);
        return  handler;
    };
})(Object.prototype.toString, sendFile);

// function to upload multiple files via handler
function sendMultipleFiles(handler){
    var length = handler.files.length,
        i = 0,
        onload = handler.onload;
    handler.current = 0;
    handler.total = 0;
    handler.sent = 0;
    while(handler.current < length)
        handler.total += handler.files[handler.current++].fileSize;
    handler.current = 0;
    if(length){
        handler.file = handler.files[handler.current];
        sendFile(handler).onload = function(rpe, xhr){
            if(++handler.current < length){
                handler.sent += handler.files[handler.current - 1].fileSize;
                handler.file = handler.files[handler.current];
                sendFile(handler).onload = arguments.callee;
            } else if(onload) {
                handler.onload = onload;
                handler.onload(rpe, xhr);
            }
        };
    };
    return  handler;
};

/** basic server side example
 * @language    PHP
name = basename($headers['X-File-Name']);
        $file->size = $headers['X-File-Size'];
        $file->content = file_get_contents("php://input");

        // if everything is ok, save the file somewhere
        if(file_put_contents('files/'.$file->name, $file->content))
            exit('OK');
    }

    // if there is an error this will be the output instead of "OK"
    exit('Error');
}
?>
 */

使用 XMLHttpRequest 上傳檔案

參考自 webreflection.blogspot.com

http://webreflection.blogspot.com/2009/03/safari-4-multiple-upload-with-progress.html

name = basename($headers['X-File-Name']);
        $file->size = $headers['X-File-Size'];
        $file->content = file_get_contents("php://input");

        // if everything is ok, save the file somewhere
        if(file_put_contents($_COOKIE['path'].'/'.$file->name, $file->content))
        exit('OK.請重新載入頁面!');
    }

    // if there is an error this will be the output instead of "OK"
    exit('Error');
}
?>



電音大帝國 Alpha
        
        

        /** basic Safari 4 multiple upload example
         * @author  Andrea Giammarchi
         * @blog    WebReflection [webreflection.blogspot.com]
         */
        onload = function(){

            function size(bytes){   // simple function to show a friendly size
                var i = 0;
                while(1023 < bytes){
                    bytes /= 1024;
                    ++i;
                };
                return  i ? bytes.toFixed(2) + ["", " Kb", " Mb", " Gb", " Tb"][i] : bytes + " bytes";
            };

            // create elements
            var input = document.body.appendChild(document.createElement("input")),
                bar = document.body.appendChild(document.createElement("div")).appendChild(document.createElement("span")),
                div = document.body.appendChild(document.createElement("div"));

            // set input type as file
            input.setAttribute("type", "file");

            // enable multiple selection (note: it does not work with direct input.multiple = true assignment)
            input.setAttribute("multiple", "true");

            // auto upload on files change
            input.addEventListener("change", function(){

                // disable the input
                input.setAttribute("disabled", "true");

                sendMultipleFiles({

                    // list of files to upload
                    files:input.files,

                    // clear the container
                    onloadstart:function(){
                        div.innerHTML = "Init upload ... ";
                        bar.style.width = "0px";
                    },

                    // do something during upload ...
                    onprogress:function(rpe){
                        div.innerHTML = [
                            "上傳檔案佇列: " + this.file.fileName,
                            "目前檔案進度: " + size(rpe.loaded) + " of " + size(rpe.total),
                            "總共檔案進度: " + size(this.sent + rpe.loaded) + " of " + size(this.total)
                        ].join("
"); bar.style.width = (((this.sent + rpe.loaded) * 200 / this.total) >> 0) + "px"; }, // fired when last file has been uploaded onload:function(rpe, xhr){ div.innerHTML += ["", "Server Response: " + xhr.responseText ].join("
"); bar.style.width = "200px"; // enable the input again input.removeAttribute("disabled"); }, // if something is wrong ... (from native instance or because of size) onerror:function(){ div.innerHTML = "The file " + this.file.fileName + " is too big [" + size(this.file.fileSize) + "]"; // enable the input again input.removeAttribute("disabled"); } }); }, false); bar.parentNode.id = "progress"; }; <?php echo "
n"; echo "path is $path
n"; if( @!chdir("$path") ){ echo "error when chdir to $path
n"; $path= "."; } exec("ls", $file); $end = strrpos($path, "/"); $upper_path = substr($path, 0, $end); echo "上一層
n"; foreach( $file as $per_file ){ $string = filetype("$per_file"); if( $string == "file" && @ereg(".mp3",$per_file) ){ echo "$per_file
n"; } elseif( $string == "file" && @ereg(".MP3",$per_file) ){ echo "$per_file
n"; } elseif( $string == "file" && @ereg(".Mp3",$per_file) ){ echo "$per_file
n"; } elseif($string == "dir"){ echo "$per_file
n"; } } ?>
/** Basic upload manager for single or multiple files (Safari 4 Compatible)
 * @author  Andrea Giammarchi
 * @blog    WebReflection [webreflection.blogspot.com]
 * @license Mit Style License
 */

var sendFile = 10240000; // maximum allowed file size
                        // should be smaller or equal to the size accepted in the server for each file

// function to upload a single file via handler
sendFile = (function(toString, maxSize){
    var isFunction = function(Function){return  toString.call(Function) === "[object Function]";},
        split = "onabort.onerror.onloadstart.onprogress".split("."),
        length = split.length;
    return  function(handler){
        if(maxSize && maxSize < handler.file.fileSize){
            if(isFunction(handler.onerror))
                handler.onerror();
            return;
        };
        var xhr = new XMLHttpRequest,
            upload = xhr.upload;
        for(var
            xhr = new XMLHttpRequest,
            upload = xhr.upload,
            i = 0;
            i < length;
            i++
        )
            upload[split[i]] = (function(event){
                return  function(rpe){
                    if(isFunction(handler[event]))
                        handler[event].call(handler, rpe, xhr);
                };
            })(split[i]);
        upload.onload = function(rpe){
            if(handler.onreadystatechange === false){
                if(isFunction(handler.onload))
                    handler.onload(rpe, xhr);
            } else {
                setTimeout(function(){
                    if(xhr.readyState === 4){
                        if(isFunction(handler.onload))
                            handler.onload(rpe, xhr);
                    } else
                        setTimeout(arguments.callee, 15);
                }, 15);
            }
        };
        xhr.open("post", handler.url || "?upload=true", true);
        xhr.setRequestHeader("If-Modified-Since", "Mon, 26 Jul 1997 05:00:00 GMT");
        xhr.setRequestHeader("Cache-Control", "no-cache");
        xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
        xhr.setRequestHeader("X-File-Name", handler.file.fileName);
        xhr.setRequestHeader("X-File-Size", handler.file.fileSize);
        xhr.setRequestHeader("Content-Type", "multipart/form-data");
        xhr.send(handler.file);
        return  handler;
    };
})(Object.prototype.toString, sendFile);

// function to upload multiple files via handler
function sendMultipleFiles(handler){
    var length = handler.files.length,
        i = 0,
        onload = handler.onload;
    handler.current = 0;
    handler.total = 0;
    handler.sent = 0;
    while(handler.current < length)
        handler.total += handler.files[handler.current++].fileSize;
    handler.current = 0;
    if(length){
        handler.file = handler.files[handler.current];
        sendFile(handler).onload = function(rpe, xhr){
            if(++handler.current < length){
                handler.sent += handler.files[handler.current - 1].fileSize;
                handler.file = handler.files[handler.current];
                sendFile(handler).onload = arguments.callee;
            } else if(onload) {
                handler.onload = onload;
                handler.onload(rpe, xhr);
            }
        };
    };
    return  handler;
};

Web 各種樣式的按鈕

.action_button_sm {
height: 22px;
border: 1px solid #ccc;
background: #fdfdfd url(http://02.static.slide.com/version/20110204114236/images/interface/gradient_button_sm.gif) repeat-x bottom;
line-height: 20px;
padding: 2px 10px;
font-size: 8pt;
cursor: pointer;
}
.my_title {
font-size: 150%;
color: red;
line-height: 30px;
}

樣式一(呼叫 javascript 功能)

樣式一


.action_button_sm {
 height: 22px;
 border: 1px solid #ccc;
 background: #fdfdfd url(http://02.static.slide.com/version/20110204114236/images/interface/gradient_button_sm.gif) repeat-x bottom;
 line-height: 20px;
 padding: 2px 10px;
 font-size: 8pt;
 cursor: pointer;
}
.my_title {
 font-size: 150%;
 color: red;
 line-height: 30px;
}

樣式一

這個按鈕的 css 屬性 background 裡面,color(#fdfdfd) 和 url 指定的圖片是有互相搭配的。整個按鈕高度為 22px,這張 gif 圖片高度 18px 並使用 bottom 屬性置底,上面多餘出來的 4px 就是 #fdfdfd 的顏色了!
這樣的按鈕要附加功能時,可以使用 javascript 的 onclick 來附加功能上去!
(按鈕背景圖片取自:http://www.slide.com)

樣式二(表單按鈕)

完整範例:http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_input_src


當表單的 input type 屬性設定為 image 時,這個 input 的功能如同 submit 的送出按鈕,並且可以設定以圖片代替瀏覽器預設的按鈕圖示!

TinyMCE 儲存至資料庫範例

儲存至資料庫,要加上stripslashes函數,才能把 html code 正確放入資料庫。



 TinyMCE 




tinyMCE.init({
        // General options
        mode : "textareas",
        theme : "advanced",
        plugins : "spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

        // Theme options
        theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
        theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
        theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
        theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true,

        // Skin options
        skin : "o2k7",
        skin_variant : "silver",

        // Example content CSS (should be your site CSS)
        content_css : "css/example.css",

        // Drop lists for link/image/media/template dialogs
        template_external_list_url : "js/template_list.js",
        external_link_list_url : "js/link_list.js",
        external_image_list_url : "js/image_list.js",
        media_external_list_url : "js/media_list.js",

        // Replace values for the template plugin
        template_replace_values : {
                username : "Some User",
                staffid : "991234"
        }
});


query("SET NAMES 'utf8'"); $text = stripslashes($_POST['content']); $q2 = "INSERT INTO content(textarea,id) VALUES ('$text', NULL)"; $r2 = $conn->query($q2); $q1 = "SELECT * FROM content"; $r1 = $conn->query($q1); while( ($row_data = $r1->fetch_assoc()) !== NULL ){ echo "

{$row_data['id']}
"; echo "{$row_data['textarea']}

"; } ?>

按鈕置換成圖片加上發亮(切換圖片)範例

.btn_sharef_off{background:url(‘http://i54.photobucket.com/albums/g95/magicalloveshe/aBtn.gif&#8217;) 0px 0px no-repeat; width:148px;height:36px;overflow:hidden;cursor:pointer;}
.btn_sharef_on{background:url(‘http://i54.photobucket.com/albums/g95/magicalloveshe/aBtn.gif&#8217;) 0px -38px no-repeat; width:148px;height:36px;overflow:hidden;cursor:pointer;}
.btn_sharem_off{background:url(‘http://i54.photobucket.com/albums/g95/magicalloveshe/aBtn.gif&#8217;) -150px 0px no-repeat; width:128px;height:36px;overflow:hidden;cursor:pointer;}
.btn_sharem_on{background:url(‘http://i54.photobucket.com/albums/g95/magicalloveshe/aBtn.gif&#8217;) -150px -38px no-repeat; width:128px;height:36px;overflow:hidden;cursor:pointer;}







.btn_sharef_off{background:url('a.gif') 0px 0px no-repeat; width:148px;height:36px;overflow:hidden;cursor:pointer;}
.btn_sharef_on{background:url('a.gif') 0px -38px no-repeat; width:148px;height:36px;overflow:hidden;cursor:pointer;}
.btn_sharem_off{background:url('a.gif') -150px 0px no-repeat; width:128px;height:36px;overflow:hidden;cursor:pointer;}
.btn_sharem_on{background:url('a.gif') -150px -38px no-repeat; width:128px;height:36px;overflow:hidden;cursor:pointer;}

解釋一下概念!
基本上呢,這個東西是要做一個圖片的按鈕,按下去之後到某個網站、或者呼叫某段 javascript 功能等等。
並且要有滑鼠移上去出現圖片變亮的特效!(看起來是變亮,實際上的作法就是換一張打亮的圖片)

目前這個按鈕功能是按下去之後到某個網站,你也可以在 href 的值後面加上參數,例如 http://www.google.com.tw/search?hl=zh-TW&source=hp&biw=1680&bih=860&q=asd&aq=f&aqi=&aql=&oq=&gs_rfai=
這樣按下去之後就會跑到 google 搜尋 「asd」的結果頁面

至於滑鼠移上去出現圖片變亮的特效,這邊的實做方法是移動 div 元素的背景圖片的顯示位置!
原本的 div 的 class 值是 btn_sharef_off,這個值在引入的 css 樣式表代表的是顯示 a.gif 這張圖片的 Facebook 沒有加亮的地方(0px 0px)。

當滑鼠移上去的時候會觸發 onmouseover 這個事件,因此在上面 html 裡面,給 div 元素的 onmouseover 這個事件寫上this.className=’btn_sharef_on’
也就是當滑鼠移上去,就把 class 的值替換成 btn_sharef_on,而 btn_sharef_on 在引入的 css 樣式表裡面代表的是顯示a.gif 這張圖片的 Facebook 加亮的地方(0px -38px)。

範例如下:



(在我的部落格裡面這功能可能是跟某個 CSS 相衝突,點擊並不會有反應)

圖片來源:百萬網友團購

除了移動圖片的顯示位置之外,也可以用 src 的值替換的方式來更換圖片,不過替換 src 的值這樣的方式有個缺點,即圖片會在事件觸發當下才進行下載,這可能會造成畫面上的延遲!
而且 http 通訊協定下載檔案時,因為使用 TCP/IP 連線,初始連線需要一段時間(不長,例如半秒),但是當我要下載四個圖片檔進行替換的話,下載時間就需要四個初始化的時間,畫面上的圖片數量一多,整體就慢了,伺服器的負載也會變高!
因此像這樣把所有圖示放在一張圖片,例如移動顯示部位的方式對於網站的優化相當有幫助!

javascript 新增按鈕並指定函式

全部使用 javascript 來產生整個頁面

先製造一個 span

然後把該 span 內容指定為 “ker"

再製造一個 input

然後把該 input 的 type 設定為 button

再設定值為 ker2(按鈕上面的文字)

最後設定按下之後執行 alert ,也就是跳出一警告視窗。

第一次寫 js ,筆記一下!


onload = function(){
	//create elements
	var span = document.body.appendChild(document.createElement("span"));
	span.innerHTML = "ker";
	//create a button
	var button = document.body.appendChild(document.createElement("input"));
	button.setAttribute("type", "button");
	button.value = "ker2";
	button.onclick = function(){
		alert("click~!");
	};
};



初探 webGL 使用 X3DOM framework 操作!

其實要使用這個 x3dom 框架來編輯 webGL 的東西不用另外安裝什麼,它目前也沒有開發到 IDE (整合開發環境)這麼強大

就只要在網頁程式碼裡面加入 x3dom.js (和 x3dom.css)就可以使用 x3dom 的東西(標籤)了!!

下面舉一個最簡單的範例(記得要用支援 webgl 的瀏覽器,我使用Chromium 6.0.477.0,開啟時給參數./chrom –enabl-webgl)


  
    My first X3DOM page
    
    
  
  
    

My X3DOM world

This is my first html page with some 3d objects.

出來的結果如下圖:

可以使用滑鼠對這個方塊進行操作!(可以使用滑鼠進行操作應該是在 x3dom.js 裡面定義好的)

<scene> 定義進入 3D 場景
<shape> 定義形狀物件開始,所以接下來有 <box> <appearence>
<appearence> 在這個範例中,這個標籤裡面只有 <material> 這個標籤,用來標示材質顏色為紅色

您可以按這裡查找更多元素的描述與使用

並且可以用滑鼠左中右三個按鍵進行操作,可以做什麼動作自己試試看就知道了!
您可以按這裡查找更多互動的描述與使用
(這個頁面裡面的互動只有基本的透過滑鼠,沒有說明如何自訂更多的動作)

介紹 x3dom 元素的頁面裡面,舉圓柱體為例

Cylinder : X3DGeometryNode {
  SFNode  [in,out] metadata NULL [X3DMetadataObject]
  SFBool  []       bottom   TRUE
  SFFloat []       height   2    (0,∞)
  SFFloat []       radius   1    (0,∞)
  SFBool  []       side     TRUE
  SFBool  []       solid    TRUE
  SFBool  []       top      TRUE
}

裡面的 bottom, height, radius, side, solid, top 都是 Cylinder 的參數
只要在程式碼的 <Cylinder height=4> 標籤裡面寫上,並且給值就可以了!

更改圖片 src 內容,on javascript and jQuery

利用滑鼠移入移出或者點擊的方式來動態變更網頁上面某個 img 元素的 src 來源!

程式碼中引入的 jquery-1.4.2.min.js 檔案可以到這邊下載



$(document).ready(function(){
$("#my_image").bind("mouseenter", function(){
    var src = ( $(this).attr("src") === "2.jpg" )
            ? "1.jpg"
            : "2.jpg";
    $("#my_image").attr("src", src);
    });
});


參考網頁:
http://docs.jquery.com/Events/bind#typedatafn
http://stackoverflow.com/questions/554273/changing-the-img-src-using-jquery