圖像映射使我們可以將圖像的一些區域指定爲熱點。下面我們來看看圖像映射的xhtml和css代碼:
xhtml:
<div id="pic">
<img src="img.jpg" width="600" height="450" alt="img" />
<ul>
<li class="avirl"><a href="#" title="avirl"><span class="outer"><span class="inner"><span class="note">Avirl</span></span></span></a></li>
<li class="guitar"><a href="#" title="guitar"><span class="outer"><span class="inner"><span class="note">Guitar</span></span></span></a></li>
<li class="mike"><a href="#" title="mike"><span class="outer"><span class="inner"><span class="note">Mike</span></span></span></a></li>
</ul>
</div>
css:
#pic{
width:600px;
height:450px;
position:relative;/*對它包含的連接可以相對div進行絕對定位*/
}
#pic ul{
margin:0;
padding:0;
list-style:none;
}
#pic a{
position:absolute;
width:100px;
height:120px;
color:#000;
text-decoration:none;
border:1px solid transparent;/*設置透明邊框,避免鼠標停留時的移動*/
}
#pic .avirl a{
top:15px;
left:95px;
}
#pic .guitar a{
top:115px;
left:280px;
}
#pic .mike a{
top:250px;
left:425px;
}
#pic a:hover{
border:#d4d82d;
}
#pic a .outer{
display:block;
width:98px;
height:118px;
border:1px solid #000;
}
#pic a .inner{
display:block;
width:96px;
height:116px;
border:1px solid #fff;
}
#pic a .note{
position:absolute;
bottom:-3em;
width:9em;
padding:0.2em 0.5em;
background-color:#ffc;
text-align:center;
left:-30000px;/*將文本隱藏到屏幕左邊之外*/
margin-left:-5em;/*設置提示框在熱點區域下水平居中*/
}
#pic a:hover .note{
left:50px;/*顯示文本內容*/
}
#pic:hover a .outer,#pic a:hover .outer{/*IE6只支持錨鏈接上的鼠標停留*/
border:1px solid #000;
}
#pic:hover a .inner,#pic a:hover .inner{
border:1px solid #fff;
}
OK啦~~~效果搞定了!
設置圖像映射設置圖象映射的過程用HTML代碼編寫的方式是一件很令人頭疼的事情,因爲你必須計算每個坐標的位置。但在FrontPage2000 Editor中就象撚死一只蒼蠅那樣容易(其實撚死蒼蠅可不是簡單的事情,你首先得設法抓住一只蒼蠅,...查看完整版>>
設置圖像映射
學習CSS的背景圖像屬性background CSS的背景屬性“background”提供了衆多屬性值,如顔色、圖像、定位等,爲網頁背景圖像的定義提供了極大的便利。看看background提供的屬性值: background : background-color | background-image | backgro...查看完整版>>
學習CSS的背景圖像屬性background
Dreamweaver8完美網頁設計--CSS網頁設計篇(附光盤)|報價¥31.20|圖書,計算機與互聯網,圖形圖像,綜合,施威銘研究室目錄:圖書,計算機與互聯網,圖形圖像,綜合,品牌:施威銘研究室基本信息·出版社:中國電力出版社·頁碼:236 頁碼·出版日:2006年·ISBN:7508346734·條碼:9787508346731·版次:1·裝幀:平裝·開本:16開 16開內...查看完整版>>
Dreamweaver8完美網頁設計--CSS網頁設計篇(附光盤)|報價¥31.20|圖書,計算機與互聯網,圖形圖像,綜合,施威銘研究室
CSS制作的“彈出式”圖像浏覽器特效<style type="text/css">.thumbnail{position: relative;z-index: 0;}.thumbnail:hover{background-color: transparent;z-index: 50;}.thumbnail span{ /*CSS for enlarged image*/position: absolute;backgro...查看完整版>>
CSS制作的“彈出式”圖像浏覽器特效
CSS Image Maps—圖像地圖原文地址:1.先說說圖像地圖是什麽?就是在一張圖片上標記出有url的地方,當鼠標滑過的時候,給以像<a href="url" title="description words">links</a>這樣的代碼顯示的效果。2.查看實例3.方法這是xhtm...查看完整版>>
CSS Image Maps—圖像地圖
CSS制作的“彈出式”圖像浏覽器特效<style type="text/css">.thumbnail{position: relative;z-index: 0;}.thumbnail:hover{background-color: transparent;z-index: 50;}.thumbnail span{ /*CSS for enlarged image*/position: absolute;backgro...查看完整版>>
CSS制作的“彈出式”圖像浏覽器特效
photoshop將岩石紋理映射在人臉上-Photoshop 15.選擇菜單欄的 選擇存儲選區選項,按如下所示存儲。 16.點擊確定後,按住ctrl+d鍵去掉邊,然後選擇複制圖層。 17.將岩石紋理圖打開拖到人物圖層. 18.在圖層面板上點選通道,將最下面的fa...查看完整版>>
photoshop將岩石紋理映射在人臉上-Photoshop
全面概括路由端口映射具體方法-應用技巧 很對用戶對于路由端口映射的具體方法還是很了解,這裏主要講解了路由端口映射方法的具體步驟,也分析了在使用路由器中需要注意的地方。在IE地址欄中輸入“192.168.10.200”並“回車”,在彈出的登錄對話框中輸入...查看完整版>>
全面概括路由端口映射具體方法-應用技巧
利用路由器NAT實現端口地址映射-應用技巧 假設現在企業內部有文件服務器、OA服務器、郵件服務器等等。而企業還希望這些服務器能夠被外部網絡的用戶訪問。如企業可能在異地有一個銷售辦事處,或者有些員工經常需要出差。爲了方便他們的工作,就需要允許這...查看完整版>>
利用路由器NAT實現端口地址映射-應用技巧