0

我有一个自定义（即我在互联网上找到的）PayPal 捐赠按钮。我希望它有 2 个不同的图像 - mouseout 图像和 mouseover 图像。我变了

<input type="image" src='/images/icons/donate.png' border="0" name="submit" alt="">

至

<input type="image" onmouseout="this.src='/images/icons/donate.png'" onmouseover="this.src='/images/icons/hover_donate.png'" border="0" name="submit" alt="">

这两个不同的图像正常工作，但是，当页面最初加载时，两个图像都不会出现，直到我将鼠标悬停至少一次。在那之后，他们找到了，它应该如何工作。我想知道是否有办法解决这个问题，最好是使用 CSS。这是我正在谈论的完整代码部分（减去识别信息），以及我正在谈论的图像（或链接，因为我没有发布图像的代表）。

            <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
            <input type="hidden" name="cmd" value="_s-xclick">
            <input type="hidden" name="hosted_button_id" value="valueHere">
            <input type="image" onmouseover="this.src='/images/icons/hover_donate.png'" onmouseout="this.src='/images/icons/donate.png'" border="0" name="submit" alt="PayPa$
            <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
            </form>

图片

顶部是我在新页面上看到的（使用 ctrl+f5，以确保它从服务器而不是我的缓存中提取它），底部分别是按钮和悬停按钮。

4

1 回答 1

0

在输入字段上提供 id 并为其提供背景图像（您希望默认显示而不悬停的图像）

<style type="text/css">
   #donation{background-image:url(images/icons/donate.png);}
</style>

<input type="image" id="donation" onmouseout="this.src='/images/icons/donate.png'" onmouseover="this.src='/images/icons/hover_donate.png'" border="0" name="submit" alt=""> And
于 2014-01-30T15:21:04.930 回答