见图，鼠标移到input后GOOGLE的图片会消失，鼠标移走后又显示

<style type="text/css"> input{ background:url(http://bbs.blueidea.com/images/default/logo.gif) no-repeat} </style> <script type="text/javascript"> window.onload = function (){ var oInput = document.getElementById("textfield"); oInput.onmouseover = function(){ this.style.background = ""; } oInput.onmouseout = function(){ this.style.background = "url(http://bbs.blueidea.com/images/default/logo.gif) no-repeat"; } } </script> <input type="text" name="textfield" id="textfield" />
 提示：您可以先修改部分代码再运行

小改

<style type="text/css"> .input{ background:url(http://bbs.blueidea.com/images/default/logo.gif) no-repeat} </style> <script type="text/javascript"> window.onload = function (){ var oInput = document.getElementById("textfield"); var bf=0 oInput.onmouseover = function(){ this.className=''; } oInput.onmouseout = function(){ if (this.value==''&& bf==0)this.className='input'; } oInput.onblur= function(){bf=0;if (this.value=='')this.className='input';} oInput.onfocus= function(){bf=1;} } </script> <input type="text" name="textfield" id="textfield" class="input" />
 提示：您可以先修改部分代码再运行

[ 本帖最后由 caiying2007 于 2008-7-16 06:53 编辑 ]

好像很爽的样子，可惜太乱看不懂

(function() { var f = document.getElementById('cse-search-box'); if (!f) { f = document.getElementById('searchbox_demo'); } if (f && f.q) { var q = f.q; var n = navigator; var l = location; if (n.platform == 'Win32') { q.style.cssText = 'border: 1px solid #7e9db9; padding: 2px;'; } var b = function() { if (q.value == '') { q.style.background = '#FFFFFF url(http:\x2F\x2Fwww.google.com\x2Fcoop\x2Fintl\x2Fen\x2Fimages\x2Fgoogle_custom_search_watermark.gif) left no-repeat'; } }; var f = function() { q.style.background = '#ffffff'; }; q.onfocus = f; q.onblur = b; if (!/[&?]q=[^&]/.test(l.search)) { b(); } } })();
 提示：您可以先修改部分代码再运行

不错的效果!

再次小改

<style type="text/css"> .input{ background:url(http://bbs.blueidea.com/images/default/logo.gif) no-repeat} </style> <script type="text/javascript"> window.onload = function (){ var oInput = document.getElementById("textfield"); var bf=0 oInput.onmouseout = function(){ if (this.value==''&& bf==0)this.className='input'; } oInput.onblur= function(){bf=0;if (this.value=='')this.className='input';} oInput.onfocus= function(){bf=1;this.className='';} } </script> <input type="text" name="textfield" id="textfield" class="input" />
 提示：您可以先修改部分代码再运行

JS是个麻烦的事!受教,收藏!

input也可以定义背景图和border等css样式,然后配合onmouseover等鼠标事件来动态改变css样式就可以做到了