CSS Image Maps—映像地圖

css

原文地址：http://frankmanno.com/ideas/css-imagemap-redux/

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(http://www.webjx.com/htmldata/2006-05-14/hover.png) repeat;}

這樣就避免了，製作office.jpg那樣麻煩的圖片了，只要給a標籤 加上背景圖片就能區別出map的位置，但是只有firefox支援怎麼行，我們
熟悉的IE怎麼辦?

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.webjx.com/htmldata/2006-05-14/hover.png',sizingMethod='scale');

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

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