HTML 图像与超链接（下）

TingFeng清风

已于 2022-06-08 18:34:15 修改

阅读量936

点赞数

文章标签： html 前端

于 2022-06-05 19:16:54 首次发布

本文链接：https://blog.csdn.net/xiao_suan_cai/article/details/125128825

版权

HTML 图像与超链接（下）

3.2 书签链接
3.3 图像热区链接

3.2 书签链接

在浏览页面的时候，如果页面的内容较多，且页面过长，则需要不断拖动滚动条，很不方便；如果要寻找特定的内容，就更不方便了。这是如果能在该网页或另一个页面上建立目录，那么浏览者只要单击目录上的项目就能自动跳转到页面相应的位置进行阅读，这样无疑是最方便的事情，并且还可以在页面中设定诸如”返回页面“之类的链接。这就称之为书签链接。
建立书签链接分为两步：一是建立书签；二是为书签制作链接。
下列举例一个实例，在网页中添加书签链接，当用户单击文字是，页面跳转到相应位置。
（1）建立书签。分别为每一版块位置后面的文字（如”华为荣耀“”华为P8“等）建立书签。部分代码如下：

<style type="text/css" >
        .mr-pic{
            float: left;
            width: 25%;
        }
        .mr-nav{
           algin:center;
        }
    </style>

</head>
<body>
<div class="mr-top">
    <a name="top">
        <div class="mr-nav">
            <ul>
                <li><a href="#rongyao">华为荣耀</a></li>
                <li><a href="#mate40">华为mate40</a></li>
                <li><a href="#huawei5a">华为5a</a></li>
                <li><a href="#hauweip40">华为p40</a></li>
                <li><a href="#huaweip50">华为p50</a></li>
            </ul>
            <img class="mr-banner" src="images/huawei.jpg" width="945" height="430">
        </div>
    </a>
</div>
    <div class="mr-txt">
        <h3> &nbsp;位置：<a name="rongyao">华为荣耀</a>
            <a href="#top">>>回到顶部</a>
        </h3>
        <div class="mr-phone rongyao"></div>
            <div class="mr-pic"><img src="images/荣耀1.jpg" width="250" height="300" alt=""></div>
            <div class="mr-pic"><img src="images/荣耀2.jpg" width="250" height="300" alt=""></div>
            <div class="mr-pic"><img src="images/荣耀3.jpg" width="250" height="300" alt=""></div>
            <div class="mr-pic"><img src="images/荣耀4.jpg" width="250" height="300" alt=""></div>
            <div class="mr-pic"><img src="images/荣耀5.jpg" width="250" height="300" alt=""></div>
            <div class="mr-pic"><img src="images/荣耀6.jpg" width="250" height="300" alt=""></div>
            <div class="mr-pic"><img src="images/荣耀7.jpg" width="250" height="300" alt=""></div>
            <div class="mr-pic"><img src="images/荣耀8.jpg" width="250" height="300" alt=""></div>
    </div>
    <h3 class="local">&nbsp;位置：
        <a name="mate40">华为mate40</a>
        <a href="#top">>>回到顶部</a>
    </h3>
    <div class="mr-phone mate40"></div>
        <div class="mr-pic"><img src="images/mate1.jpeg" width="250" height="300" alt=""></div>
        <div class="mr-pic"><img src="images/mate2.jpeg" width="250" height="300" alt=""></div>
        <div class="mr-pic"><img src="images/mate3.jpeg" width="250" height="300" alt=""></div>
        <div class="mr-pic"><img src="images/mate4.jpeg" width="250" height="300" alt=""></div>
        <div class="mr-pic"><img src="images/mate5.jpeg" width="250" height="300" alt=""></div>
        <div class="mr-pic"><img src="images/mate6.jpeg" width="250" height="300" alt=""></div>
        <div class="mr-pic"><img src="images/mate7.jpeg" width="250" height="300" alt=""></div>
        <div class="mr-pic"><img src="images/mate8.jpeg" width="250" height="300" alt=""></div>
    </div>
    <h3 class="local">&nbsp;位置：<a name="huaweip50">华为P50</a>
        <a href="#top">>>回到顶部</a>
    </h3>
</body>

因为代码编辑后，使用了部分css央视，有关css样式后续会进行更新，具体显示页面效果图如下：
在这里插入图片描述
补充：图像的超链接实现比较简单，可直接在<a>标签中插入<img>，那么点击图片是就可以直接实现图片的超链接跳转。

3.3 图像热区链接

除对整副图像进行超链接的设置外，还可以将图像划分成不同的区域进行超链接设置，而包括含热区的图像也可以称为映射图像。
在位图像设置热区链接时，大致需要经过以下两个步骤。
首先需要在图像文件中设置映射图像名。在添加图像的<img>标签中使用usemap属性添加图像要引用的映射图像的名称，语法格式如下：

<img src="图像地址" usemap="映射图像名称">

然后需要定义热区图像及热区的链接，语法格式如下：

<map name="映射图像名称">
	<area shape="热区形状" coords="热区坐标" href="链接地址" />
</map>

在该语法中，要先定义映射图像的名称，在引用这个映射图像。在<area>标签中定义了热区的位置和链接，其中，sheape用来定义热区的形状，可以取值为rect（矩形区域）、circle（圆形区域）及poly（多边形区域）；coords则用来设置区域坐标，对于不同的形状来说，coords设置的方式也不同。

对于矩形区域来说，coords包含4个坐标，分别是left、top、right和bottom，也可以将4个参数看作是矩形对角的点坐标（即左上角和右下角的坐标）。
对于原型区域来说，coords包含3个参数，分别是center-x、center-y和tadius，也可以看作是圆形的圆心坐标（x，y）和半径的值。
对于多边形区域来说，设置坐标参数比较复杂，跟多边形的形状息息相关。cords参数需要按照顺序（可以是顺时针，也可以是逆时针），取各个点的x，y坐标值。由于定义坐标比较复杂而且难以控制，所以在一般情况下使用可视化软件进行这种参数的设置。

下面列举一个实例：

<div> <img src="../img/ad.jpg" width="780" height="473" usemap="#hotpoint" />
    <map name="hotpoint">
      <area shape="rect" coords="606,31,762,234" href="../img/big.png" target="_blank" alt="baidu">
      <area shape="rect" coords="591,300,769,465" href="../img/big.png">
      <area shape="rect" coords="9,294,202,466" href="../img/big.png">
    </map>
</div>

页面效果图如下：
在这里插入图片描述
鼠标移至图片热区时，箭头会直接变成手指，点击即可直接跳转。

TingFeng清风

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML 图像与超链接（下）

在浏览页面的时候，如果页面的内容较多，且页面过长，则需要不断拖动滚动条，很不方便；如果要寻找特定的内容，就更不方便了。这是如果能在该网页或另一个页面上建立目录，那么浏览者只要单击目录上的项目就能自动跳转到页面相应的位置进行阅读，这样无疑是最方便的事情，并且还可以在页面中设定诸如”返回页面“之类的链接。这就称之为书签链接。建立书签链接分为两步：一是建立书签；二是为书签制作链接。.........
复制链接

扫一扫