谁能告诉这是什么效果？给我个关键词，能给实现就更好了~~

谁能告诉这是什么效果？给我个关键词，能给实现就更好了~~有两个效果，我想知道怎么实现的：
1.鼠标移到图片上，弹出提示信息。
2.鼠标移到一个图片上，和这个图片在一个组的其他图片都变暗，而这个图片变亮。就是这两个效果，我们描述的不是太清楚，大家看这个两个网站吧，序号对应上面的两个效果。1.http://qing.weibo.com/tag/小清新
2.http://www.aimm.cc/大家告诉告诉我这是用到了上面技术，应该搜索什么关键词？

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

第一个给图片加title
第二个调整opacity即可
1:
onmouseover[onmouseenter]时显示那些信息
和onmouseout[onmouseleave]时隐藏那些信息
[]中的两个事件是jQuery中的2:带蒙板效果的焦点图
http://topic.csdn.net/u/20120823/10/5e9913b4-d91d-4462-8ee9-84c7bfd54457.html
我在这个贴子里回了，就不重发了。那里面用的是jQuery的。原生的话照着改就可以了
第一个根本是title，title的效果谁不会，是鼠标移上去，原来看不见的【发布作者】+【喜欢按钮】会浮在图片上！！根本不是title！！！！！
一世情急，写错了，重写一遍：
第一个根本不是title，title的效果谁不会。现在的效果是鼠标移上去，原来看不见的【发布作者】+【喜欢按钮】会浮在图片上！！根本不是title！！！！！
<head>
<meta charset="utf-8" />
<style>
/*css reset*/
body, div, img { margin:0; padding:0; }
img { width:200px; height: 200px; }
.image_box { width:600px; height:400px; }
.image_box div { width:200px; height:200px; overflow:hidden; float:left; background:#333; position:absolute; }
span { display:none; position:absolute; top:180px; left: 100px; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>$(document).ready(function(e) {
    $(".image_box div").hover(
function (){
var div_hover = this;
$(div_hover).siblings().children("img").stop().fadeTo(500,0.3);
$(div_hover).parent().siblings().children("div").children("img").stop().fadeTo(500,0.3);
$(div_hover).children("img").stop().fadeTo(500,1);
$(div_hover).children("span").show();
},
function (){
var div_hover = this;
$(div_hover).siblings().children("img").stop().fadeTo(500,1);
$(div_hover).parent().siblings().children("div").children("img").stop().fadeTo(500,1);
$(div_hover).children("span").hide();
});
});
</script>
</head>
<body>
<div class="image_box">
    <div style="left:0px; top:0px"><img src="http://www.yooyoo360.com/photo/2009-1-1/20090112120352530.jpg"/><span>图1</span></div>
    <div style="left:200px; top:0px"><img src="http://www.yooyoo360.com/photo/2009-1-1/20090112120352530.jpg"/><span>图2</span></div>
    <div style="left:400px; top:0px"><img src="http://www.yooyoo360.com/photo/2009-1-1/20090112120352530.jpg"/><span>图3</span></div>
    <div style="left:0px; top:200px"><img src="http://www.yooyoo360.com/photo/2009-1-1/20090112120352530.jpg"/><span>图4</span></div>
    <div style="left:200px; top:200px"><img src="http://www.yooyoo360.com/photo/2009-1-1/20090112120352530.jpg"/><span>图5</span></div>
    <div style="left:400px; top:200px"><img src="http://www.yooyoo360.com/photo/2009-1-1/20090112120352530.jpg"/><span>图6</span></div>
    </div>

</body>
你做界面效果时，先按它显示的那样做好，可以准确显示无误
静态调试好了以后，将悬浮在上面的那两个小东东display:none隐藏它们，再交由js事件中去处理它的显示/隐藏的切换。看了下，有个小动画。你也可以用定时器去让显示/隐藏的效果中间产生过渡动画
onmouseover[onmouseenter]时显示那些信息
和onmouseout[onmouseleave]时隐藏那些信息
第二个效果是解决了，但是第一个我还是有点不明白，因为我昨天做第一个的时候，做出类似的效果，可是如果我让浮动的信息中的信息是一个超链接时，over事件就会变的不清晰，我贴出代码，大家帮我看一下：
<style>
.music_box_default
{
background:url(images/music_box_bg.jpg);
width:400px;
height:160px;
border:#ccc 1px solid;
margin:0px auto;
}
.music_box_default .music_author
{
position:relative;
float:left;
margin-top:9px;
margin-left:9px;
height:140px;
border:#ccc 1px solid;
width:140px;
background:url(images/music_auther_bg.jpg);
}
.music_box_default .music_author img
{
height:140px;
width:140px;
}
.music_box_default #music_auther_info
{
position:absolute;
bottom:0px;
left:0px;
right:0px;
width:140px;
height:25px;
color:#000;
text-align:center;
cursor:pointer;

}
.music_box_default .music_value
{
height:140px;
width:230px;
border:1px #ccc solid;
float:left;
margin-top:9px;
margin-left:9px;
}
</style>
<script>
    function music_auther_info_over(str, id) {
        music_auther_info.innerHTML = "<a href='http://www.bmebook.com/home.php?mod=space&uid="+id+"&do=profile'>"+str+"</a>";
        music_auther_info.style.background = "url(images/auther_bg_touming.png)";
        //music_auther_info.style.visibility = "visible";
    }
    function music_auther_info_out() {
        music_auther_info.innerHTML = '';
        music_auther_info.style.background = ""; //"url(images/auther_info_out_bg.png)";
        //music_auther_info.style.visibility = "hidden";
    }
</script>
<div class="music_box_default">
    <div class="music_author" onmouseover="music_auther_info_over('admin','1')" onmouseout="music_auther_info_out()">
        <a href="http://bmebook.com"><img src="images/1.jpg" /></a>
        <div id="music_auther_info"></div>
    </div>
</div>
这个代码也是可以实现第二个效果，但是第一的话不行啊！
<div style="left:200px; top:0px"><img src="http://www.yooyoo360.com/photo/2009-1-1/20090112120352530.jpg"/><a href="http://bmebook.com">ͼ2</a></div>
我把<span>换成<a>就出不来了，谁知道这是怎么回事
你没改CSS 你把css和js里的span全换成a就好了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
/*css reset*/
body, div, img { margin:0; padding:0; }
img { width:200px; height: 200px; }
.image_box { width:600px; height:400px; }
.image_box div { width:200px; height:200px; overflow:hidden; float:left; background:#333; position:absolute; }
a { display:none; position:absolute; top:180px; left: 100px; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>$(document).ready(function(e) {
    $(".image_box div").hover(
function (){
var div_hover = this;
$(div_hover).siblings().children("img").stop().fadeTo(500,0.3);
$(div_hover).parent().siblings().children("div").children("img").stop().fadeTo(500,0.3);
$(div_hover).children("img").stop().fadeTo(500,1);
$(div_hover).children("a").show();
},
function (){
var div_hover = this;
$(div_hover).siblings().children("img").stop().fadeTo(500,1);
$(div_hover).parent().siblings().children("div").children("img").stop().fadeTo(500,1);
$(div_hover).children("a").hide();
});
});
</script>
</head>
<body>
<div class="image_box">
    <div style="left:0px; top:0px"><img src="http://www.yooyoo360.com/photo/2009-1-1/20090112120352530.jpg"/><a href="#">图1</a></div>
    <div style="left:200px; top:0px"><img src="http://www.yooyoo360.com/photo/2009-1-1/20090112120352530.jpg"/><a href="#">图2</a></div>
    <div style="left:400px; top:0px"><img src="http://www.yooyoo360.com/photo/2009-1-1/20090112120352530.jpg"/><a href="#">图3</a></div>
    <div style="left:0px; top:200px"><img src="http://www.yooyoo360.com/photo/2009-1-1/20090112120352530.jpg"/><a href="#">图4</a></div>
    <div style="left:200px; top:200px"><img src="http://www.yooyoo360.com/photo/2009-1-1/20090112120352530.jpg"/><a href="#">图5</a></div>
    <div style="left:400px; top:200px"><img src="http://www.yooyoo360.com/photo/2009-1-1/20090112120352530.jpg"/><a href="#">图6</a></div>
    </div>

</body>
</html>
使用延时就是了
function out(){
   timer=setTimeout("music_auther_info_out()",200);
}
<div class="music_author" onmouseover="music_auther_info_over('admin','1')" onmouseout="out()">
额，出来了，谢谢大家啊，5楼的方法也对的，我刚才只改了html，没改js，呵呵~~谢谢大家了~~
提意见当然好，你直接提了个“title”，谁都能看出来那不是title，如果要是title我还有必要拿出来问？
div 绝对定位设置透明度和坐标
显示你要显示的其它信息。用半透明div 遮挡其它内容。其它内容看起来，就变暗了
<img src="image/xx.jpg" alt="xxx" width="xxx" height="xxx" border="0"/>
显示字是alt的原因，至你说于第二个效果，我没看出来。真有你说的哪个效果？
你这种态度很不好。
你看你自己开始问的问题：
“1.鼠标移到图片上，弹出提示信息。”
仅仅这么说，而不是象你后面说得这么清楚，那所有人都会认可TITLE是合理答案之一。
你自己没说清问题，别人回答之后你又用这样一看就是很不礼貌的态度说话，这是来问问题还是找事啊？
你看看这个论坛的发帖须知怎么说的：
http://community.csdn.net/IndexPage/SmartQuestion.aspx
起码，第一在提问时尽量说清楚你的需求和你已经具备的基础（不知道TITLE的人也大有人在，不要只考虑到你自己，而不考虑到整个客观情况），第二是无论别人给的答案对错，你都没有权力和资格说人家，毕竟你是来求助，别人都是在热心帮你。
尽量说清楚你的需求和你已经具备的基础，这个基础当然只需要和问题有关的就行，实际上这个问题，你如果象后面说的这样“原来看不见的【发布作者】+【喜欢按钮】会浮在图片上”，那别人自然也就知道不是用TITLE做的了。后面的人，即使没说TITLE的，也并非是认为TITLE不是你开始问题的合理答案（甚至是最简单合适的答案），只不过是因为对别人已经说过的答案不想再重复，给出其它的方案而已。
积点口德吧，给自己以后的孩子留点德。说出来的话。早晚会还的，这就好比任何国家对付不了美国，但是老天爷会收拾它的，比如这次飓风，人在做，天在看。good luck!