CSS Image Maps—映像地圖

來源:互聯網
上載者:User
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,這個再研究,我也不太明白!



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。