web页面鼠标单击文本框在文本框下面show一个div出来.

Question

<input id="code" size="30" onFocus="document.getElementById('getCode').style.visibility='visible'" name="code" style="width:120px;"/>&nbsp;&nbsp;<img id="getCode" style="visibility:hidden;" src="GetCode.asp"/>

Answer 1

..晕 类似QQ空间哪种 没见过吗? 下面放个img标签我还用上来问.....真是的...

Answer 2

web页面鼠标单击文本框在文本框下面show一个div出来.   我要做验证码用, 类似于qq空间那样子的验证码.
哎, 我恨死界面...
哪位大大给代码.
------------------------
原理不都一样吗？

Answer 3

/*
Copyright VaChina Inc.
2008-8-10
-----------------------------*/
/*检测浏览器/操作系统类型
-----------------------------start-------------------------------------*/
var sUserAgent = navigator.userAgent;
var fAppVersion = parseFloat(navigator.appVersion);
//检测是否Opera浏览器
var isOpera = sUserAgent.indexOf("Opera")>-1;
//检测是否Safari
var isKHTML = sUserAgent.indexOf("KHTML")>-1
|| sUserAgent.indexOf("Konqueror")>-1
|| sUserAgent.indexOf("AppleWebKit")>-1;
//检测IE
var isIE = sUserAgent.indexOf("compatible") > -1
&&sUserAgent.indexOf("MSIE") > -1
&&!isOpera;
//检测Firfox
var isFF = sUserAgent.indexOf("Firefox")>-1&&!isKHTML;
//检测Mozilla
var isMoz = sUserAgent.indexOf("Gecko")>-1&&!isKHTML;
var isNS4 = !isIE&&!isOpera&&!isMoz&&!isKHTML
&&(sUserAgent.indexOf("Mozilla")==0)
&&(navigator.appName == "Netscape")
&&(fAppVersion >= 4.0 && fAppVersion <5.0);
//检测操作系统
var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows");
var isMac = (navigator.platform == "Mac68K") || (navigator.platform == "MacPPC")
|| (navigator.platform == "Macintosh");var isUnix = (navigator.platform == "X11" && !isWin && !isMac);
/*
----------------------------- end -------------------------------------*/
var Utils = new Object;
//首先定义addEventHandler()方法,用来代替IE与其它浏览器中的事件处理函数
//参数一:要分配事件处理的对象;参数二:处理的事件名称;参数三:要分配的函数
Utils.addEventHandler=function(oTarget,sEventType,fnHandler){
if(oTarget.addEventListener){//DOM兼容浏览器
oTarget.addEventListener(sEventType,fnHandler,false);
}else if(oTarget.attachEvent){//IE
oTarget.attachEvent("on" + sEventType,fnHandler);
}else{//其它
oTarget["on" + sEventType] = fnHandler;
}
};
//删除的方法
Utils.delEventHandler=function(oTarget,sEventType,fnHandler){
if(oTarget.removeEventListener){//DOM兼容浏览器
oTarget.removeEventListener(sEventType,fnHandler,false);
}else if(oTarget.detachEvent){//IE
oTarget.detachEvent("on" + sEventType,fnHandler);
}else{//其它
oTarget["on" + sEventType] = null;
}
};
//格式化event对象
Utils.formatEvent = function(oEvent){
if(isIE&&isWin){
//当事件keypress发生时,为IE创建charCode属性
oEvent.charCode=(oEvent.type=="keypress")?oEvent.keyCode:0;
//由于IE仅支持冒泡阶段,因此将eventPhase的值设置为2
oEvent.eventPhase=2;
oEvent.isChar = (oEvent.charCode>0);//按键是否有字符与之相关
//为IE创建pageX、pageY属性
var scrollX=0;
var scrollY=0;
if(document.all){ 
if(!document.documentElement.scrollLeft)
scrollX=document.body.scrollLeft;
else
scrollX=document.documentElement.scrollLeft;
if(!document.documentElement.scrollTop)
scrollY=document.body.scrollTop;
else
scrollY=document.documentElement.scrollTop;
}
else{
scrollX=window.pageXOffset;
scrollY=window.pageYOffset;
}
oEvent.scrollX=scrollX;
oEvent.scrollY=scrollY;
oEvent.pageX=oEvent.clientX+scrollX;
oEvent.pageY=oEvent.clientY+scrollY;
oEvent.preventDefault=function(){this.returnvalue=false;};
if(oEvent.type=="mouseout")
oEvent.relatedTarget=oEvent.toElement;
else if(oEvent.type=="mouseover")
oEvent.relatedTarget=oEvent.fromElement;
oEvent.stopPropagation=function(){this.cancelBubble=true;};
oEvent.target=oEvent.srcElement;
oEvent.time=(new Date()).getTime();
}
return oEvent;
};
//获取event的方法
Utils.getEvent=function(event){
if(window.event)
return Utils.formatEvent(window.event);
else
return Utils.getEvent.caller.arguments[0];
};
//上面的代码主要是为浏览器兼容写的代码，不爽的话你可以不要...
<style  type="text/css">  
input{width:260px;}
textarea{overflow-y:auto;}
input,textarea{border:#000000 1px solid;margin:0;}
#SiteFoot{width:340px;height:120px;margin-bottom:10px;}
#sub{width:100px;border:0;margin-left:240px;}
#editorBox{position:absolute;visibility:hidden;background:#F7EFCC;padding:6px;
line-height:22px;font-size:14px;border:#000000 1px solid;width:360px;}
#editorBox div{text-align:right;border-top:#000000 1px solid;margin-top:10px;}
</style>
...
<a href="#" onclick="showThis()">显示层</a>
...
<script type="text/javascript">
var $=function(Id){return document.getElementById(Id);};
function showThis(){
var oEvent = Utils.getEvent();//获取event对象
var oDiv=$("editorBox");
oDiv.style.visibility = "visible";
if(oEvent.pageX + 360>document.body.offsetWidth)
oDiv.style.left = oEvent.pageX - 360 + "px";
else
oDiv.style.left = oEvent.pageX + 5 + "px";
//
oDiv.style.top = oEvent.pageY + 5 + "px";
}
function hideThis(){
var oDiv = $("editorBox");
oDiv.style.visibility = "hidden";
}</script>
<div id="editorBox">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<form action="?menu=editor" method="post" id="eform" name="eform">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td align="right" valign="top">&nbsp;标题：</td>
    <td>
    <input name="title" id="title" value="" type="text" style="width:160px;"/>
    <input name="sub2" type="submit" value="确定" style="width:60px;" />
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</form>
</table>
<div><a href="" onClick="hideThis();return false;">关闭</a></div>
</div>