HTML中的圖片區(qū)域鏈接方法詳解-零基礎(chǔ)自學(xué)網(wǎng)頁制作

圖片添加區(qū)域鏈接的基本寫法

首先我們看看效果：

實(shí)現(xiàn)這樣的功能需要學(xué)習(xí)以下幾點(diǎn)內(nèi)容。

1.認(rèn)識(shí)<img/><map><area/></map>基本結(jié)構(gòu)

首先復(fù)制一個(gè)html框架，命名為“圖片區(qū)域鏈接.html”,示例代碼如下：

<!DOCTYPE HTML> 
  <html>  
  <head>   
  <title>圖片區(qū)域鏈接</title>  
  <meta charset="utf-8">  
  </head>   
  <body>  

  </body>   
  </html>

向<body></body>中添加<img><map><area/></map>基本結(jié)構(gòu)，示例代碼如下：

 <body>  
 <img/>
   <map>
   <area/>
   </map>
 </body>

指定要添加區(qū)域鏈接的圖片的路徑，如下：

 <img src="img/image1.jpg"/>
   <map>
   <area/>
   </map>

讓<img>標(biāo)簽通過<map>的名字來驅(qū)使<map>為自己工作。

需要兩步，第一，給<map>起名字，name=“map”，為了兼容所有的瀏覽器，還要加上id=“map”（有的瀏覽器只認(rèn)id）。

第二，讓<img>叫出<map>的名字或id，usemap="#map"。大家要注意，叫名字時(shí)要加#。這個(gè)在之前的教程中也經(jīng)常出現(xiàn)。

示例代碼如下：

 <img src="img/image1.jpg" usemap="#map"/>
   <map name="map" id="map">
   <area/>
   </map>

下面來劃分區(qū)域。

2.為圖片劃分區(qū)域的方法

<area>是用來劃分區(qū)域的標(biāo)簽，area也是“”區(qū)域“”的意思。

默認(rèn)的shape（形狀）屬性有“矩形（rect）”、“圓形（circ）”、“多邊形（poly）”三個(gè)值。

分別添加三個(gè)形狀，示例代碼如下：

 <img src="img/image1.jpg" usemap="#map"/>
   <map name="map" id="map">
   <area shape="rect"/>
   <area shape="circ"/>
   <area shape="poly"/>
   </map>

下面我們就要為區(qū)域規(guī)定參數(shù)，也就是在圖像上的位置和范圍大小。

為<area>添加coords屬性可以指定區(qū)域的位置和范圍。

如果shape="rect" 則coords由四個(gè)參數(shù)組成。例如coords="0,0,50,50"。從左到右，兩兩一組，組成兩個(gè)平面坐標(biāo)，即（0,0）和（50，50），單位是“像素”，矩形區(qū)域如下：

如果shape=“circ”，coords=“50,50,10”。（50,50）定義了圓心，10是半徑。如圖：

如果shape=“poly”，coords的參數(shù)不少于3對(duì)！注意是“對(duì)”！從左到右，兩個(gè)數(shù)就是一組坐標(biāo)，三組坐標(biāo)可以確定一個(gè)三角形，多組坐標(biāo)可以確定多邊形。例如

這組參數(shù)畫出了下圖中殲20的邊框線（600像素*400像素，如果圖像的長寬像素?cái)?shù)變了，參數(shù)就不正確了），如圖：

這時(shí)，大家會(huì)有一個(gè)問題：如何才能知道圖像中某個(gè)像素點(diǎn)的坐標(biāo)呢？

3.使用Gimp軟件精準(zhǔn)定位圖片區(qū)域

使用Gimp軟件可以解決這個(gè)問題。

Gimp是一款類似于Photoshop的數(shù)字圖像處理軟件，不同的是，Gimp是開源免費(fèi)的。

下載地址：https://www.gimp.org/

雙擊安裝即可，注意選擇一下安裝目錄。

完成安裝之后打開，界面如下：

點(diǎn)擊“文件”找到“打開”：

選擇要打開的圖片名字：

點(diǎn)擊名稱后，右邊會(huì)有圖像預(yù)覽，點(diǎn)擊“打開”即可：

打開后如圖：

把鼠標(biāo)放到圖像的任意位置，看左下角：

這里就會(huì)顯示我們鼠標(biāo)所在的像素坐標(biāo)數(shù)值。

這樣我們就能方便地寫“poly”的coords了。

請(qǐng)?jiān)诳臻e時(shí)找一張圖片演練一下吧！

4.為區(qū)域添加鏈接

在<area/>標(biāo)簽中添加href屬性即可指定鏈接路徑，如下：

href="https://www.zhihu.com/question/284642168"

添加title屬性可以在鼠標(biāo)滑過鏈接區(qū)域時(shí)提示讀者，如下：

title="殲20氣動(dòng)外形分析"

今天的內(nèi)容結(jié)束了，圖像區(qū)域鏈接在使用時(shí)還有一些注意事項(xiàng)，我們下次再詳細(xì)討論。

使用碎片時(shí)間，學(xué)習(xí)完整知識(shí)！關(guān)注大魚師兄，一起精研技藝。

這樣一個(gè)需求，就是在一個(gè)DIV中包含有一個(gè)Image標(biāo)簽，但是在Div標(biāo)簽中包含有一張背景圖片，設(shè)計(jì)圖上的樣子是這張背景圖片是有一個(gè)透明度的，但是如果直接使用opacity屬性設(shè)置的的話就會(huì)連Div中的內(nèi)容的透明度也會(huì)受到影響，那么我們?nèi)绾卧贖TML中設(shè)置div背景圖片的透明度呢？，可以通過以下幾種方法實(shí)現(xiàn)。

方法一：使用偽元素

這是在日常開發(fā)中被推薦使用的方法，通過這種方式實(shí)現(xiàn)不會(huì)影響到div中的其他內(nèi)容的透明度只會(huì)影響它自己背景的透明度，詳細(xì)實(shí)現(xiàn)如下。

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            position: relative;
            width: 300px;
            height: 200px;
            overflow: hidden;
        }

        .container::before {
            content: "";
            background-image: url('your-image.jpg');
            background-size: cover;
            background-position: center;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0.5; /* 調(diào)整透明度 */
            z-index: 1;
        }

        .content {
            position: relative;
            z-index: 2;
            color: white;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content">
            這里是內(nèi)容
        </div>
    </div>
</body>
</html>

方法二：使用RGBA顏色疊加

這種方式比較適合那種需要給背景圖片上添加蒙版的情況，但是筆者嘗試的時(shí)候，結(jié)果實(shí)在是不盡人意。所以還是選擇了上面的推薦方法，不過這種方式要比上面的那種方式實(shí)現(xiàn)起來要簡單很多。如下所示。

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            width: 300px;
            height: 200px;
            background: rgba(255, 255, 255, 0.5) url('your-image.jpg') no-repeat center center;
            background-size: cover;
        }
    </style>
</head>
<body>
    <div class="container">
        這里是內(nèi)容
    </div>
</body>
</html>

方法三：使用CSS濾鏡

這種方式實(shí)現(xiàn)會(huì)影響到整個(gè)的div的樣式，也就是說頁面中的內(nèi)容的透明度也會(huì)受到影響，并且這種影響不會(huì)被其他樣式所改變。如下所示。

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            width: 300px;
            height: 200px;
            background: url('your-image.jpg') no-repeat center center;
            background-size: cover;
            filter: opacity(0.5); /* 調(diào)整透明度 */
        }
    </style>
</head>
<body>
    <div class="container">
        這里是內(nèi)容
    </div>
</body>
</html>

以上就是實(shí)現(xiàn)如何調(diào)整div的背景透明度，在一些特殊場(chǎng)景中我們還可以通過JS的方式來實(shí)現(xiàn)。上面的方法中，推薦使用的是偽元素方法，因?yàn)樗谛薷牧薲iv背景透明度之后，并不會(huì)影響到其他的元素，RGBA色彩添加則是局限于一些色彩華麗的地方使用，而對(duì)于一些單色調(diào)的內(nèi)容來講這種方式實(shí)現(xiàn)效果不是太好。通過CSS過濾樣式，雖然是最直接的方式，但是如果在div內(nèi)部有內(nèi)容的情況下會(huì)影響到整個(gè)組件體系的樣式。

在實(shí)際開發(fā)中，我們可以選擇合適的方式來實(shí)現(xiàn)這個(gè)需求。當(dāng)然還有其他的實(shí)現(xiàn)方式，有興趣的讀者可以留言我們一起討論。

在線咨詢

上一篇：HTML基礎(chǔ)總結(jié)
下一篇：好程序員web前端培訓(xùn)分享HTML元素強(qiáng)制不換行

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。