圖片映射(HTML 標簽)這么拽,小伙伴們都明白嗎?

電腦雜談  發布時間:2020-02-14 14:00:45  來源:網絡整理

it世界圖片_it經理人世界_世界it經濟

在一些購物網站,我們總能看到一張大圖,上面布滿充滿誘人的禮物,當我們輕輕地用鍵盤單擊一下,就跳轉到這個孩子的頁面。 對于這個神奇的功能,身邊的小伙伴們往往都被驚艷了。要是無法學會這招技能,那該多好啊,以后再也不用去找美工切圖,并且也不用為兼容這些瀏覽器而發愁了。

其實it世界圖片,對于這個看起來神奇的功能,實現出來卻是相當的容易。只應該使用HTML的<img>標簽、<map>標簽和<area>標簽能夠推動這個超強的功能。但是即使想要把照片映射做的挺強大的話,那也必須頗下一番功夫。不過最近小編已經整理好了攻略,你只應該本文的方法,就可以輕松掌握這個技能。

首先,將想要顯示的照片,使用HTML標簽將其顯示在頁面中it世界圖片,代碼很簡單,不做過多解釋。但是這兒有一個關鍵的并不常用的屬性,那就是usemap,它指定了你應選用的地圖,也就是使用那種地圖模式來展現里面的鏈接。示例代碼如下:

世界it經濟_it世界圖片_it經理人世界

<img src="planets.jpg" border="0" usemap="#imgMap" alt="Planets" />

接下來,定義Map地圖,并將Map分塊,用以區分不同的內容區域。

Map地圖由<map>標簽和<area>標簽組成。<map>標簽的定義比較簡潔,只需聲明id和name即可,因為不同瀏覽器識別的標簽不一樣,所以id和name二者缺一不可。<area>標簽因為不常見,下面的圖例展示了各個屬性所代表的的準確意義。

世界it經濟_it世界圖片_it經理人世界

定義可點擊區域(對鼠標敏感的區域)的坐標。

定義此區域的目標 URL。

定義區域的形狀。

it經理人世界_it世界圖片_世界it經濟

規定在何處打開 href 屬性指定的目標 URL。

Map地圖的樣例代碼如下:

<mapfont-size:12px;line-height:16px;">imgMap"font-size:12px;line-height:16px;">imgMap">

世界it經濟_it世界圖片_it經理人世界

<area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />

<area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />

<area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />

</map>

到此為止,我們就可以輕松創建自己的照片地圖了。然而,對于怎樣圖片中某個元素的坐標對這些小伙伴來說,仍然是一個難題,因為普通的看圖軟件根本難以查看每個元素的坐標位置。在這里,給你們推薦一款軟件:Image-Maps。我們只需在Image-Maps 上登錄一個賬號,就能夠通過可視化軟件對照片進行剪裁,獲取裁剪的照片的坐標。


本文來自電腦雜談,轉載請注明本文網址:
http://www.772070.live/a/jisuanjixue/article-140741-1.html

    相關閱讀
    發表評論  請自覺遵守互聯網相關的政策法規,嚴禁發布、暴力、反動的言論

    熱點圖片
    拼命載入中...
    天津快乐十分20选8技巧