PHP 圖片型 Submit 按鈕獲取點擊座標

特性說明

<input type="image"> 作為提交按鈕時，瀏覽器會自動將鼠標點擊位置相對圖片左上角的座標作為兩個參數提交：name_x、name_y。

示例代碼

submit_0.php（表單頁）

<form action="submit_1.php" method="post">
<input type="image" src="exa.gif" name="sub1">
</form>

submit_1.php（接收頁）

<?php
echo '橫座標 (X)：' . $_POST['sub1_x'] . '<br>';
echo '縱座標 (Y)：' . $_POST['sub1_y'] . '<br>';
?>

應用場景

• 圖片地圖熱區替代：無需 <map><area>，直接用座標判斷點擊區域
• 驗證碼點選：用戶點擊圖片中特定字符/位置驗證
• 簡易繪圖/標記：記錄用戶點擊位置生成熱力圖
• 遊戲互動：網頁小遊戲點擊判定

注意事項

1. 參數名 = name屬性值 + _x / _y，區分大小寫
2. 座標以圖片左上角為原點 (0,0)，單位像素
3. type="image" 不支援 value 屬性，無法像普通 submit 傳遞固定值
4. Enter 鍵提交表單時，部分瀏覽器不發送座標（視為 0,0），需服務端兼容處理

座標判斷邏輯示例

<?php
$x = isset($_POST['sub1_x']) ? (int)$_POST['sub1_x'] : 0;
$y = isset($_POST['sub1_y']) ? (int)$_POST['sub1_y'] : 0;

// 假設圖片 200x100，分為左右兩區域
if ($x < 100) {
    echo '點擊了左側區域';
} else {
    echo '點擊了右側區域';
}
?>