圖像的超鏈接和圖像熱區鏈接

  • 2020-12-22 10:10:28
  • 閱讀次數:次
  • 作者:盈嵐科技小編
  • 來(lái)源:http://amzcoolest.com

圖像的超鏈接

圖像的鏈接和文字的鏈接方法是一樣的,都是用<a>標簽來(lái)完成,只要將<img>標簽放在<a>和</a>之間就可以了。

語(yǔ)法:<a href="鏈接地址"><img src="圖像文件的地址"></a>

說(shuō)明:在該語(yǔ)法中,href參數用來(lái)設置圖像的鏈接地址。

微信截圖_20201222101252.png

在代碼中加粗部分的標記是為圖像添加空鏈接,在瀏覽器中預覽,當鼠標指針?lè )胖迷阪溄拥膱D像上時(shí),鼠標指針會(huì )發(fā)生相應的變化。

提示由于使用<a>標記,圖像鏈接和文字鏈接相同。創(chuàng )建E-mail鏈接需要將mailto://添加到E-mail地址的前面。鏈接到一個(gè)HTTP站點(diǎn),需要在網(wǎng)址前使用http://協(xié)議。

圖像熱區鏈接

在HTML中可以把圖片劃分成多個(gè)熱點(diǎn)區域,每一個(gè)熱點(diǎn)區域鏈接到不同的網(wǎng)頁(yè)。這種效果的實(shí)質(zhì)是把一幅圖片劃分為不同的熱點(diǎn)區域,再讓不同的區域進(jìn)行超鏈接,這就是映射地圖。

語(yǔ)法:首先需要在圖像文件中設置映射圖像名,在圖像的屬性中使用<usemap>標記添加圖像要引用的映射圖像的名稱(chēng)如下:

< img src="圖像地址" usemap ="映射圖像名稱(chēng)">

然后需要定義熱區圖像以及熱區的鏈接屬性如下:

<map name="映射圖像名稱(chēng)">

<area shape="熱區形狀" coords="熱區坐標" href="鏈接地址">

</map>

說(shuō)明:在該語(yǔ)法中要先定義映射圖像的名稱(chēng),然后再引用這個(gè)映射圖像。在<area>標記中定義了熱區的位置和鏈接,其中shape參數用來(lái)定義熱區形狀,coords參數則用來(lái)設置區域坐標,對于不同形狀來(lái)說(shuō),coords設置的方式也不同。

舉例:選擇菜單中的【文件】|【打開(kāi)】命令,打開(kāi)繪制圖像熱區鏈接的網(wǎng)頁(yè)文檔。

在網(wǎng)頁(yè)中選擇繪制圖像熱區的圖像,在【屬性】面板中單擊【矩形熱點(diǎn)】工具,按住鼠標左鍵不放,拖動(dòng)鼠標在繪制熱區的圖像上繪制一熱點(diǎn)矩形。

選中矩形熱點(diǎn),在【屬性】面板中的【鏈接】文本框中輸入鏈接的目標地址。

選中圖像,在【屬性】面板中單擊【橢圓形熱點(diǎn)】工具,按住鼠標左鍵不放,拖動(dòng)鼠標在繪制熱區的圖像上繪制一橢圓形熱區。

選中橢圓形熱點(diǎn),在【屬性】面板中的【鏈接】文本框中輸入鏈接的目標地址。

按照步驟4~5的方法,在圖像上其他的位置繪制一個(gè)多邊形熱區,在【屬性】面板中的【鏈接】文本框中輸入鏈接的目標地址。

保存文檔,在瀏覽器中預覽效果。

22f7421c95401dd132b8f9afb0f32e08 (1).jpg

微信截圖_20201222111118.png

微信截圖_20201222111353.png

在代碼中加粗部分的標記為設置熱區的關(guān)鍵代碼,在這段代碼中設置了3種不同形狀的熱區,并對其設置了熱區鏈接。在網(wǎng)頁(yè)中,根據繪制熱區鏈接圖像形狀的不同,可選擇不同形狀的熱區工具繪制。使用熱區可以將網(wǎng)頁(yè)的不同部分鏈接到不同的網(wǎng)頁(yè)。



當前文章標題:圖像的超鏈接和圖像熱區鏈接

當前URL:http://amzcoolest.com/news/wzzz/3327.html

上一篇:圖像的水平間距hspace和圖像的排列align

下一篇:認識列表標記

網(wǎng)站建設、抖音推廣、頭條推廣、微信朋友圈推廣、快手推廣專(zhuān)線(xiàn):15368242187(微信同號)
亚洲精品无码mv在线|新国产精品视频福利免费|日韩高清在线观看不卡一区二区|一本久久a久久精品免费不|亚洲私人无码内射免费观看