中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

您的位置: 首頁 > 技術(shù)文檔 > 網(wǎng)頁制作 > CSS Image Maps—圖像地圖
CSS 3 選擇器解釋 回到列表 iframe 的用法與注意事項(xiàng)
 CSS Image Maps—圖像地圖

作者:greengnn 時(shí)間: 2006-05-14 文檔類型:翻譯 來自:藍(lán)色理想

原文地址: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)站綜合版塊參加討論

相關(guān)文章 更多相關(guān)鏈接
CSS 3 選擇器解釋
優(yōu)秀的CSS編輯器
一款DIV+CSS導(dǎo)航條效果
background-position另類用法
用css制作表單并體驗(yàn)親和力
作者文章
用css制作表單并體驗(yàn)親和力
div+css布局漫談
像table一樣布局div
具有親和力的表格
用css制作撲克牌
關(guān)鍵字搜索 常規(guī)搜索 推薦文檔
熱門搜索:CSS Fireworks 設(shè)計(jì)比賽 網(wǎng)頁制作 web標(biāo)準(zhǔn) 用戶體驗(yàn) UE photoshop Dreamweaver Studio8 Flash 手繪 CG
站點(diǎn)最新 站點(diǎn)最新列表
周大!熬•自然”設(shè)計(jì)大賽開啟
國際體驗(yàn)設(shè)計(jì)大會7月將在京舉行
中國國防科技信息中心標(biāo)志征集
云計(jì)算如何讓安全問題可控
云計(jì)算是多數(shù)企業(yè)唯一擁抱互聯(lián)網(wǎng)的機(jī)會
阿里行云
云手機(jī)年終巨獻(xiàn),送禮標(biāo)配299起
阿里巴巴CTO王堅(jiān)的"云和互聯(lián)網(wǎng)觀"
1499元買真八核 云OS雙蛋大促
首屆COCO桌面手機(jī)主題設(shè)計(jì)大賽
欄目最新 欄目最新列表
淺談JavaScript編程語言的編碼規(guī)范
如何在illustrator中繪制臺歷
Ps簡單繪制一個(gè)可愛的鉛筆圖標(biāo)
數(shù)據(jù)同步算法研究
用ps作簡單的作品展示頁面
CSS定位機(jī)制之一:普通流
25個(gè)最佳最閃亮的Eclipse開發(fā)項(xiàng)目
Illustrator中制作針線縫制文字效果
Photoshop制作印刷凹凸字體
VS2010中創(chuàng)建自定義SQL Rule

藍(lán)色理想版權(quán)申明:除部分特別聲明不要轉(zhuǎn)載,或者授權(quán)我站獨(dú)家播發(fā)的文章外,大家可以自由轉(zhuǎn)載我站點(diǎn)的原創(chuàng)文章,但原作者和來自我站的鏈接必須保留(非我站原創(chuàng)的,按照原來自一節(jié),自行鏈接)。文章版權(quán)歸我站和作者共有。

轉(zhuǎn)載要求:轉(zhuǎn)載之圖片、文件,鏈接請不要盜鏈到本站,且不準(zhǔn)打上各自站點(diǎn)的水印,亦不能抹去我站點(diǎn)水印。

特別注意:本站所提供的攝影照片,插畫,設(shè)計(jì)作品,如需使用,請與原作者聯(lián)系,版權(quán)歸原作者所有,文章若有侵犯作者版權(quán),請與我們聯(lián)系,我們將立即刪除修改。

您的評論
用戶名:  口令:
說明:輸入正確的用戶名和密碼才能參與評論。如果您不是本站會員,你可以注冊 為本站會員。
注意:文章中的鏈接、內(nèi)容等需要修改的錯(cuò)誤,請用報(bào)告錯(cuò)誤,以利文檔及時(shí)修改。
不評分 1 2 3 4 5
注意:請不要在評論中含與內(nèi)容無關(guān)的廣告鏈接,違者封ID
請您注意:
·不良評論請用報(bào)告管理員,以利管理員及時(shí)刪除。
·尊重網(wǎng)上道德,遵守中華人民共和國的各項(xiàng)有關(guān)法律法規(guī)
·承擔(dān)一切因您的行為而直接或間接導(dǎo)致的民事或刑事法律責(zé)任
·本站評論管理人員有權(quán)保留或刪除其管轄評論中的任意內(nèi)容
·您在本站發(fā)表的作品,本站有權(quán)在網(wǎng)站內(nèi)轉(zhuǎn)載或引用
·參與本評論即表明您已經(jīng)閱讀并接受上述條款
推薦文檔 | 打印文檔 | 評論文檔 | 報(bào)告錯(cuò)誤  
專業(yè)書推薦 更多內(nèi)容
網(wǎng)站可用性測試及優(yōu)化指南
《寫給大家看的色彩書1》
《跟我去香港》
眾妙之門—網(wǎng)站UI 設(shè)計(jì)之道
《Flex 4.0 RIA開發(fā)寶典》
《贏在設(shè)計(jì)》
犀利開發(fā)—jQuery內(nèi)核詳解與實(shí)踐
作品集 更多內(nèi)容

雜⑦雜⑧ Gold NORMANA V2