HTML入门:图像映射

你的网络首码项目网 网站建设评论99字数 1129阅读模式

图像地图是具有可点击区域(有时称为“热点”)的图像,通常链接到另一个页面。

如果使用得当,图像地图可以成为用户查找有关图像中表示的项目的详细信息的有效方法。他们可以单击图像的不同部分以打开与该部分相关的网页。文章源自你的网络首码项目网-https://www.youranweb.com/102.html

要创建图像映射:文章源自你的网络首码项目网-https://www.youranweb.com/102.html

添加<>标记

使用常用方法(通过<img>元素)将图像嵌入到页面中。文章源自你的网络首码项目网-https://www.youranweb.com/102.html

当然,图像必须首先在Web上可用。您可以上传它或引用现有图像。它可以是照片,图标,徽标,库存图像等。任何图像都很好。文章源自你的网络首码项目网-https://www.youranweb.com/102.html

添加地图

使用HTML<地图>标记创建具有名称的地图。在此标记中,您将使用HTML<area>标记指定可单击区域的位置。文章源自你的网络首码项目网-https://www.youranweb.com/102.html

将它们与属性链接usemap

此位将地图与图像链接起来。文章源自你的网络首码项目网-https://www.youranweb.com/102.html

将属性添加到<img>标记。该值必须是映射的名称,前面带有哈希()符号。usemap#文章源自你的网络首码项目网-https://www.youranweb.com/102.html

例如,如果地图有,则应在图像中使用。name="pluto"usemap="#pluto"文章源自你的网络首码项目网-https://www.youranweb.com/102.html

图像映射示例文章源自你的网络首码项目网-https://www.youranweb.com/102.html

<!-- Image -->
<img usemap="#aus-nz" src="/pix/examples/australia-nz-map.gif" width="200" height="142" 
alt="Map of Australia and New Zealand">
​
<!-- Map -->
<map name="aus-nz">
    <area shape="poly" coords="3,47,45,12,105,7,140,60,120,125,12,90" href="https://en.wikipedia.org/wiki/Australia" target="_blank" alt="Australia">
    <area shape="poly" coords="180,85,200,98,167,142,157,138" href="https://en.wikipedia.org/wiki/New_Zealand" target="_blank" alt="New Zealand">
</map>

好的,与我们之前的课程相比,此代码看起来相当复杂。但是,一旦你研究它,它就不那么复杂了。我们所做的只是添加一个图像,然后我们创建一个带有坐标的地图。最困难的部分是获得正确的坐标。文章源自你的网络首码项目网-https://www.youranweb.com/102.html

在我们的示例中,我们将 <area> 标记与 和 属性结合使用。它们接受以下属性:shapecoord文章源自你的网络首码项目网-https://www.youranweb.com/102.html

shape定义可单击区域的形状。可能的值:文章源自你的网络首码项目网-https://www.youranweb.com/102.html
  • default
  • rect
  • circle
  • poly
coords指定可单击区域的坐标。坐标指定如下:文章源自你的网络首码项目网-https://www.youranweb.com/102.html
矩形
left, , ,toprightbottom
center-x, ,center-yradius
x1, , , , ...y1x2y2

您可以使用上述属性配置自己的图像映射,其中包含任意数量的形状和可单击区域。文章源自你的网络首码项目网-https://www.youranweb.com/102.html 文章源自你的网络首码项目网-https://www.youranweb.com/102.html

相关文章
weinxin
你的网络首码项目网站长
本站旨在为广大网友提供一个免费、公开且和谐的互联网项目交流平台,所有文章均来自网络和网友投稿,不代表本站任何立场,请勿盲目下载注册参与,以免为您带来不必要的损失。
你的网络首码项目网
  • 声明:首码项目网所有文章均来自网络和投稿,不代表本站立场,请勿盲目下载注册,以免为您带来不必要的损失。《项目投诉》
  • 你的首码项目网

发表评论