img元素允許我們在HTML文檔里嵌入圖像。
要嵌入一張圖像需要使用src和alt屬性，代碼如下：
<img src="../img/example/img-map.jpg" alt="Products Image" width="580" height="266" />
顯示效果：
1 在超鏈接里嵌入圖像
img元素的一個常見用法是結(jié)合a元素創(chuàng)建一個基于圖像的超鏈接，代碼如下：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <a href="otherpage.html">
- <img src="../img/example/img-map.jpg" ismap alt="Products Image" width="580" height="266" />
- </a>
瀏覽器顯示這張圖片的方式?jīng)]有什么不同。因此，重要的一點事要向用戶提供視覺提示，表明特定圖像所代表的是超鏈接。具體的做法可以是利用CSS，能在圖像內(nèi)容里表達則更好。
如果點擊這種圖片，瀏覽器會導(dǎo)航至父元素a的href屬性所指定的URL上。給 img 元素應(yīng)用 ismap 屬性就創(chuàng)建了一個服務(wù)器端分部響應(yīng)圖，意思是在圖像上點擊的位置會附加到URL上。舉個例子，如果點擊的位置是距圖像頂部8像素，左邊緣10像素，瀏覽器就會導(dǎo)航到下面的地址：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- https://yexiaochao.github.io/show4cnblogs/otherpage.html?10,8
下面代碼展示了 otherpage.html 中的內(nèi)容，它包含了一個簡單的腳本，用來顯示點擊位置的坐標：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <body>
- <p>The X-coordinate is <b><span id="xco">??</span></b></p>
- <p>The Y-coordinate is <b><span id="yco">??</span></b></p>
- <script type="application/javascript">
- var coords = window.location.href.split('?')[1].split(',');
- document.getElementById("xco").innerHTML = coords[0];
- document.getElementById("yco").innerHTML = coords[1];
- </script>
- </body>
可以看到鼠標點擊產(chǎn)生的效果：
【網(wǎng)站聲明】本站除付費源碼經(jīng)過測試外，其他素材未做測試，不保證完整性，網(wǎng)站上部分源碼僅限學(xué)習(xí)交流，請勿用于商業(yè)用途。如損害你的權(quán)益請聯(lián)系客服QQ：2655101040 給予處理，謝謝支持。