国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > HTML > 正文

【HTML 元素】嵌入圖像的實現方法

2019-10-26 17:18:55
字體:
來源:轉載
供稿:網友

img元素允許我們在HTML文檔里嵌入圖像。

要嵌入一張圖像需要使用src和alt屬性,代碼如下:

<img src="../img/example/img-map.jpg" alt="Products Image" width="580" height="266" />

顯示效果:

1 在超鏈接里嵌入圖像

img元素的一個常見用法是結合a元素創建一個基于圖像的超鏈接,代碼如下:

  • <a href="otherpage.html">       <img src="../img/example/img-map.jpg" ismap alt="Products Image" width="580" height="266" />  
  • </a>  
  • 瀏覽器顯示這張圖片的方式沒有什么不同。因此,重要的一點事要向用戶提供視覺提示,表明特定圖像所代表的是超鏈接。具體的做法可以是利用CSS,能在圖像內容里表達則更好。

    如果點擊這種圖片,瀏覽器會導航至父元素a的href屬性所指定的URL上。給 img 元素應用 ismap 屬性就創建了一個服務器端分部響應圖,意思是在圖像上點擊的位置會附加到URL上。舉個例子,如果點擊的位置是距圖像頂部8像素,左邊緣10像素,瀏覽器就會導航到下面的地址:

  • https://yexiaochao.github.io/show4cnblogs/otherpage.html?10,8  
  • 下面代碼展示了 otherpage.html 中的內容,它包含了一個簡單的腳本,用來顯示點擊位置的坐標:

  • <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>  
  • 可以看到鼠標點擊產生的效果:

    服務器端分區響應圖通常意味著服務器會根據用戶在圖像上點擊區域的不同做出有差別的反應,比如返回不同的響應信息。如果省略了img元素上的 ismap 屬性,鼠標點擊的坐標就不會被包含在請求 URL 中。

    發表評論 共有條評論
    用戶名: 密碼:
    驗證碼: 匿名發表

    圖片精選

    主站蜘蛛池模板: 久治县| 峨山| 浦江县| 哈密市| 桦川县| 上思县| 磐石市| 濮阳市| 安福县| 曲靖市| 新民市| 隆回县| 秭归县| 慈利县| 肥城市| 望都县| 威宁| 喜德县| 高安市| 铜川市| 修水县| 定日县| 丰顺县| 延长县| 津南区| 大洼县| 左权县| 东阳市| 丁青县| 监利县| 寿光市| 甘德县| 福泉市| 通州区| 兴海县| 祥云县| 赞皇县| 潮州市| 隆德县| 黄山市| 梁平县|