前几天偶大姐也给偶说起过Yahoo和淘宝的Logo彩蛋
刚没事分离了下Yahoo的
复制内容到剪贴板
代码:
<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(""+yodel_map+"");这段的意思是在页面显示一个隐藏的span,span的内容其实是:
复制内容到剪贴板
代码:
<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.的内容
复制内容到剪贴板
代码:
onclick="load_yodel();return false;这句的意思就明显了,点击的时候就会调用
load_yodel()这个函数
复制内容到剪贴板
代码:
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首页点yahoo的Logo里边那个感叹号..不过记着要带耳机..
