更新於 2023/08/21發佈於 2023/08/21閱讀時間約 2 分鐘

使用 HTML 與 jQuery 實作圖片按鈕

圖片按鈕是網頁中常見的互動元素之一，它可以讓用戶進行操作，同時也為網頁增添了視覺吸引力。在這個教學中，我們將會學習如何使用 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() 函數來顯示一個簡單的警示框。

分享至

成為作者繼續創作的動力吧！

簡單易懂的C#學習筆記

追蹤

付費閱讀

使用 HTML 與 jQuery 實作圖片按鈕

準備環境

創建 HTML 結構

添加點擊事件

程式輕鬆玩的其他內容

你可能也想看

發表回應

使用 HTML 與 jQuery 實作圖片按鈕

準備環境

創建 HTML 結構

添加點擊事件

程式輕鬆玩 的其他內容

你可能也想看

發表回應

程式輕鬆玩的其他內容