HTML插入图片并链接地址

最新推荐文章于 2023-04-15 17:16:54 发布

今天不是愚人节

最新推荐文章于 2023-04-15 17:16:54 发布

阅读量4.8k

点赞数 4

本文链接：https://blog.youkuaiyun.com/qq_32446225/article/details/88932458

版权

本文介绍了如何在HTML中插入图片并添加链接地址。通过设置`src`、`width`、`height`和`alt`属性来嵌入图片，并利用`<a>`标签创建基于图像的超链接。同时，讲解了如何在`<map>`和`<area>`标签中进行图像的矩形和圆形分割，实现点击不同区域跳转不同URL。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

嵌入图片：<img>属性：src width height alt
结合<a>基于图像创建超链接
eg：<a href="www.baidu.com"><img src=""> <a/>

1. form中嵌套type图片，点击图片可以在地址栏中出现xy值

在这里插入图片描述

<form>
        <input type="image" src="img\ma.png">
</form>

2.使用<area>标签进行分割图片，<area>标签嵌套在<map>标签中。
<area>标签属性有：
A类

alt 定义图片的备用内容（image missing）
href 跳转URL地址
B类
shape
[Rect 矩形区域（左边缘，上边缘，右边缘，下边缘）]
[circle 圆形区域（左边缘到圆心的距离，上边缘到圆心的距离，圆的半径）]
[poly 多边形，至少6个顶点]
[dafault默认区域，整张图片，不需要coords值]

圆形

在这里插入图片描述

<img src="img\1fca564d886aaf4a.jpg" alt="image missing" usemap="#map2">
    <map name="map2">
        <area shape="circle" coords="320,320,320" href="https://weibo.com/p/1005052107747967" alt="web missing" target="_blank">
    </map>

矩形分割

在这里插入图片描述

<img src="img\ma.png" alt="images missing" usemap="map1">
    <map name="map1">
        <area shape="rect" coords="22,40,101,118" href="http://www.hko.gov.hk/gts/time/clock_uc.html" alt="web missing" target="_blank">
        <area shape="rect" coords="135,38,215,119" href="http://www.weather.com.cn/" alt="web missing" target="_blank">
        <area shape="rect" coords="250,40,330,118" href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=%E8%AE%A1%E7%AE%97%E5%99%A8&oq=%25E4%25B8%25AD%25E5%259B%25BD%25E5%25A4%25A9%25E6%25B0%2594&rsv_pq=8b53fbc500052f66&rsv_t=0416khQ1wiLcYmCjcH9EenRfieINqxHWX49cAUPwXChwVRHBaYeLQCl%2BtQw&rqlang=cn&rsv_enter=1&rsv_sug3=3&rsv_sug1=2&rsv_sug7=100&rsv_sug2=0&inputT=1148&rsv_sug4=2388" alt="web missing" target="_blank">
        <area shape="rect" coords="22,146,101,230" href="https://list.jd.com/list.html?cat=652,654,832&ev=exbrand_13392&cu=true&utm_source=baidu-nks&utm_medium=cpc&utm_campaign=t_262767352_baidunks&utm_term=79787297460_0_dfc63f54f63848df95d2cbf204c1674c" alt="web missing" target="_blank">
        <area shape="rect" coords="135,146,215,230" href="https://music.163.com/" alt="web missing" target="_blank">
        <area shape="rect" coords="250,146,330,230" href="https://www.iqiyi.com/" alt="web missing" target="_blank">
    </map>