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

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

首先我們看看效果：

實(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)簽通過(guò)<map>的名字來(lái)驅(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>

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

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

<area>是用來(lái)劃分區(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ù)畫(huà)出了下圖中殲20的邊框線(xiàn)（600像素*400像素，如果圖像的長(zhǎng)寬像素?cái)?shù)變了，參數(shù)就不正確了），如圖：

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

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

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

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

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

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

完成安裝之后打開(kāi)，界面如下：

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

選擇要打開(kāi)的圖片名字：

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

打開(kāi)后如圖：

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

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

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

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

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

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

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

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

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

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

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

這通常是個(gè)很糟糕的書(shū)寫(xiě)方式，它只能改變當(dāng)前標(biāo)簽的樣式，如果想要多個(gè) <div> 擁有相同的樣式，你不得不重復(fù)地為每個(gè) <div> 添加相同的樣式，如果想要修改一種樣式，又不得不修改所有的 style 中的代碼。很顯然，內(nèi)聯(lián)方式引入 CSS 代碼會(huì)導(dǎo)致 HTML 代碼變得冗長(zhǎng)，且使得網(wǎng)頁(yè)難以維護(hù)。

嵌入方式

嵌入方式指的是在 HTML 頭部中的 <style> 標(biāo)簽下書(shū)寫(xiě) CSS 代碼。

示例：

<head>
 <style>
 .content {
 background: red;
 }
 </style>
</head>

嵌入方式的 CSS 只對(duì)當(dāng)前的網(wǎng)頁(yè)有效。因?yàn)?CSS 代碼是在 HTML 文件中，所以會(huì)使得代碼比較集中，當(dāng)我們寫(xiě)模板網(wǎng)頁(yè)時(shí)這通常比較有利。因?yàn)椴榭茨０宕a的人可以一目了然地查看 HTML 結(jié)構(gòu)和 CSS 樣式。因?yàn)榍度氲?CSS 只對(duì)當(dāng)前頁(yè)面有效，所以當(dāng)多個(gè)頁(yè)面需要引入相同的 CSS 代碼時(shí)，這樣寫(xiě)會(huì)導(dǎo)致代碼冗余，也不利于維護(hù)。

鏈接方式

鏈接方式指的是使用 HTML 頭部的 <head> 標(biāo)簽引入外部的 CSS 文件。

示例：

<head>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>

這是最常見(jiàn)的也是最推薦的引入 CSS 的方式。使用這種方式，所有的 CSS 代碼只存在于單獨(dú)的 CSS 文件中，所以具有良好的可維護(hù)性。并且所有的 CSS 代碼只存在于 CSS 文件中，CSS 文件會(huì)在第一次加載時(shí)引入，以后切換頁(yè)面時(shí)只需加載 HTML 文件即可。

導(dǎo)入方式

導(dǎo)入方式指的是使用 CSS 規(guī)則引入外部 CSS 文件。

示例：

<style>
 @import url(style.css);
</style>

比較鏈接方式和導(dǎo)入方式

鏈接方式（下面用 link 代替）和導(dǎo)入方式（下面用 @import 代替）都是引入外部的 CSS 文件的方式，下面我們來(lái)比較這兩種方式，并且說(shuō)明為什么不推薦使用 @import。

link 屬于 HTML，通過(guò) <link> 標(biāo)簽中的 href 屬性來(lái)引入外部文件，而 @import 屬于 CSS，所以導(dǎo)入語(yǔ)句應(yīng)寫(xiě)在 CSS 中，要注意的是導(dǎo)入語(yǔ)句應(yīng)寫(xiě)在樣式表的開(kāi)頭，否則無(wú)法正確導(dǎo)入外部文件；
@import 是 CSS2.1 才出現(xiàn)的概念，所以如果瀏覽器版本較低，無(wú)法正確導(dǎo)入外部樣式文件；
當(dāng) HTML 文件被加載時(shí)，link 引用的文件會(huì)同時(shí)被加載，而 @import 引用的文件則會(huì)等頁(yè)面全部下載完畢再被加載；

小結(jié)：我們應(yīng)盡量使用 <link> 標(biāo)簽導(dǎo)入外部 CSS 文件，避免或者少用使用其他三種方式。

iscuz X3.4

Discuz默認(rèn)版塊規(guī)則里是不支持html編輯的，我們把discuz版塊規(guī)則修改位允許使用 html代碼，方便站長(zhǎng)加入內(nèi)嵌或者廣告，修改前，務(wù)必做好單個(gè)文件的備份！這里511遇見(jiàn)網(wǎng)站給出詳細(xì)實(shí)用的步驟：

推薦最安全的方法：

在發(fā)帖編輯器里，選擇高級(jí)模式，

必須選擇文本模型

這時(shí)候，可以任意添加模式編輯，之后復(fù)制到，論壇--本版塊規(guī)則里面，就完全支持html.

修改source/admincp/admincp_forums.php

查找：

showsetting('forums_edit_basic_description', 'descriptionnew', htmlspecialchars_decode(html2bbcode($forum['description'])), 'textarea');

替換：

showsetting('forums_edit_basic_description', 'descriptionnew', str_replace('&', '&', $forum['description']), 'textarea');

查找：

showsetting('forums_edit_basic_rules', 'rulesnew', htmlspecialchars_decode(html2bbcode($forum['rules'])), 'textarea');

替換：

showsetting('forums_edit_basic_rules', 'rulesnew', str_replace('&', '&', $forum['rules']), 'textarea');

查找（這里有兩個(gè)地方都要改）

$descriptionnew = preg_replace('/on(mousewheel|mouseover|click|load|onload|submit|focus|blur)="[^"]*"/i', '', discuzcode($_GET['descriptionnew'], 1, 0, 0, 0, 1, 1, 0, 0, 1));

替換：

$descriptionnew = addslashes(dstripslashes($_GET['descriptionnew']));

查找：

$rulesnew = preg_replace('/on(mousewheel|mouseover|click|load|onload|submit|focus|blur)="[^"]*"/i', '', discuzcode($_GET['rulesnew'], 1, 0, 0, 0, 1, 1, 0, 0, 1));

替換：

$rulesnew = addslashes(dstripslashes($_GET['rulesnew']));

上傳覆蓋

后臺(tái)-工具-刷新緩存
界面-風(fēng)格-更新CSS

在線(xiàn)咨詢(xún)

上一篇：打造絲般順滑的 H5 翻頁(yè)庫(kù)
下一篇：黑客入侵YouTube廣告劫持用戶(hù)CPU挖礦

您的項(xiàng)目需求

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

整合營(yíng)銷(xiāo)服務(wù)商

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

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

目錄

您的項(xiàng)目需求