Yahoo的Logo彩蛋 QQCAT--IT技术

Yahoo的Logo彩蛋

[ 来自:不祥作者:网络收集阅读:0 时间:2008-1-25 19:41:31 ]

<img src="http://cn.yimg.com/i/lg/2/y_cn_lg.gif" alt="中国雅虎" width="208" height="61" id="ycn_lg" />
<script type="text/javascript">
var yodel_map = '<map name="yodel"><area shape="rect" coords="190,29,197,35" href="http://cn.yahoo.com" onclick="load_yodel();return false;"><area shape="poly" coords="193,0,202,1,197,25,192,24" href="http://cn.yahoo.com" onclick="load_yodel();return false;"></map>', 
yodel_str = '<object id="wmsgsound" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="0" height="0">'+
'<param name="movie" value="http://cn.yimg.com/i/comn/snd/1_0/y3.swf" /><param name="quality" value="high" /><param name="loop" value="0" />'+
'<embed name="wmsgsound" src="http://cn.yimg.com/i/comn/snd/1_0/y3.swf" loop="0" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="0" height="0"></embed></object>',
y_logo = document.getElementById("ycn_lg");
if(y_logo){
y_logo.useMap = "#yodel";
}
function load_yodel(){
y_logo.blur();
var con = document.createElement("span");
con.style.visibility = "hidden";
con.innerHTML = yodel_str;
document.body.appendChild(con);
};
document.write("<span style=\"visibility:hidden;\">"+yodel_map+"</span>");
</script>

<!-- 
其实这个东西非常简单

让偶带你解读下Yahoo的这段东西
document.write("<span style=\"visibility:hidden;\">"+yodel_map+"</span>");
这段的意思是在页面显示一个隐藏的span,span的内容其实是:
1.
<span style="visibility:hidden;">
    <map name="yodel">
        <area shape="rect" coords="190,29,197,35" href="http://cn.yahoo.com" onclick="load_yodel();return false;">
        <area shape="poly" coords="193,0,202,1,197,25,192,24" href="http://cn.yahoo.com" onclick="load_yodel();return false;">
    </map>
</span>

很明显这个就是在Yahoo的Logo的感叹号加了两个热区,代码里边yodel_map=****定义的就是两个热区了

对应的yodel_str =****就是调用一个flash,这个flash就是那个声音文件了

2.
y_logo = document.getElementById("ycn_lg";
if(y_logo){
y_logo.useMap = "#yodel";
}

看到没logo图片的name是ycn_lg,这句就是让名字是ycn_lg的图片的热区应用"yodel"这个名字的热区的内容,也就是上边1.的内容

3.
onclick="load_yodel();return false;
这句的意思就明显了,点击的时候就会调用load_yodel()这个函数

4.
function load_yodel(){
y_logo.blur();
var con = document.createElement("span");
con.style.visibility = "hidden";
con.innerHTML = yodel_str;
document.body.appendChild(con);
};
那么来看load_yodel()函数都做了什么

代码就不一句句翻译了,也就这么几行...

功能就是创建一个名字为con的span,span的内容就是那个flash声音文件了..

只要修改一下flash的地址,还有yodel_map这个变量,你自己也就能弄一个Logo的彩蛋出来鸟..

演示可以看yahoo.com.cn点logo的那个感叹号,记着带好耳机..
-->

当前位置：首页 >> IT技术 >> JS特效 >> Yahoo的Logo彩蛋