CSSImageMaps—圖像地圖

1.先說(shuō)說(shuō)圖像地圖是什么？

就是在一張圖片上標(biāo)記出有url的地方，當(dāng)鼠標(biāo)滑過(guò)的時(shí)候，給以像<a href="url" title="description words">links</a>這樣的代碼顯示的 效果。

2.查看實(shí)例

Example 1 Example 2

3.方法

這是xhtml:

<dl id="officeMap"> <dt id="monitor">1. Monitor</dt> <dd id="monitorDef"><a href="#"><span>Here's my 17" Monitor. I wish I had an LCD!</span></a></dd> </dl>

分析這段代碼是必要的，因?yàn)樗墙Y(jié)構(gòu)，效果肯定是通過(guò)a標(biāo)簽的:hover,以及:hover span的定義實(shí)現(xiàn)的，怎樣具體去實(shí)現(xiàn)效果呢?

1.)需要一張圖片，那就給#officeMap一個(gè)背景圖片office.jpg

dl#officeMap{ margin: 0; padding: 0; background: transparent url(office.jpg) top left no-repeat; height: 262px; width: 350px; position: relative; }

定義內(nèi)部元素相對(duì)定位，不然怎樣給map定位位置?

2.)下來(lái)是dt dd標(biāo)簽

dt{ margin: 0; padding: 0; position: absolute; font-size: 85%; display: none; }/*這個(gè)url的介紹，不用顯示*/ dd{ margin: 0; padding: 0; position: absolute; font-size: 85%; }/*定義絕對(duì)定位*/

3.)#monitorDef的定義,a:hover效果

dd#monitorDef{ top: 65px; left: 114px; }/*定義位置*/ dd#monitorDef a{ position: absolute; width: 73px; height: 69px; text-decoration: none; } dd#monitorDef a span{ display: none; } dd#monitorDef a:hover{ position: absolute; background: transparent url(office.jpg) -109px -317px no-repeat; top: -10px; left: -5px; }/*背景圖片滑動(dòng),參考滑動(dòng)門(mén)技術(shù)(原理相似)，span內(nèi)容的定位*/

4.)下來(lái)是重點(diǎn),span這個(gè)主要效果是怎么實(shí)現(xiàn)的?

dd#monitorDef a:hover span{ display: block; text-indent: 0; vertical-align: top; color: #000; background-color: #F4F4F4; font-weight: bold; position: absolute; border: 1px solid #BCBCBC; bottom: 100%; margin: 0; padding: 5px; width: 250%; }/*這里不需要解釋*/

5.原作者認(rèn)為，這個(gè)模型不是ideal（理想的），因?yàn)榭赡鼙尘皥D片太費(fèi)事，第二個(gè)模型是根據(jù)png圖片透明原理(FireFox下)

CSS改進(jìn)如下：

dd#monitorDef a{ position: absolute; width: 73px; height: 69px; text-decoration: none; background: transparent url(note.png) repeat;} dd#monitorDef a:hover{ position: absolute; background: transparent url(office.jpg) -109px -317px no-repeat; top: -10px; left: -5px; background: transparent url(hover.png) repeat;}

這樣就避免了，制作office.jpg那樣麻煩的圖片了，只要給a標(biāo)簽 加上背景圖片就能區(qū)別出map的位置，但是只有firefox支持怎么行，我們 熟悉的IE怎么辦?

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='hover.png',sizingMethod='scale');

作者是使用他來(lái)實(shí)現(xiàn)的，國(guó)內(nèi)css研究者們已經(jīng)翻譯了這個(gè)技術(shù)

而我使用：filter:alpha(opacity=80);便解決了，都是CSS的filter，這個(gè)再研究，我也不太明白！

本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

分享文章：CSSImageMaps—圖像地圖
當(dāng)前鏈接：http://www.bm7419.com/news48/313448.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營(yíng)銷、做網(wǎng)站、品牌網(wǎng)站制作、網(wǎng)站內(nèi)鏈、ChatGPT、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)