css圖像映射

圖像映射使我們可以將圖像的一些區域指定爲熱點。下面我們來看看圖像映射的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
photoshop將岩石紋理映射在人臉上-Photoshop
  15.選擇菜單欄的 選擇存儲選區選項,按如下所示存儲。    16.點擊確定後,按住ctrl+d鍵去掉邊,然後選擇複制圖層。    17.將岩石紋理圖打開拖到人物圖層.    18.在圖層面板上點選通道,將最下面的fa...查看完整版>>photoshop將岩石紋理映射在人臉上-Photoshop
 
全面概括路由端口映射具體方法-應用技巧
  很對用戶對于路由端口映射的具體方法還是很了解,這裏主要講解了路由端口映射方法的具體步驟,也分析了在使用路由器中需要注意的地方。在IE地址欄中輸入“192.168.10.200”並“回車”,在彈出的登錄對話框中輸入...查看完整版>>全面概括路由端口映射具體方法-應用技巧
 
利用路由器NAT實現端口地址映射-應用技巧
  假設現在企業內部有文件服務器、OA服務器、郵件服務器等等。而企業還希望這些服務器能夠被外部網絡的用戶訪問。如企業可能在異地有一個銷售辦事處,或者有些員工經常需要出差。爲了方便他們的工作,就需要允許這...查看完整版>>利用路由器NAT實現端口地址映射-應用技巧
 
 
回到王朝網路移動版首頁