100分赠送想要这种 js 效果来者有分，分不够我再加1000分也可以，在线等急

<image src="" onmouseout="";onmouseover"" id="imageUser"/>
然后根据这两个调用方法啊，
方法里面就可以
document.getElementById("imageUser").src="";

具体效果，就是这个网站的这个网站的效果：http://www.brown.edu/

哥们，看看这个是不是你想要的，
<html>
<head>
<title>QQ菜单</title>
<meta http-equiv='Content-Type' content='text/html; charset=gb2312'>
<script language='JavaScript'>
var headHeight = 22;var bodyHeight = 202;var objcount = 5;var step = 10;var moving = false;
function showme(obj1, obj2)
{
if (moving)
return;
moving = true;
for(i=0;i<document.all.tags('td').length;i++)
if (document.all.tags('td')[i].className.indexOf('headtd') == 0)
document.all.tags('td')[i].className = 'headtd1';
obj2.className = 'headtd2';
moveme(obj1);
}
function moveme(obj)
{
idnumber = parseInt(obj.id.substr(4));
objtop = headHeight * (idnumber - 1);
objbuttom = bodyHeight + headHeight * (idnumber - 2);
currenttop = parseInt(obj.style.top);
if (currenttop >= objbuttom)
{
countid = 1;
for(i=0;i<document.all.tags('div').length;i++)
if (document.all.tags('div')[i].id == 'item'+countid+'body')
{
obj = document.all.tags('div')[i];
objtop = headHeight * (countid - 1);
if (countid == idnumber)
{
moveup(obj,objtop,false);
break;
}
else
moveup(obj,objtop,true);
countid++;
}
}
else if ((currenttop <= objtop) && (idnumber < objcount))
{
idnumber++;
countid = objcount;
for(i=document.all.tags('div').length-1;i>=0;i--)
if (document.all.tags('div')[i].id == 'item'+countid+'body')
{
obj = document.all.tags('div')[i];
objbuttom = bodyHeight + headHeight * (countid - 2);
if (countid == idnumber)
{
movedown(obj,objbuttom,false);
break;
}
else
movedown(obj,objbuttom,true);
countid--;
}
}
}
function moveup(obj,objtop,ismove)
{
currenttop = parseInt(obj.style.top);
if (currenttop > objtop)
{
obj.style.top = currenttop - step;
setTimeout('moveup('+obj.id+','+objtop+','+ismove+')',1)
return;
}
moving = ismove;
}
function movedown(obj,objbuttom,ismove)
{
currenttop = parseInt(obj.style.top);
if (currenttop < objbuttom)
{
obj.style.top = currenttop + step;
setTimeout('movedown('+obj.id+','+objbuttom+','+ismove+')',1)
return;
}
moving = ismove;
}
</script>
</script>
<style type='text/css'>
.headtd1 { background: #00A4E1; border: 2px outset; border-color: #00BBFF #0077FF #0077FF #00BBFF; cursor: hand; font-size: 9pt}.headtd2 { background: #20C1FF; border: 2px outset; border-color: #60D3FF #0077FF #0077FF #60D3FF; cursor: hand; font-size: 9pt}.bodytd { background: #99CCFF; border: 2px outset; border-color: #B0D8FF #0077FF #0077FF #B0D8FF; font-size: 9pt}
</style>
</head>
<body bgcolor='#FFFFFF' text='#000000'>
<div id='mainboard' style='position:absolute; left:2px; top:2px; width:120px; height:290px; z-index:1; overflow: hidden; background: #99CCFF;'> <div id='item1body' style='position:absolute; left:0; top:0; width:120px; height:202px; z-index:2; overflow: hidden'><table width='100%' border='0' height='100%' cellpadding='2' cellspacing='0'><tr><td id='item1head' height='20' class='headtd2' onclick='showme(item1body,this)' align='center'>菜单1</td></tr><tr><td class='bodytd' align='center'>test</td></tr></table></div><div id='item2body' style='position:absolute; left:0; top:202; width:120px; height:202px; z-index:3; overflow: hidden'><table width='100%' border='0' height='100%' cellpadding='2' cellspacing='0'><tr><td id='item2head' height='20' class='headtd1' onclick='showme(item2body,this)' align='center'>菜单2</td></tr><tr><td class='bodytd' align='center'>test</td></tr></table></div><div id='item3body' style='position:absolute; left:0; top:224; width:120px; height:202px; z-index:4; overflow: hidden'><table width='100%' border='0' height='100%' cellpadding='2' cellspacing='0'><tr><td id='item3head' height='20' class='headtd1' onclick='showme(item3body,this)' align='center'>菜单3</td></tr><tr><td class='bodytd' align='center'>test</td></tr></table></div><div id='item4body' style='position:absolute; left:0; top:246; width:120px; height:202px; z-index:5; overflow: hidden'><table width='100%' border='0' height='100%' cellpadding='2' cellspacing='0'><tr><td id='item4head' height='20' class='headtd1' onclick='showme(item4body,this)' align='center'>菜单4</td></tr><tr><td class='bodytd' align='center'>test</td></tr></table></div><div id='item5body' style='position:absolute; left:0; top:268; width:120px; height:202px; z-index:6; overflow: hidden'><table width='100%' border='0' height='100%' cellpadding='2' cellspacing='0'><tr><td id='item5head' height='20' class='headtd1' onclick='showme(item5body,this)' align='center'>菜单5</td></tr><tr><td class='bodytd' align='center'>test</td></tr></table></div></div></body></html>
如果不是的话，我在给你弄别的

使用onmouseout和onmouseover事件调用js【给div传值，document.getElementById("**").value="**";】
然后写个<div id="**"></div>

这个效果和 js.alixixi.com网站上的一个名称叫（一款动感十足的div+css下滑导航竖条）效果一样！它提供了源代码，你把灵敏度降低，就一样了！

问题已经解决：
1：进入http://www.brown.edu/
2：文件另存为，保存的时候选择网页全部
3：保存的内容分为一个hmtl文件和，一个与html同名的文件夹，里面有相应的js至此，js就得到了，，，一个完整的例子也得到了
谢谢楼上的几位，揭帖

他就是一个 tree，
把onclick改成onmouseover就行了，
把css控制好就行了

接分
function showDialog(src)
{
    var shadow = document.createElement("div");
    var dialog = document.createElement("div");
    shadow.setAttribute("id", "shadow");
    dialog.setAttribute("id", "dialog");
    dialog.onclick = hideDialog;

    dialog.style.left=((document.documentElement.clientWidth-563)/2);
    dialog.style.top=document.documentElement.scrollTop+(document.documentElement.clientHeight-450)/2;    shadow.style.width = document.body.scrollWidth;
    shadow.style.height = document.body.scrollHeight;


    var img = document.createElement("img");
    img.setAttribute("src", src);
    img.alt="点单关闭"     dialog.appendChild(img);

    var page =document.body;

    page.appendChild(shadow);
    page.appendChild(dialog);
}
function hideDialog()
{
    var page = document.body;
    var shadow = $("shadow");
    var dialog = $("dialog");
    page.removeChild(shadow);
    page.removeChild(dialog);
}#dialog
{
position: absolute;
width: 563px;
height: 450px;
text-align: center;
background: #ffffff;
border: 1px #000 solid;
z-index: 999;
font-size: 12px;
}
#shadow
{
position: absolute;
left: 0;
top: 0;
background: #cccccc;
z-index: 998;
filter: alpha(opacity=80);
opacity: 0.8;
}

楼主，你打开那个网站，然后保存所有网页内容，就可以看到现成的JS代码的啊
我刚才已经试过了，JS以及CSS代码都是可以看到的
参考着做就没有问题的：）

image不是动态加载的，而是一上来就加载了
它是放在一个div里，通过display:none; ->display:;来实现的

js控制div的属性display：none或者display：block就行了

大体差不多了，楼主再稍稍改改，应该能用！<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>测试</title><script language="javascript">var rand = 0;
var useRand = 0;
var imgnum = 1;images = new Array;
images[1] = new Image();
images[1].src = "images/down01.png";
images[2] = new Image();
images[2].src = "images/up01.png";
var imgnum = images.length - 1; function showtitle1(hideme)
{
  var AX1=document.all(hideme); do {
var randnum = Math.random();
rand = Math.round((imgnum - 1) * randnum) + 1;
} while (rand == useRand);
useRand = rand;if(AX1.style.display=='none')
{
AX1.style.display = '';
tt1.src = images[1].src;

tt2.src = images[2].src;
AX2.style.display = 'none';
}
else
{

tt1.src = images[2].src;
AX1.style.display = 'none';
}//tt1.src = images[useRand].src;
//AX1.style.display=AX1.style.display=="none"?"":"none"; //判断是否隐藏 } function showtitle2(hideme2)
{
  var AX2=document.all(hideme2); do {
var randnum = Math.random();
rand = Math.round((imgnum - 1) * randnum) + 1;
} while (rand == useRand);
useRand = rand;if(AX2.style.display=='none')
{
AX2.style.display = '';
tt2.src = images[1].src;

tt1.src = images[2].src;
AX1.style.display = 'none';
}
else
{

tt2.src = images[2].src;
AX2.style.display = 'none';

}

}
</script></head><body bottommargin="0" leftmargin="0" rightmargin="0" topmargin="0">      <table width="1024" height="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
        <tr>
          <td width='1' bgcolor='#999999'></td>
          <td align="center" valign="top" ><table width="75%" border="0">
            <tr>
              <td height="40"> </td>
            </tr>
            <tr onMouseOver="showtitle1('show1');">
              <td align="left" valign="middle">
   <input name="tt1" type="image" src="images/up01.png" width="16" height="16" border="0">标题11111111111111</td>
            </tr>
            <tr id="show1" style="display:none">
              <td align="left" valign="top"><img src="http://www.brown.edu/web/images/windows/090325-0309-zubaida.jpg" alt="More about The Peter Green Lectures" width="765" height="170" /></td>
            </tr>

<tr onMouseOver="showtitle2('show2');">
              <td align="left" valign="middle">
   <input name="tt2" type="image" src="images/up01.png" width="16" height="16" border="0">标题222222222222222</td>
            </tr>
            <tr id="show2" style="display:none">
              <td align="left" valign="top"><img src="http://www.brown.edu/web/images/windows/090324-0903-Shepard_Krech_III.jpg" alt="More about Shepard Krech III" width="765" height="170" />
</td>
            </tr>
  <tr>
    <td align="center" valign="bottom"><table width="100%" height="40%" border="0" cellpadding="0" cellspacing="0" bgcolor="3E73B7" >
      <tr>
        <td height="3 " align="center" bgcolor="#003399" class="foot_bg1"></td>
      </tr>

</table>
</body>
</html>

我有一个类似的我的是一个按钮滑过显示使其背景变色
function MM_changeProp(objId,x,theProp,theValue) {
  var obj = null; with (document){ if (getElementById)
  obj = getElementById(objId); }
  if (obj){
    if (theValue == true || theValue == false)
      eval("obj.style."+theProp+"="+theValue);
    else eval("obj.style."+theProp+"='"+theValue+"'");
  }
}
<div class="bt_y" id="bt_y"
onMouseOver="MM_changeProp('bt_y_mid_arrage','','background','url(bt_y_mid.jpg) repeat-x','DIV');MM_changeProp('bt_y_left_arrage','','background','url(bt_y_left.jpg)','DIV');MM_changeProp('bt_y_right_arrage','','background','url(bt_y_right.jpg)','DIV')"
onMouseOut="MM_changeProp('bt_y_mid_arrage','','background','url(wirt.jpg) repeat-x','DIV');MM_changeProp('bt_y_left_arrage','','background','url(wirt.jpg)','DIV'); MM_changeProp('bt_y_right_arrage','','background','url(wirt.jpg)','DIV')">
<div id="bt_y_left_arrage" class="bt_y_left"></div>
<div id="bt_y_mid_arrage" class="bt_y_mid">
<div class="img">
<img src="add.gif" width="26" height="26">
</div>
<a style=""
href="javascript:submit();">确定</a>
</div>
<div id="bt_y_right_arrage" class="bt_y_right"></div>
</div>
</div>
.bt_y {
float: left;
margin-left: 0px;
width: 64px;
height: 26px;
text-align: center;
line-height: 26px;
color: #FFFFFF;
text-decoration: none;
font: "宋体"
}.bt_y a {
text-decoration: none;
color: #333333;
font-size: 9pt;
}.bt_y_mid {
height: 26px;
width: 54px;
float: left;
background: repeat-x;
}.bt_y_right {
height: 26px;
float: right;
width: 5px;
}.bt_y_left {
height: 26px;
float: left;
width: 5px;
}.bt_y_mid on {
height: 26px;
width: 54px;
float: left;
background: url(../images/newbt_y_mid.jpg) repeat-x
}.bt_y_right on {
height: 26px;
float: right;
width: 5px;
background: url(../images/bt_y_right.jpg)
}.bt_y_left on {
height: 26px;
float: left;
width: 5px;
background: url(../images/bt_y_left.jpg)
}.img {
float: left;
width: 26px;
height: 26px;
}

调试易

100分赠送想要这种 js 效果来者有分，分不够我再加1000分也可以，在线等急

解决方案 »

100分赠送 想要这种 js 效果 来者有分，分不够我再加1000分也可以，在线等 急

解决方案 »

100分赠送想要这种 js 效果来者有分，分不够我再加1000分也可以，在线等急