img元素允許我們在HTML文檔里嵌入圖像。
要嵌入一張圖像需要使用src和alt屬性,代碼如下:
顯示效果:
1 在超鏈接里嵌入圖像
img元素的一個常見用法是結合a元素創建一個基于圖像的超鏈接,代碼如下:
|
瀏覽器顯示這張圖片的方式沒有什么不同。因此,重要的一點事要向用戶提供視覺提示,表明特定圖像所代表的是超鏈接。具體的做法可以是利用CSS,能在圖像內容里表達則更好。
如果點擊這種圖片,瀏覽器會導航至父元素a的href屬性所指定的URL上。給 img 元素應用 ismap 屬性就創建了一個服務器端分部響應圖,意思是在圖像上點擊的位置會附加到URL上。舉個例子,如果點擊的位置是距圖像頂部8像素,左邊緣10像素,瀏覽器就會導航到下面的地址:
|
下面代碼展示了 otherpage.html 中的內容,它包含了一個簡單的腳本,用來顯示點擊位置的坐標:
|
可以看到鼠標點擊產生的效果:
服務器端分區響應圖通常意味著服務器會根據用戶在圖像上點擊區域的不同做出有差別的反應,比如返回不同的響應信息。如果省略了img元素上的 ismap 屬性,鼠標點擊的坐標就不會被包含在請求 URL 中。
新聞熱點
疑難解答
圖片精選