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

hqywork 2007-12-03 05:35:47
这个网站中上部有四个图片,在鼠标入上去时就能变,但其上还有文字。
如果光是画片能变,我知道用mouseover,mouseout就可以,但现在在画片上还有文字(不是放在画片中的那种),
大家帮我看看,谢谢了。网站是:http://live.chuguo.tv/hqywork
...全文
338 21 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
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做的
加载更多回复(1)

62,244

社区成员

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见,支持健康理性的辩论和互动,反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧