在 JavaScript 語法中，可以使用 document.getElementById(“MYIMG”).src 來抓取圖片的 src 路徑，然後改變圖片的 src 路徑，就可以製作出在網頁上變換圖片的功能。 到了 jQuery 語法，就改成了使用 $(“#MYIMG”).attr(“src”); 這個方法來抓取圖片的 src 路徑，以下，我們就設計了一個簡單的範例來示範如何使用 attr() 這個指令。
這個網頁的 HTML 語法部份，如下圖：
舉例說明：
當我們使用 $(“#SS1”).attr(“width”); 就可以抓出第一張小圖片的寬度，得到 120 這個值。
當我們使用 $(“#SS1”).attr(“id”); 就可以抓出第一張小圖片的 id 名字，得到 SS1 這個值。
當我們使用 $(“#SS1”).attr(“src”); 就可以抓出第一張小圖片的路徑，得到 images/small1.jpg 這個值。
當我們使用 $(“#SS1”).attr(“width”, “150”); 就可以把小圖片的寬度，更改成為 150 這個值。
當我們使用 $(“#SS1”).attr(“src”, “images/small2.jpg”); 就可以把小圖片的的路徑，更改成為 images/small2.jpg 這個值。
這個範例的 jQuery 語法部份，如下圖：
jQuery 語法說明：
第 3 行：$(“#SMALL img”) 選取了所有的小圖片，使用 click 滑鼠事件。
第 5 行：宣告變數 N 抓取 $(this).attr(“id”) 就可以得到被滑鼠點選到的那一張小圖片的 id 名稱。
第 5 行：最後再使用 substr(2) 截取出小圖片的 id 名稱的最後一個字。
第 7 行：選取 $(“#BIG”) 大圖片，使用 attr(“取得圖片的路徑”,”更改圖片的路徑”) 。
以上，一個簡單的範例，就可以使用 jQuery 製作出在網頁上點選小圖片更換大圖片的功能了。
如果您對於這個範例有其他的問題或想法，歡迎直接到老師的 Facebook 交流討論，也可以直接到我們飛肯設計的 Facebook 交流討論。
最後，再次感謝您閱讀完這一篇文章。
本文作者：
姜智豪
老師
當您對本文有任何問題或指教，歡迎到我們的【網頁設計交流討論區】一起交流討論喔！
