原文地址:http://frankmanno.com/ideas/css-imagemap-redux/
1.先說說圖像地圖是什么?
就是在一張圖片上標(biāo)記出有url的地方,當(dāng)鼠標(biāo)滑過的時(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),效果肯定是通過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)部元素相對定位,不然怎樣給map定位位置?
2.)下來是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%; }/*定義絕對定位*/
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.)下來是重點(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');
作者是使用他來實(shí)現(xiàn)的,國內(nèi)css研究者們已經(jīng)翻譯了這個(gè)技術(shù)
而我使用:filter:alpha(opacity=80);便解決了,都是CSS的filter,這個(gè)再研究,我也不太明白!
出處:藍(lán)色理想
責(zé)任編輯:moby
◎進(jìn)入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論
|