占位符html中的图像？

Question

我可以使用纯HTML执行此类操作,如果需要css和javascript:

当鼠标聚焦时,它会变成这样:

所以我在想一个图像占位符.我是在正确的轨道上,还是有更好/更简单或更直接的方法？

编辑:出于纯粹的好奇心,我将如何使用JavaScript实现这一点,因为所有当前的答案都与CSS有关？

Answer 1

据我所知,这只是CSS背景图片.

http://www.w3schools.com/cssref/pr_background-image.asp

看看它,你可以通过设置它的位置来实现这一点:http://www.w3schools.com/cssref/pr_background-position.asp

您还可以更改背景图像,具体取决于项目是否聚焦,或者不是简单地在聚焦时显示背景图像并隐藏它时不是:

#item:focus{
bacground image code here
}

关于焦点的更多细节:http://www.w3schools.com/cssref/sel_focus.asp

还有一些重点用法示例:http://www.mozilla.org/access/keyboard/snav/css_usage.html

更新资源 - 谢谢@MrMisterMan

http://developer.mozilla.org/en/CSS/background-image

http://developer.mozilla.org/en/CSS/background-position

JAVASCRIPT:

使用JavaScript将属性添加到元素中,如下所示:

这将在它具有焦点时调用您的函数并将其传递给input元素.

您还可以检测onfocusout

希望这有帮助,任何问题只是问:)