CSSImageMaps—圖像地圖

1.先說說圖像地圖是什么？

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

2.查看實例

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>

分析這段代碼是必要的，因為他是結(jié)構(gòu)，效果肯定是通過a標簽的:hover,以及:hover span的定義實現(xiàn)的，怎樣具體去實現(xiàn)效果呢?

1.)需要一張圖片，那就給#officeMap一個背景圖片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)部元素相對定位，不然怎樣給map定位位置?

2.)下來是dt dd標簽

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

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; }/*背景圖片滑動,參考滑動門技術(shù)(原理相似)，span內(nèi)容的定位*/

4.)下來是重點,span這個主要效果是怎么實現(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.原作者認為，這個模型不是ideal（理想的），因為可能背景圖片太費事，第二個模型是根據(jù)png圖片透明原理(FireFox下)

CSS改進如下：

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標簽 加上背景圖片就能區(qū)別出map的位置，但是只有firefox支持怎么行，我們 熟悉的IE怎么辦?

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

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

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

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

分享文章：CSSImageMaps—圖像地圖
當前鏈接：http://muchs.cn/news48/313448.html

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

廣告

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