使用 HTML 與 jQuery 實作圖片按鈕
更新於 發佈於 閱讀時間約 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() 函數來顯示一個簡單的警示框。
68會員
126內容數
這裡將以輕鬆風格，深入探討程式設計的基礎和高級概念。從程式語言到演算法，我們將以易懂的方式解釋每個主題，讓你輕鬆掌握。無論你是初學者或有經驗者，都能在這裡找到適合你的內容。無論你的目標是成為專業開發者還是擴展知識，我們都會陪伴你一同成長！
留言0
查看全部
你可能也想看
Google News 追蹤
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
這個系列的教學會列出基本上所有常見的造型和一些基礎 ， 讓各位可以自行搭配造型～在這個第五篇呢 ， 我們會來一起了解: 常見的按鈕樣式特性，怎麼使用他們，他們的作用是甚麼。讓我們一起了解如何自訂滑鼠以及使用常見的按鈕樣式特性，學會讓按鈕播放音效，切換滑鼠造型，以及避免圖片透明的地方被點擊到。
本章目的是為讀者提供有關如何設置JavaScript開發環境的知識，包括在瀏覽器、Node.js和各種編輯器和IDE中編寫和運行JavaScript的信息。此外，本章還介紹了如何架設本地開發伺服器以模擬實際的網頁環境。這些知識對於希望開發前端應用或後端服務的JavaScript開發者來說都是必要的。
本篇教學將教你如何建立和使用 textbutton，讓你可以使用文字快速建立玩家可以點擊的按鈕，並提供瞭如何更改按鈕文字和自訂點擊按鈕後的動作。
JavaScript30 傳送門：https://javascript30.com/
透過 JS 控制 CSS 變數
今天的挑戰是要能透過滑動圖片上面的 <input type="range"> 來改變圖片的三個屬性。
以前在 CSS 裡面看到 var(--xxxx) 這種東西都很
前言
今天課程要來學習，在 .css 設計樣式後，怎麼透過選擇器，讓 .html 可以有所配對，經過這一步後，便可以開始學習，如何正式設計 .css 了。
選擇器
介紹
還記得上次課程，我們在 .css 檔案中，撰寫的程式碼嗎？讓我們來複習看看：
.highlight {
co
前言
終於要到這個振奮人心的章節了，我們終於要來學習，如何讓自己的網頁更加美觀。
但在這之前，我們肯定得先學習，如何將我們的 CSS 檔案，連接到 HTML 當中。
連結分類
首先，我們在連結 CSS 的方法中，有分為三種：
內聯連結
在 .html 當中，任一標籤的裡面，用屬性 s
本文介紹瞭如何寫 HTML 標籤，製作一個簡單的自我介紹網頁。透過介紹寫標籤的實例，讓讀者能夠更瞭解如何在 HTML 中使用不同的標籤。
本課程學習如何修改按鈕外觀的方法，透過調整背景屬性和形狀。我們新增了四種背景顏色，修改每個按鈕的外觀。完成後，呈現不同按鈕風格。
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
這個系列的教學會列出基本上所有常見的造型和一些基礎 ， 讓各位可以自行搭配造型～在這個第五篇呢 ， 我們會來一起了解: 常見的按鈕樣式特性，怎麼使用他們，他們的作用是甚麼。讓我們一起了解如何自訂滑鼠以及使用常見的按鈕樣式特性，學會讓按鈕播放音效，切換滑鼠造型，以及避免圖片透明的地方被點擊到。
本章目的是為讀者提供有關如何設置JavaScript開發環境的知識，包括在瀏覽器、Node.js和各種編輯器和IDE中編寫和運行JavaScript的信息。此外，本章還介紹了如何架設本地開發伺服器以模擬實際的網頁環境。這些知識對於希望開發前端應用或後端服務的JavaScript開發者來說都是必要的。
本篇教學將教你如何建立和使用 textbutton，讓你可以使用文字快速建立玩家可以點擊的按鈕，並提供瞭如何更改按鈕文字和自訂點擊按鈕後的動作。
JavaScript30 傳送門：https://javascript30.com/
透過 JS 控制 CSS 變數
今天的挑戰是要能透過滑動圖片上面的 <input type="range"> 來改變圖片的三個屬性。
以前在 CSS 裡面看到 var(--xxxx) 這種東西都很
前言
今天課程要來學習，在 .css 設計樣式後，怎麼透過選擇器，讓 .html 可以有所配對，經過這一步後，便可以開始學習，如何正式設計 .css 了。
選擇器
介紹
還記得上次課程，我們在 .css 檔案中，撰寫的程式碼嗎？讓我們來複習看看：
.highlight {
co
前言
終於要到這個振奮人心的章節了，我們終於要來學習，如何讓自己的網頁更加美觀。
但在這之前，我們肯定得先學習，如何將我們的 CSS 檔案，連接到 HTML 當中。
連結分類
首先，我們在連結 CSS 的方法中，有分為三種：
內聯連結
在 .html 當中，任一標籤的裡面，用屬性 s
本文介紹瞭如何寫 HTML 標籤，製作一個簡單的自我介紹網頁。透過介紹寫標籤的實例，讓讀者能夠更瞭解如何在 HTML 中使用不同的標籤。
本課程學習如何修改按鈕外觀的方法，透過調整背景屬性和形狀。我們新增了四種背景顏色，修改每個按鈕的外觀。完成後，呈現不同按鈕風格。