| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 1746 人关注过本帖
标题:大侠帮个忙整理一下(功能是实现当鼠标移到图片的时候弹出另一张图片)
只看楼主 加入收藏
wendi
Rank: 1
等 级:新手上路
帖 子:10
专家分:0
注 册:2004-7-30
收藏
 问题点数:0 回复次数:5 
大侠帮个忙整理一下(功能是实现当鼠标移到图片的时候弹出另一张图片)

请帮忙:

代码和文字,帮忙整理成网页格式即:

<html>

<head></head>

<body>

</body>

</html>

插入的图片用1.gif 和2.gif代替

代码如下:

<div id="Layer1" style="position:absolute; width:274px; height:115px;

z-index:2; visibility: hidden;">

<div id="courses" style="position:absolute; width:81px;

height:113px; z-index:1; left: -6px; top: 25px; visibility: hidden;"

onMouseOver="MM_showHideLayers('courses','','show')"

onMouseOut="MM_showHideLayers('courses','','hide')">

层内容

</div>

</div>

注意这是两个重叠的层,用来防止位移。

然后把要显示的图片放进最里面的层了。

移上去的图片同样加上:

onMouseOver="MM_showHideLayers('courses','','show')"

onMouseOut="MM_showHideLayers('courses','','hide')"

这两段就是控制显示和隐藏的courses是层的名字。

我在层上面也加了这个,是说明你把鼠标移上出现的图片那里还是不会消失的,如果你

不要这样的功能,可以自行去掉。

实现代码:

<script language="JavaScript" type="text/JavaScript">

<!--

function MM_reloadPage(init) { //reloads the window if Nav4 resized

if (init==true) with (navigator) {if

((appName=="Netscape")&&(parseInt(appVersion)==4)) {

document.MM_pgW=innerWidth; document.MM_pgH=innerHeight;

onresize=MM_reloadPage; }}

else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH)

location.reload();

}

MM_reloadPage(true);

function MM_findObj(n, d) { //v4.01

var p,i,x; if(!d) d=document;

if((p=n.indexOf("?"))>0&&parent.frames.length) {

d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)

x=d.forms[i][n];

for(i=0;!x&&d.layers&&i<d.layers.length;i++)

x=MM_findObj(n,d.layers[i].document);

if(!x && d.getElementById) x=d.getElementById(n); return x;

}

function MM_showHideLayers() { //v6.0

var i,p,v,obj,args=MM_showHideLayers.arguments;

for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null)

{ v=args[i+2];

if (obj.style) { obj=obj.style;

v=(v=='show')?'visible':(v=='hide')?'hidden':v; }

obj.visibility=v; }

}

//-->

</script>

搜索更多相关主题的帖子: 鼠标 visibility 
2004-07-30 22:47
griefforyou
Rank: 6Rank: 6
等 级:贵宾
威 望:27
帖 子:3336
专家分:0
注 册:2004-4-15
收藏
得分:0 

有这么复杂么?


天津网站建设 http://www./
2004-07-30 23:31
wendi
Rank: 1
等 级:新手上路
帖 子:10
专家分:0
注 册:2004-7-30
收藏
得分:0 

呵呵,麻烦你帮我写一下阿,谢谢阿

2004-07-30 23:40
griefforyou
Rank: 6Rank: 6
等 级:贵宾
威 望:27
帖 子:3336
专家分:0
注 册:2004-4-15
收藏
得分:0 

<html> <head></head> <body> <div id="Layer1" style="position:absolute; width:274px; height:115px;z-index:2; visibility:display;" onMouseOver="MM_showHideLayers('courses','','show')" onMouseOut="MM_showHideLayers('courses','','hide')"><img src=1.gif width=274 height=115> <div id="courses" style="position:absolute; width:81px; height:113px;z-index:1; left: -6px; top: 25px; visibility: hidden;"> <img src=2.gif width=81 height=113> </div> </div>

<script language="JavaScript" type="text/JavaScript"> <!--

function MM_reloadPage(init) { //reloads the window if Nav4 resized

if (init==true) with (navigator) {if

((appName=="Netscape")&&(parseInt(appVersion)==4)) {

document.MM_pgW=innerWidth; document.MM_pgH=innerHeight;

onresize=MM_reloadPage; }}

else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH)

location.reload();

}

MM_reloadPage(true);

function MM_findObj(n, d) { //v4.01

var p,i,x; if(!d) d=document;

if((p=n.indexOf("?"))>0&&parent.frames.length) {

d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)

x=d.forms[i][n];

for(i=0;!x&&d.layers&&i<d.layers.length;i++)

x=MM_findObj(n,d.layers[i].document);

if(!x && d.getElementById) x=d.getElementById(n); return x;

}

function MM_showHideLayers() { //v6.0

var i,p,v,obj,args=MM_showHideLayers.arguments;

for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null)

{ v=args[i+2];

if (obj.style) { obj=obj.style;

v=(v=='show')?'visible':(v=='hide')?'hidden':v; }

obj.visibility=v; }

}

//--> </script> </body> </html>


天津网站建设 http://www./
2004-08-03 14:03
wendi
Rank: 1
等 级:新手上路
帖 子:10
专家分:0
注 册:2004-7-30
收藏
得分:0 
谢谢啊,这样能实现一张图片的显示效果,如果我想让多张图片都实现这样的效果,该怎么做?
2004-08-03 15:01
cicicoco
Rank: 1
等 级:新手上路
帖 子:2
专家分:0
注 册:2004-8-3
收藏
得分:0 

学习

2004-08-03 17:12
快速回复:大侠帮个忙整理一下(功能是实现当鼠标移到图片的时候弹出另一张图片) ...
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.034259 second(s), 7 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved