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>

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

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; }

定義內部元素相對定位，不然怎樣給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; }/*背景圖片滑動,參考滑動門技術(原理相似)，span內容的定位*/

4.)下來是重點,span這個主要效果是怎么實現的?

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（理想的），因為可能背景圖片太費事，第二個模型是根據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標簽 加上背景圖片就能區別出map的位置，但是只有firefox支持怎么行，我們 熟悉的IE怎么辦?

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

作者是使用他來實現的，國內css研究者們已經翻譯了這個技術

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

本文來源于成都網站建設公司與成都網站設計制作公司-創新互聯成都公司！

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

成都網站建設公司_創新互聯，為您提供網站營銷、做網站、品牌網站制作、網站內鏈、ChatGPT、品牌網站建設

廣告

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