使用 HTML 與 jQuery 實作圖片按鈕
更新於 2023/08/21閱讀時間約 2 分鐘
圖片按鈕是網頁中常見的互動元素之一，它可以讓用戶進行操作，同時也為網頁增添了視覺吸引力。在這個教學中，我們將會學習如何使用 HTML 與 jQuery 創建一個簡單的圖片按鈕，並添加點擊事件。
準備環境
首先，確保你的環境中已經包含了 jQuery 庫文件。你可以通過以下方式在 HTML 文件中引入 jQuery：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
創建 HTML 結構
我們將會創建一個簡單的 HTML 按鈕，將圖片設置為按鈕的背景。請將以下代碼添加到你的 HTML 文件中：
<!DOCTYPE html>
<html>
<head>
<title>圖片按鈕教學</title>
<style>
.image-button {
width: 150px;
height: 50px;
background-image: url('your-image-url.jpg');
background-size: cover;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<button class="image-button"></button>
<script>
$(document).ready(function() {
$('.image-button').click(function() {
// 在這裡添加按鈕被點擊時的動作
alert("你點擊了圖片按鈕！");
});
});
</script>
</body>
</html>
請確保將 your-image-url.jpg 替換為你實際的圖片 URL。
添加點擊事件
我們使用 jQuery 的 .click() 方法來綁定按鈕的點擊事件。當按鈕被點擊時，我們可以執行一些操作，例如顯示訊息、導航到其他頁面，等等。在上述程式碼中，我們使用 alert() 函數來顯示一個簡單的警示框。
67會員
118內容數
這裡將以輕鬆風格，深入探討程式設計的基礎和高級概念。從程式語言到演算法，我們將以易懂的方式解釋每個主題，讓你輕鬆掌握。無論你是初學者或有經驗者，都能在這裡找到適合你的內容。無論你的目標是成為專業開發者還是擴展知識，我們都會陪伴你一同成長！
留言0
查看全部
你可能也想看
Google News 追蹤
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
在數位時代，影片成為了許多人分享和傳達訊息的有力工具。影片擁有強大的傳達能力，結合了文字、圖片、音效和動態元素，比閱讀純文字和圖片更有吸引力。
但現在，借助人工智慧（AI）工具的幫助，除了可以根據使用者輸入的提示（Prompt）來生成文字，圖片，音樂等等，甚至還可以生成影片！
對於經常需要透過文字表達思維的知識工作者來說，這篇文章能為你開啟一扇新的大門。
三段式寫作法的運用，將能有效解決你在語音辨識學習過程中，如何提升效率和深度的問題。同時，它將將為你帶來全新的學習體驗。
使用三段式寫作法40天來，我透過語音辨識，與自我語言的互動。在此過程中，我有三個重大關於成為高產思考
你有嘗試過用語音辨識做筆記嗎？
Macbook上的語音辨識功能非常好用！大大改變了我的筆記習慣！
簡介
「Real-ESRGAN」是一個非常方便的影像處理工具，它可以讓你把小圖片無損地放大成大圖片。
如果你曾經在網絡上搜索圖片，你可能會發現很多圖片都是很小的，而且放大後會變得模糊不清。這時候，你可以使用「Real-ESRGAN」來幫助你解決這個問題。
這個專案是由騰訊 ARC Lab 團隊開源的
img tag 必須使用direct link圖床，因此要看檔案副檔名是否為常見的圖片名稱。
有些網站會限制外網直接連結，所以篩選圖片要注意。
這次來用這個網站 https://gifmaker.me/ ，製作 GIF 動圖，主要是覺得把自己畫貓的過程弄成動圖時覺得很療癒．．．
什麼？！？你說你不會畫，沒關係，即使是畫個火柴棒人也可以很趣味的．．．
做過學生都應該有做筆記的經驗，筆記幫助學習者整理所學的知識。在21世紀，這個組識過程可以數碼化，甚至有比原來的紙筆方法更多更好的方法去温習。透過 Microsoft OneNote ，學生可以隨時隨地鞏固、跟進新學到的內容。
Google Data Studio 內建支援 Google 地圖作為報表的元件，如果你正在評估開設實體門市的地點，就可以考慮採用這種方式，從客戶歷史訂單的地址資料，製作潛在客戶所在之熱點圖做分析。
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
在數位時代，影片成為了許多人分享和傳達訊息的有力工具。影片擁有強大的傳達能力，結合了文字、圖片、音效和動態元素，比閱讀純文字和圖片更有吸引力。
但現在，借助人工智慧（AI）工具的幫助，除了可以根據使用者輸入的提示（Prompt）來生成文字，圖片，音樂等等，甚至還可以生成影片！
對於經常需要透過文字表達思維的知識工作者來說，這篇文章能為你開啟一扇新的大門。
三段式寫作法的運用，將能有效解決你在語音辨識學習過程中，如何提升效率和深度的問題。同時，它將將為你帶來全新的學習體驗。
使用三段式寫作法40天來，我透過語音辨識，與自我語言的互動。在此過程中，我有三個重大關於成為高產思考
你有嘗試過用語音辨識做筆記嗎？
Macbook上的語音辨識功能非常好用！大大改變了我的筆記習慣！
簡介
「Real-ESRGAN」是一個非常方便的影像處理工具，它可以讓你把小圖片無損地放大成大圖片。
如果你曾經在網絡上搜索圖片，你可能會發現很多圖片都是很小的，而且放大後會變得模糊不清。這時候，你可以使用「Real-ESRGAN」來幫助你解決這個問題。
這個專案是由騰訊 ARC Lab 團隊開源的
img tag 必須使用direct link圖床，因此要看檔案副檔名是否為常見的圖片名稱。
有些網站會限制外網直接連結，所以篩選圖片要注意。
這次來用這個網站 https://gifmaker.me/ ，製作 GIF 動圖，主要是覺得把自己畫貓的過程弄成動圖時覺得很療癒．．．
什麼？！？你說你不會畫，沒關係，即使是畫個火柴棒人也可以很趣味的．．．
做過學生都應該有做筆記的經驗，筆記幫助學習者整理所學的知識。在21世紀，這個組識過程可以數碼化，甚至有比原來的紙筆方法更多更好的方法去温習。透過 Microsoft OneNote ，學生可以隨時隨地鞏固、跟進新學到的內容。
Google Data Studio 內建支援 Google 地圖作為報表的元件，如果你正在評估開設實體門市的地點，就可以考慮採用這種方式，從客戶歷史訂單的地址資料，製作潛在客戶所在之熱點圖做分析。