网页中的个人头像选择框

网页中的个人头像选择框(转)

 

1、先看个效果

 

 

2、源文件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style>
body,td,div  {font:12px 宋体}
label        {height:119px;padding:3px 0px 0px 4px}
.link_box    {text-align:left;cursor:default}
.link_head   {width:100%;height:123;border:2px inset}
.link_text   {background:#fff;padding-left:2px}
.link_arrow0 {font:14px marlett;text-align:center;width:22;height:100%;border:2px outset;background:buttonface}
.link_arrow1 {font:14px marlett;text-align:center;width:22;height:100%;border:1px solid buttonshadow;padding:2px 0px 0px 2px;background:buttonface}
.link_value  {position:absolute;visibility:hidden;border:1px solid;overflow:auto;overflow-x:hidden;filter:alpha(opacity:0)}
.link_record0{width:100%;height:120;border-top:1px solid #eee;background:#fff;color:#000;padding-left:2px}
.link_record1{width:100%;height:120;border-top:1px solid #047;background:#058;color:#fe0;padding-left:2px}
</style>
<script>
var dropShow=false
var currentID
function dropdown(el){
if(dropShow){
dropFadeOut()
}else{
currentID=el
el.style.visibility="visible"
dropFadeIn()
}
}
function dropFadeIn(){//選單淡入的效果
if(currentID.filters.alpha.opacity<100){
currentID.filters.alpha.opacity+=20
fadeTimer=setTimeout("dropFadeIn()",50)
}else{
dropShow=true
clearTimeout(fadeTimer)
}
}
function dropFadeOut(){//選單淡出的效果
if(currentID.filters.alpha.opacity>0){
clearTimeout(fadeTimer)
currentID.filters.alpha.opacity-=20
fadeTimer=setTimeout("dropFadeOut()",50)
}else{
dropShow=false
currentID.style.visibility="hidden"
}
}
function dropdownHide(){
if(dropShow){
dropFadeOut()
dropShow=false
}
}
function hiLight(el){//高亮度顯示指標位置
if(dropShow){
for(i=0;i<el.parentElement.childNodes.length;i++){
el.parentElement.childNodes(i).className="link_record0"
}
el.className="link_record1"
}
}
function CheckMe(el){//替換顯示內容
el.parentElement.parentElement.childNodes(0).childNodes(0).childNodes(0).childNodes(0).childNodes(0).childNodes(0).innerHTML=el.innerHTML
}
document.onclick=dropdownHide
</script>
 </head>

 <body>
<div class=link_box style="width:150px" onselectStart="return false">
<div class=link_head onclick="dropdown(value2)">
<table width=100% height=100% border=0 cellpadding=0 cellspacing=0><tr>
<td><div class=link_text><img src="3.gif" align="absmiddle"><label>请选择</label></div></td>
<td width=22 align=right><div class=link_arrow0 onmousedown="this.className='link_arrow1'" onmouseup="this.className='link_arrow0'" onmouseout="this.className='link_arrow0'">6</div></td>
</tr></table>
</div>
<div id=value2 class=link_value style="width:30%;height:30%">
<div class=link_record0 onmouseover="hiLight(this)" onclick="CheckMe(this);" ><img src="1.jpg" align="absmiddle"><label>笑死你</label></div>
<div class=link_record0 onmouseover="hiLight(this)" onclick="CheckMe(this);"  ><img src="2.jpg"  align="absmiddle"><label>反省一下</label></div>
<div class=link_record0 onmouseover="hiLight(this)" onclick="CheckMe(this);"   ><img src="3.gif"   align="absmiddle"><label>下班啦</label></div>
</div>
</div>
 </body>
</html>

 

3、改改,加个table,这样就可以分几行展示:

<div id=value2 class=link_value style="width:650px;height:30%">
<table>
   <tr>
     <td><div class=link_record0 onmouseover="hiLight(this)" onclick="CheckMe(this);">
<img src="1.jpg" align="absmiddle"></div></td>
  <td><div class=link_record0 onmouseover="hiLight(this)" onclick="CheckMe(this);">
<img src="2.jpg" align="absmiddle"></div></td>
  <td><div class=link_record0 onmouseover="hiLight(this)" onclick="CheckMe(this);">
<img src="3.gif" align="absmiddle"></div></td>
   </tr>
   <tr>
     <td><div class=link_record0 onmouseover="hiLight(this)" onclick="CheckMe(this);">
<img src="1.jpg" align="absmiddle"></div></td>
  <td><div class=link_record0 onmouseover="hiLight(this)" onclick="CheckMe(this);">
<img src="2.jpg" align="absmiddle"></div></td>
  <td><div class=link_record0 onmouseover="hiLight(this)" onclick="CheckMe(this);">
<img src="3.gif" align="absmiddle"></div></td>
   </tr>
</table>
</div>

 

效果:

网页中的个人头像选择框

 源文件见附件!

 

你可能感兴趣的:(网页)