html点击图片出现旁白

html-css014

html点击图片出现旁白,第1张

html点击图片出现旁白可以给图片添加一个display：block。。根据相关公开信息显示，在日常的写html页面时，原生代码经常性的会引入图片，也经常性的会让图片宽度等于父盒子宽度的100%，高度自适应，此时会出现一个问题，图片下方总有撑开的一小部分，这里将父盒子背景颜色改成黑色，此时只需要给图片添加一个display：block。属性就会解决图片的这个问题。

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<style>标签中，输入css代码：

div {width: 72pxheight: 72pxbackground: url(small3.png) no-repeatoverflow: hidden}

3、浏览器运行index.html页面，此时成功将矩形图片只显示了正方形部分。

4、点击小图后，成功显示了大图。

需要在一张图片上设置多个能点击跳转的链接区域时，推荐使用网页的热点链接。

参考代码如下：

<map name="Map" id="Map">

  <area shape="rect" coords="89,41,379,136" href="#" target="baidu.com" />

  <area shape="rect" coords="89,175,394,264" href="#" />

  <area shape="rect" coords="95,293,386,355" href="#" />

</map>

网页热点使用方法：

个人推荐Dreamwever可视化操作来创建网页热点。

1、打开Dreamwever，新建一个页面，插入一张图片，

2、使用左下角的热点工具。

3、点击“矩形”或其他热点工具，再在图片上拖动位置

4、选中其中一个热点，在下方的属性窗口中的链接栏填上你的链接，热点链接就创建完成了。