Blog > 互联网产品设计 > 让你的logo唱起来

让你的logo唱起来

  今天看到一则消息才知道淘宝的logo也会“唱歌”了。“淘宝”两字上面分别的“圆点”,“淘”字的第一笔和“宝”字的最后一笔,点击试试。你会发现会有个男的在念:淘啊淘啊淘啊淘,淘宝网,淘我喜欢…… 去淘宝Yahoo感受一下。  

uploads/200708/15_140831_1.gif
其实咱自己的logo也可以“唱歌”的。先来试试:http://5key.net/demo/taobao

1、准备好logo和一段音乐,音乐可别太长,否则会让人觉得比较吵;这里咱借用了一下淘宝的logo和QQ中加好友的提醒声音;

2、在DW(Dreamweaver)中插入图片,选择设计模式,利用热点工具创建点击热区。记住先用圆形热区工具选中上面说到的两个“园点”,然后在用矩形选区勾选整个图片。因为很多站点上,logo本身是有链接的。在这里要提一下,之所以先创建“圆点”热区是因为在DW中,先创建的热区代码先生成,如果是先创建图片整体的热区,两个“圆点”则将无法点击。当然你也可以自己移动一下代码。

uploads/200708/15_142408_2.gif
3、回到代码模式,这个就是我们得到的代码

<img src=”logo.gif” mce_src=”logo.gif” border=”0″ usemap=”#Map” />
<map name=”Map” id=”Map”>
<area shape=”circle”  coords=”69,22,3″ onclick=”_start()” />
<area shape=”circle”  coords=”7,4,3″ onclick=”_start()” />
<area shape=”rect” coords=”0,0,241,32″ href=”http://taobao.com” mce_href=”http://taobao.com” />
</map>

4、在<body>后加上js。

<bgsound id=’bgsound’ loop=1>
<script language=”JavaScript”>
  function _start(){
  bgsound.src = ”system.wav”;
  }
</script>

  

9条评论

  1. banlon says:

    你说5、6两点足以让你抛弃它。。我看了好心寒。。

  2. dowhatyouwant says:

    哈哈。应该离正式版不会远鸟。。。

  3. 大牛 says:

    这才Preview了,没有必要评这么详细。
    说不定开始beta跟这个不太一样了。

  4. 都灵 says:

    呵呵,还好我喜欢用F4,做快捷建。

    看起来还是08版本还是漂亮蛮多啊。不知道内存是不是又太了很多。
    我的破电脑啊。。。

  5. 西贝 says:

    看来对5,6点看重的人还不少,我也一样,但是gui的风格我认为蛮漂亮了;
    就是我的F1呀 [redface]
    还有一点,msn的自定义文字替换表情,个人觉得比较舒服,相信也有很多人喜欢,不妨考虑一下!

  6. 稻草 says:

    登录时的那边状态不爽
    因为俺是长期潜水滴…

    期待浓浓的preview2.0 问世.

    @5key
    给俺弄个链接吧
    "
    稻草
    http://www.v4uu.com/blog
    "

    你的我加上了哟

  7. dowhatyouwant says:

    链接已加好。

  8. banlon says:

    好,你们耐心等待吧。

  9. 稻草 says:

    嘛时候嘛.给个盼头撒..呵呵 [cool]

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>