HTML-圖片熱點、網頁內嵌、網頁拼接、快速切圖


圖片熱點

    規划出圖片上的一個區域,可以做出超鏈接,直接點擊圖片區域就可以完成跳轉的效果。與圖片鏈接不同,熱點是圖片上的某一個區域或多個區域。

 

我們用魔獸世界圖片來做一個圖片熱點,點擊logo、區域和不同人物會連接到對應種族介紹:

 

在網頁中打開圖片,指向特定的區域將顯示連接提示,點擊后連接到指定網址

<body>
<table align="center">
<tr>
<td>
<img src="魔獸世界1.jpg" width="900" usemap="wow" />
<map name="wow" >
<area shape="rect" coords="277,18,608,108" href="https://www.wowchina.com/zh-cn/" />
<area shape="poly" coords="816,422,790,441,781,469,767,504,877,508,861,483,844,463,839,438,831,427" href="https://www.wowchina.com/zh-cn/game/races/gnome" target="_blank" title="魔獸世界-侏儒" />
<area shape="poly" coords="786,350,824,300,835,247,864,248,895,256,889,299,894,342,885,369,896,433,891,492,844,436,861,393,863,366,817,354" href="https://www.wowchina.com/zh-cn/game/races/night-elf" target="_blank" title="魔獸世界-暗夜精靈" />
<area shape="poly" coords="864,368,773,343,790,320,730,304,727,338,687,336,664,353,662,368,672,388,665,412,653,449,662,503,763,505,790,429,847,417" href="https://www.wowchina.com/zh-cn/game/races/dwarf" target="_blank" title="魔獸世界-矮人" />
<area shape="poly" coords="639,142,691,165,690,218,718,263,716,337,661,334,595,272,595,250,588,205,608,160" href="#https://www.wowchina.com/zh-cn/game/races/draenei" target="_blank" title="魔獸世界-德萊尼" />
<area shape="poly" coords="491,294,528,285,548,245,592,244,593,274,664,340,662,370,671,387,655,447,662,504,504,506,524,403,498,389,477,353" href="#https://www.wowchina.com/zh-cn/game/races/human" target="_blank" title="魔獸世界-人類" />
<area shape="circle" coords="240,345,235" href="https://www.wowchina.com/zh-cn/game/races" target="_blank" title="魔獸世界種族" />
</map>
</td></tr>
</table>
</body>

 一、先引用圖片並設置寬度<img src="" width="" />

 二、設置<map>,並name命名

 三、在<img>中引用name名 將<img>與<map>聯系起來

 四、設置連接區域<area>

     1、shape 連接區域形狀 rect矩形 circle圓形 poly多邊形

     2、coords 設置連接區域的坐標 矩形為左上角坐標及右下角坐標 圓形為圓點坐標及半徑長度  坐標是圖片的左上角計算

     3、href 設置連接網址  _blank 新網頁中打開

 

網頁內嵌

    在一個網頁里,規划處一個區域來展示另一個網頁的內容

我們在上面的網頁基礎上嵌入百度主頁

<tr><td>
<iframe src="http://www.baidu.com" width="900" height="400"></iframe>
</td></tr>

<iframe></iframe> 為網頁內嵌標簽  設置區域寬與高來指定區域

 

網頁拼接

在一個網絡頁面內,規划出多個頁面窗口,以表格拼接的形式展現出來

快速切圖

用於做一個簡單的網頁效果圖

步驟一:PS打開一個圖片,選取“切刀”工具,對想要進行超鏈接的區域進行切割處理,可以同時切多處區域

 

步驟二:“文件”中選擇“存儲為Web所用格式...”,存儲時格式選擇“HTML 和圖像”

步驟三:在DW中打開保存的網頁,並設置每個區域連接的網址,即可完成一個簡單的網頁效果圖

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM