讲师中心 微信公众号
AI工具推荐 视频效率加速

如何正确获取表单中动画图片按钮的点击坐标

秋杰大大_4717

秋杰大大_4717

发布时间:2026-07-13 22:01:13

|

640人浏览过

|

来源于php中文网

原创

如何正确获取表单中动画图片按钮的点击坐标

PHP 表单中 提交的点击坐标(x/y)与图片是否动画无关;问题本质是 PHP 通过 $_POST['name_x'] 和 $_POST['name_y'] 接收坐标,而常见错误是误写为 name_x_x 等无效键名。

php 表单中 `` 提交的点击坐标(x/y)与图片是否动画无关;问题本质是 php 通过 `$_post['name_x']` 和 `$_post['name_y']` 接收坐标,而常见错误是误写为 `name_x_x` 等无效键名。

在 HTML 表单中使用 时,浏览器会在用户点击该图像区域时,自动将鼠标相对于图像左上角的坐标以 name_x 和 name_y 的形式提交至 $_POST 数组(例如 → 提交 $_POST['Shoot_x'] 和 $_POST['Shoot_y'])。这一机制由浏览器原生实现,完全独立于 CSS 动画、JavaScript 或图像格式(GIF/PNG/JPEG)。也就是说,只要 元素本身是有效的、可交互的,且未被遮挡或禁用,其点击坐标就一定能被 PHP 正确捕获——动画仅影响视觉表现,不干扰表单提交行为。

你遇到的问题并非“动画导致坐标丢失”,而是典型的 键名拼写错误:代码中检查了 $_POST["Shoot_x_x"](多了一个 _x),而实际应为 $_POST["Shoot_x"]。这种错误在调试时极易被忽略,尤其当变量名相似、IDE 自动补全误导或复制粘贴残留时。

✅ 正确做法如下:

  1. 确保 HTML 中 name 属性简洁唯一(避免空格、特殊字符):

    <input type="image" name="Shoot" src="https://i.imgur.com/i9oV2j3.png" alt="Shoot">
  2. PHP 中严格按 name_x / name_y 形式读取:

    if (isset($_POST['Shoot_x'])) {
        $x = (int)$_POST['Shoot_x'];
        $y = (int)$_POST['Shoot_y'];
        echo "Shoot click coords=> X:{$x}; Y:{$y}.<br>";
    }
  3. 推荐健壮性校验(防止恶意输入或空值):

    $validButtons = ['Staredown', 'Gesture', 'Shoot'];
    foreach ($validButtons as $btn) {
        if (isset($_POST[$btn . '_x']) && isset($_POST[$btn . '_y'])) {
            $x = filter_var($_POST[$btn . '_x'], FILTER_VALIDATE_INT);
            $y = filter_var($_POST[$btn . '_y'], FILTER_VALIDATE_INT);
            if ($x !== false && $y !== false) {
                echo "{$btn} click coords=> X:{$x}; Y:{$y}.<br>";
                break;
            }
        }
    }

⚠️ 注意事项:

  • CSS 动画不影响表单提交逻辑,但需确保动画未导致元素被其他 DOM 节点遮挡(如 z-index 过低、父容器 overflow: hidden 裁剪等),否则点击可能落在不可见区域。
  • 必须位于
    内且 method="post",否则坐标不会提交。
  • 浏览器会自动发送坐标,无需 JavaScript 干预;若手动用 JS 触发 submit,需自行计算并注入隐藏字段。
  • 坐标值为整数像素,原点为图像左上角(0,0),与 CSS background-position 或 Canvas 坐标系一致。

总结:动画图片按钮的坐标获取失败,99% 源于 PHP 键名书写错误或 HTML 结构疏漏,而非技术限制。始终以 $_POST['{name}_x'] 为准,配合 filter_var() 验证类型,并用浏览器开发者工具的 Network 标签查看实际提交的 POST 数据,即可快速定位问题。

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

小橡皮AI

一款AI工具,主要用于小橡皮一键去AI味,将机器味重的内容改得更有活人感,防止因为 AI 内容被平台打上 AI 标签,以及限流,适合需要提升相关任务效率的用户。

超级简历WonderCV

一款AI办公效率工具,主要用于免费求职简历模版下载制作,应届生职场人必备简历制作神器,适合需要提升相关任务效率的用户。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

相关专题

更多
ThinkPHP表单验证与数据安全处理实战
ThinkPHP表单验证与数据安全处理实战

本专题聚焦 ThinkPHP 在表单处理中的验证与安全机制,系统讲解验证器使用、自定义规则、场景验证以及错误提示处理。内容涵盖 XSS 防护、SQL 注入防御、数据过滤与输入校验等关键安全措施。通过实际案例,帮助开发者构建安全可靠的数据处理流程。

261

2026.03.30

Docker Desktop怎么设置端口映射
Docker Desktop怎么设置端口映射

本专题聚焦Docker Desktop容器端口映射与访问配置,整理从创建容器、设置端口绑定到验证本地服务访问的操作流程。针对端口被占用、映射配置错误、容器服务无法访问等情况,也提供相应的检查方向,方便用户完成端口配置。

0

2026.11.03

Docker Desktop镜像构建教程
Docker Desktop镜像构建教程

想使用Docker Desktop将本地项目构建成Docker镜像?本专题围绕镜像构建的实际操作展开,介绍Dockerfile编写、构建命令使用、镜像标签设置和构建日志查看等内容,同时整理镜像无法生成、依赖安装失败及构建缓存异常等问题的排查思路。

0

2026.11.03

Docker Desktop容器创建指南
Docker Desktop容器创建指南

本专题聚焦Docker Desktop容器创建与运行配置,介绍通过本地镜像或远程镜像创建容器的方法,以及容器启动、终端访问、日志查看和基础管理等操作。针对端口冲突、参数配置不当、容器无法启动等情况,也整理了相应的排查方向。

0

2026.11.03

Tailwind CSS 如何制作导航栏和卡片
Tailwind CSS 如何制作导航栏和卡片

用 Tailwind CSS 制作导航栏和卡片,可先搭建语义化结构,再组合 Flex、Grid、间距、圆角与阴影类。这里整理横向导航、移动端菜单、卡片网格及悬停效果的相关文章,帮助你把常见页面组件做得清晰且适配不同屏幕。

0

2026.11.03

Tailwind CSS 响应式布局怎么写
Tailwind CSS 响应式布局怎么写

Tailwind CSS 响应式布局通常从移动端样式写起,再用 sm、md、lg 等前缀调整不同屏幕宽度下的网格、间距和导航。本专题整理断点配置、Grid 与 Flex 自适应布局及常见溢出问题,帮助你逐步完成多设备适配。

0

2026.11.03

Tailwind CSS 常用类名怎么记
Tailwind CSS 常用类名怎么记

Tailwind CSS 类名很多,先按布局、间距、文字、颜色和状态分组记忆,再通过官方文档检索具体写法。本专题结合类名排序、动态拼接失效、自定义实用类等问题,帮助你建立常用类名的速查方法。

0

2026.11.03

码上飞入口地址合集
码上飞入口地址合集

本专题汇总了码上飞(CodeFlying)的官方入口地址合集,涵盖官网主站及网页版在线使用入口,支持注册登录后直接在线体验零代码AI应用生成。同时整理了APP端下载渠道与小程序入口,助你快速访问平台,通过自然语言描述需求即可生成应用、小程序或网站。

0

2026.11.03

Uvicorn 报错与问题解决教程
Uvicorn 报错与问题解决教程

本专题汇总了Uvicorn服务器常见问题与报错解决的教程合集,涵盖启动失败、端口占用、模块导入错误、事件循环冲突及热重载失效等典型故障的排查思路。同时整理了多进程与Worker配置、SSL/HTTPS证书报错、跨域与代理配置等实战解决方案,助你快速定位并解决Uvicorn运行中的各类问题。

20

2026.11.02

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn