【HTML 元素】嵌入图像的实现方法

时间:2017-04-09

img元素允许我们在HTML文档里嵌入图像。

要嵌入一张图像需要使用src和alt属性,代码如下:

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

显示效果:

1 在超链接里嵌入图像

img元素的一个常见用法是结合a元素创建一个基于图像的超链接,代码如下:

XML/HTML Code复制内容到剪贴板
  1. <a href="otherpage.html">  
  2.     <img src="../img/example/img-map.jpg" ismap alt="Products Image" width="580" height="266" />  
  3. </a>  

浏览器显示这张图片的方式没有什么不同。因此,重要的一点事要向用户提供视觉提示,表明特定图像所代表的是超链接。具体的做法可以是利用CSS,能在图像内容里表达则更好。

如果点击这种图片,浏览器会导航至父元素a的href属性所指定的URL上。给 img 元素应用 ismap 属性就创建了一个服务器端分部响应图,意思是在图像上点击的位置会附加到URL上。举个例子,如果点击的位置是距图像顶部8像素,左边缘10像素,浏览器就会导航到下面的地址:

XML/HTML Code复制内容到剪贴板
  1. https://yexiaochao.github.io/show4cnblogs/otherpage.html?10,8  

下面代码展示了 otherpage.html 中的内容,它包含了一个简单的脚本,用来显示点击位置的坐标:

XML/HTML Code复制内容到剪贴板
  1. <body>  
  2. <p>The X-coordinate is <b><span id="xco">??</span></b></p>  
  3. <p>The Y-coordinate is <b><span id="yco">??</span></b></p>  
  4. <script type="application/javascript">  
  5.     var coords = window.location.href.split('?')[1].split(',');   
  6.     document.getElementById("xco").innerHTML = coords[0];   
  7.     document.getElementById("yco").innerHTML = coords[1];   
  8. </script>  
  9. </body>  

可以看到鼠标点击产生的效果:

  • 共2页:
  • 上一篇1/2
  • 下一页
  • 上一篇:input checkbox 扩大点击范围的实现方法 下一篇:【HTML 元素】标记文字详解

    相关文章

    最新文章