圖像熱區(qū)的小把戲彩蛋
更新時(shí)間：2008年03月22日 13:27:22 作者：
很少有人知道，其實(shí) Yahoo 中國和淘寶網(wǎng)的首頁有一個(gè)彩蛋。想親身體驗(yàn)一把的話，你可以打開上述網(wǎng)站，全部載入完畢以后點(diǎn)擊雅虎中國 Logo 的驚嘆號(hào)或者是淘寶網(wǎng) Logo 上面的“淘”字或者“寶”字上面的點(diǎn)，然后你發(fā)現(xiàn)了什么呢？
或許你很驚奇他們是怎么做到的，這就是圖像熱區(qū)（Map）的一個(gè)應(yīng)用。下面引用一段 Map 的解釋：
所謂圖像熱區(qū)，就是帶有預(yù)先定義區(qū)域的圖像，這些區(qū)域包含了指向其它文檔或錨的鏈接。
例如，你可以在一副太陽系的圖像上創(chuàng)建用戶點(diǎn)擊后可瀏覽不同星球的鏈接。具體的詳細(xì)情況可以參考這里和這里。比如說上述的菜單就是將一個(gè) map 定義到了首頁的 Logo 上，然后效果就是點(diǎn)擊這張圖片的一部分就執(zhí)行相應(yīng)操作（Javascript 控制）。比如：
<area shape="rect" coords="0,0,82,126" href="sun.html" alt="Sun" />就可以在熱區(qū)所定義的位置 "0,0,82,126" 打開 sun.html 的鏈接。那么 Javascript 如何控制其行為呢，其實(shí)你完全可以將 area 元素當(dāng)作 a 元素來看待，它也有 onclick 等方法。
至于是如何播放聲音的，我看了下代碼，是一個(gè)簡(jiǎn)單的 Flash 在“作怪”。之所以做成 Flash 有兩個(gè)原因，一是容量比較小，二就是兼容大部分的瀏覽器（只要裝了 Flash 的插件就可以）。
忘記那那該死的 embed 吧，它只支持 Internet Explorer，而且不是 Web 標(biāo)準(zhǔn)的一部分。Alistapart 上面有一篇文章，名叫 Bye Bye Embed，非常的精彩，建議如需要在網(wǎng)頁中插入其他元素的可以參考一下。
好了，說了那么多，朋友你能看出來本網(wǎng)站的 Logo 有什么特殊的地方嗎（使用 Internet Explorer 的朋友就不要嘗試了）？
所謂圖像熱區(qū)，就是帶有預(yù)先定義區(qū)域的圖像，這些區(qū)域包含了指向其它文檔或錨的鏈接。
例如，你可以在一副太陽系的圖像上創(chuàng)建用戶點(diǎn)擊后可瀏覽不同星球的鏈接。具體的詳細(xì)情況可以參考這里和這里。比如說上述的菜單就是將一個(gè) map 定義到了首頁的 Logo 上，然后效果就是點(diǎn)擊這張圖片的一部分就執(zhí)行相應(yīng)操作（Javascript 控制）。比如：
<area shape="rect" coords="0,0,82,126" href="sun.html" alt="Sun" />就可以在熱區(qū)所定義的位置 "0,0,82,126" 打開 sun.html 的鏈接。那么 Javascript 如何控制其行為呢，其實(shí)你完全可以將 area 元素當(dāng)作 a 元素來看待，它也有 onclick 等方法。
至于是如何播放聲音的，我看了下代碼，是一個(gè)簡(jiǎn)單的 Flash 在“作怪”。之所以做成 Flash 有兩個(gè)原因，一是容量比較小，二就是兼容大部分的瀏覽器（只要裝了 Flash 的插件就可以）。
忘記那那該死的 embed 吧，它只支持 Internet Explorer，而且不是 Web 標(biāo)準(zhǔn)的一部分。Alistapart 上面有一篇文章，名叫 Bye Bye Embed，非常的精彩，建議如需要在網(wǎng)頁中插入其他元素的可以參考一下。
好了，說了那么多，朋友你能看出來本網(wǎng)站的 Logo 有什么特殊的地方嗎（使用 Internet Explorer 的朋友就不要嘗試了）？
相關(guān)文章
是不是所有的商業(yè)網(wǎng)站都可以一推百靈?似乎不是。在推廣你的商業(yè)網(wǎng)站之前，你要先檢查網(wǎng)站的“裝備”是否合乎如下要求：網(wǎng)站信息內(nèi)容足夠豐富、準(zhǔn)確、及時(shí)(絕對(duì)不是公司簡(jiǎn)介的電子版);網(wǎng)站設(shè)計(jì)具有專業(yè)水準(zhǔn)(絕對(duì)不是初學(xué)者的涂鴉之作);你已經(jīng)明確網(wǎng)站目標(biāo)市場(chǎng)(如果你的目標(biāo)市場(chǎng)定位在8000萬網(wǎng)民，恐怕我們幫不了你)。然后，你就可以參考下面的技巧來推廣你的網(wǎng)站啦。2008-04-04
Install ESX Server 3.5/3i onto ESX Server安裝方法
已經(jīng)有許多文章介紹如何在VMware Workstation上安裝ESX Server，而在一臺(tái)ESX Server上安裝ESX Server其實(shí)也是大同小異。這里就把安裝時(shí)的關(guān)鍵步驟記錄一下。2008-05-05
在IE6-的標(biāo)準(zhǔn)模式下和quirk模式下實(shí)現(xiàn)min-width
首先我們知道這個(gè)效果應(yīng)該是一個(gè)老話題了。 今天整理文件的時(shí)候，發(fā)現(xiàn)自己以前的一些布局的解決方法躺在文件夾里很長(zhǎng)時(shí)間了，翻翻老底吧 需要說明的是有幸也見到過CSSPLAY的老工程師站長(zhǎng)對(duì)這個(gè)效果的實(shí)現(xiàn)，而且肯定是很早就給出來了。2008-06-06![[資料]總結(jié)幾個(gè)產(chǎn)生上萬流量的方法](http://img.jbzj.com/images/xgimg/bcimg3.png)
[資料]總結(jié)幾個(gè)產(chǎn)生上萬流量的方法
[資料]總結(jié)幾個(gè)產(chǎn)生上萬流量的方法...2007-05-05
本篇文章主要介紹了新手必看的做站月賺一萬再次交流，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2007-11-11
內(nèi)容管理系統(tǒng)(CMS)的設(shè)計(jì)和選型
內(nèi)容管理系統(tǒng)(CMS)的設(shè)計(jì)和選型...2006-08-08
AWStats簡(jiǎn)介：Apache/IIS的日志分析工具
AWStats是在Sourceforge上發(fā)展很快的一個(gè)基于Perl的WEB日志分析工具。相對(duì)于另外一個(gè)非常優(yōu)秀的開放源代碼的日志分析工具Webalizer，AWStats的優(yōu)勢(shì)在于2008-04-04
搜索引擎優(yōu)化《SEO教程2007版》下載...2007-03-03
大家要經(jīng)常更新內(nèi)容啊-針對(duì)百度的原創(chuàng)收錄速度測(cè)試
大家要經(jīng)常更新內(nèi)容啊-針對(duì)百度的原創(chuàng)收錄速度測(cè)試...2007-11-11
這篇文章主要介紹了再談反向鏈接，又學(xué)了東西2007-08-08