Javascript 如何使用图片作为提交按钮触发php函数

我正在寻找一个更好的方式来提交一个表单使用图片作为提交按钮

下面的代码正在运行，但看起来不是很流畅。它仍然有type=submit的悬停效果，在手机上也不好看

是否有人有更好的方法来使用图片触发此函数，并且仍然发送隐藏值。也许像点击之类的，IDK

触发后：

if (isset($_POST['unfollow'])) {
 unfollow_user();
 header("Refresh:0");
}

表格：

CSS

---

正如所有评论所说，使用HTML表单元素：

<input type="image" id="submit" src="" />

您还可以使用CSS背景图像：url；在按钮元素或输入[type=submit]按钮元素上，但我建议使用上面的方法，因为它在大多数平台上看起来会更好

---

希望这有帮助

如评论所示，您应该将图像作为按钮的背景，并将其保留为type:submit

因此，不是这一行：

<button type='submit' name='unfollow' class='follow'><img class='floatright 
 follow_img_small' src='img/following_da_small.png'></button>

---

希望它能解决它，祝你好运

有一个警告：当使用mysqli时，您应该使用和向查询中添加用户数据。不要使用字符串插值或串联来完成此操作，因为您已经创建了严重的错误。切勿将$\u POST、$\u GET或任何用户数据直接放入查询中，如果有人试图利用您的错误，这可能会非常有害。无需在标记中放入图像，而是将按钮的背景设置为具有背景图像的图像：url。。。风格请记住，要想在手机上看起来不错，就意味着你需要@2x或@3x版本来处理手机上使用的高DPI屏幕，否则你的图像在默认桌面72DPI上会显得超级笨重。你可以锁定按钮并覆盖它已有的任何样式。如果您想特别针对type=submit的悬停效果，请使用.follow[type=submit]：hover{…}。这也与PHP、MySQL或JavaScript无关。您应该编辑您的问题以删除这些标记和代码。但是我如何才能使此图像同样为type='submit'？因为当我将其更改为：当我选择它时，不会发生任何事情。

.follow_img_small {
height: 25px;
margin-right: -25px;
margin-top: -10px;
}

.follow_img:hover{
opacity: 0.7;
}

<input type="image" id="submit" src="" />

$("#submit").on("click", function () {
     $("form").trigger("submit");
});

<button type='submit' name='unfollow' class='follow'><img class='floatright 
 follow_img_small' src='img/following_da_small.png'></button>

<button type='submit' name='unfollow' class='follow'><span>Submit Me</span></button>

button.follow { width: auto; height: 25px; background: url(img/following_da_small.png) no-repeat; background-size: cover; }
button.follow span {visibility: hidden; /* OR: opacity: 0; this is just for accessibility purpose */ }