• 主页
  • ASP
  • .NET Framework
  • Web Services
  • VB
  • VC
  • 图表区
  • 分析与设计
  • 组件/控件开发
  • LINQ

大家来看看这个功能是怎么实现的?

hqywork 2007-12-03 05:35:47
这个网站中上部有四个图片,在鼠标入上去时就能变,但其上还有文字。
如果光是画片能变,我知道用mouseover,mouseout就可以,但现在在画片上还有文字(不是放在画片中的那种),
大家帮我看看,谢谢了。网站是:http://live.chuguo.tv/hqywork
...全文
213 点赞 收藏 21
写回复
21 条回复
WNASP 2007年12月05日
这里不是美工啊!
回复 点赞
qq22345111 2007年12月05日
CSS的方法
回复 点赞
shanshuiboy 2007年12月05日
这不是交换图像吧?DW里就有!
回复 点赞
shoushii 2007年12月04日
CSS滤镜
回复 点赞
hqywork 2007年12月04日
不太明白,谁能帮帮我呀
回复 点赞
icpal 2007年12月04日
.net论坛里不要讨论这么简单的美工问题
不懂就研究下别人的源代码
很明显是div做的嘛
回复 点赞
qawszx 2007年12月04日
肯定是div的css起的作用
回复 点赞
shagoo 2007年12月04日
帮你分析网页了,接分:)


.index_block4{ position:relative; margin-top:1px; padding-top:15px; height:200px; background: url(../images/index-pic/block4-bg.gif) repeat-x; }
.index_block4 li{ float:left; margin-left:3px; width:188px; height:191px;}
.index_block4 li a{ display:block; width:188px; height:191px; text-indent:-7777px;}
.block4_1 a{ background: url(../images/index-pic/block1-1.jpg) no-repeat; }
.block4_1 a:hover{ background: url(../images/index-pic/block1.gif) no-repeat; }

.block4_2 a{ background: url(../images/index-pic/block2-1.jpg) no-repeat; }
.block4_2 a:hover{ background: url(../images/index-pic/block2.gif) no-repeat; }

.block4_3 a{ background: url(../images/index-pic/block3-1.jpg) no-repeat; }
.block4_3 a:hover{ background: url(../images/index-pic/block3.gif) no-repeat; }

.block4_4 a{ background: url(../images/index-pic/block4-1.jpg) no-repeat; }
.block4_4 a:hover{ background: url(../images/index-pic/block4.gif) no-repeat; }


这就是 那四块 变色 block 的 css ...
回复 点赞
yjwang0621 2007年12月04日
^_^
回复 点赞
yixianggao 2007年12月04日
To: only_endure

肯定是样式表作了手脚!
http://www.chuguo.tv/css/index.css

加上这些就好了!
<style type="text/css">
.video_bg{ float:left; position:relative; margin-left:3px; width:432px; height:350px; background: url(../images/index-pic/video-bg.gif) no-repeat;}
.video_title{ position:absolute; top:5px; left:40px;}
.video_pic{ position:absolute; width:420px; top:35px; left:22px;}
.video_pic li{ float:left; position:relative; margin-right:5px; margin-bottom:4px;}
</style>
回复 点赞
一品梅 2007年12月04日
如果是动态数据布局,恐怕不能这样应用了吧...
回复 点赞
syc958 2007年12月04日
TOOLLIP
回复 点赞
一品梅 2007年12月04日
呵呵,8楼的这样岂不要绝对定位???
回复 点赞
一品梅 2007年12月04日
学习.
回复 点赞
qawszx 2007年12月04日
div + css
回复 点赞
yixianggao 2007年12月04日
晕,居然没换行,俺手动格式化一下,L@_@K
<li onmouseover="show('show_title')" onmouseout="hide('show_title')">
<a href='http://www.chuguo.tv/LanguageLearn/TeacherTeamPage.aspx?Id=11'target='_blank'>
<img src='/Upload/images/ChuGuoIndex/bea5dea3-3c06-4f37-baeb-6e57dc5af513.gif' width='126' height='95' border='0' />
</a>
<div id='show_title' style='position: absolute; display: none; background-color: #fff;color: #0096ff; filter: alpha(Opacity=80); width: 126px; left: 0px; top: 0px;z-index: 100'>
汇通资深教师—唐冬青
</div>
</li>
回复 点赞
yixianggao 2007年12月04日
看源码,少废话,哈

很明显是js+div
<li onmouseover="show('show_title')" onmouseout="hide('show_title')"><a href='http://www.chuguo.tv/LanguageLearn/TeacherTeamPage.aspx?Id=11'target='_blank'><img src='/Upload/images/ChuGuoIndex/bea5dea3-3c06-4f37-baeb-6e57dc5af513.gif' width='126' height='95' border='0' /></a><div id='show_title' style='position: absolute; display: none; background-color: #fff;color: #0096ff; filter: alpha(Opacity=80); width: 126px; left: 0px; top: 0px;z-index: 100'>汇通资深教师—唐冬青</div></li>
回复 点赞
曲滨_銘龘鶽 2007年12月03日
这东西不用写 js 代码的 css 全搞定!
一定都被 DW 带的那个切变按钮给误导了!
回复 点赞
曲滨_銘龘鶽 2007年12月03日
不是什么 DIV 什么的
用 A 标签就可以实现因为 a 有鼠标移如移出的样式
A 标签用背景图、字就是那么写在里面的

那些块是 A 标签 display:block 的结果
然后再 a:hover 状态时改变背景图,和更换文字颜色


不懂自己看看 http://www.chuguo.tv/css/index.css

这种东西csdn 就有好多处
回复 点赞
chenshuliang 2007年12月03日
用div做的
回复 点赞
发动态
发帖子
.NET技术社区
创建于2007-09-28

4.9w+

社区成员

66.8w+

社区内容

.NET技术交流专区
社区公告
暂无公告