第12节 html创建热点区域链接

最新推荐文章于 2024-10-13 20:25:23 发布

Simple-Coder

最新推荐文章于 2024-10-13 20:25:23 发布

阅读量1w

点赞数 1

分类专栏： Html+css

本文链接：https://blog.csdn.net/qq_32895969/article/details/54971769

版权

Html+css 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

热点区域链接

例如：

<html>
    <head>
        <title>使用文本建立超链接</title>
    </head>
    <body>
        <!--内部特定目标跳转 将需要跳转的文字包起来-->
        <p>实现特定<a href="https://www.baidu.com/">目标</a>跳转</p>
        <!--实现图像超链接-->
        <a href="http://www.csdn.net/"><img src="D:\温习网页\favicon.ico" width="100" height="100"></a>
        <br/>
        <!--电子邮件超链接-->
        邮箱地址：<a href="http://mail.163.com/">123456789</a>@163.com
        <br/>
        <!--以新窗口显示链接页面  添加target属性值设置为_blank-->
        以<a href="https://www.baidu.com/" target="_blank">新窗口方式打开一个网页
        <br/>
        <!--创建热点区域 难点是找准图像的坐标-->
        <!--img图片标签 border是制定图片没有边框 usemap是指定使用图片的地图名
        值必须加上#和地图的名字
        map地图标签 name是地图的名字
        area是区域属性
        shape是区域的形状 rect矩形 circle椭圆 poly多边形
        coords是坐标属性：
        rect矩形（左上角x，y，右下角x,y）
        circle椭圆（圆心x,y,半径r）
        poly多边形(多边形个点的坐标)-->
        <img src="D:\温习网页\bd_logo1_31bdc765.png" border="0" usemap="#Mapl">
        <map name="Mapl">
            <area shape="rect" coords="23,28,111,81" href="D:\温习网页\字体样式.html">
            <area shape="circle" coords="187,57,33" href="D:\温习网页\字体样式.html">
            <area shape="poly" coords="271,12,321,23,321,80,275,87,251,49" href="D:\温习网页\字体样式.html">
        </map>
    <body>
</html>