修改

Question

对于图像内部的区域有左，上，右，下，我很困惑，我对此几乎没有问题，在这种情况下我将使用一个矩形示例。

1-从哪里测量，是从图像还是从页面？

2-他们是否定义了位置或尺寸？我很困惑，因为位置只需要2D页面的2个坐标。

这是我试过的代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>How to define an area inside an image-map
</title>
</head>
<body>  

 <!--alt= "area example" is the text to be displayed if the pic cannot be shown -->
 <!--usemap = "" mean that we want this image to have different clickable area that links to other pages, #Map is a reference to the map name that we want to use. -->

 <!-- width and height do not define position, but rather define dimensions, position is later defined CSS-->
<img src="http://www.w3resource.com/html/area/html-area-element.png" alt="area example " width="308" height="270" border="10" usemap="#Map"> 


 <!-- coords define size and position by using coordinates, so you pick how far you want your area -->
 <!-- for rect coords works like left,top,right,bottom  -->
 <!-- for circ coords works like x circle center from left, y circle center from top , radius of circle -->
<map name="Map">  
<area shape="rect" coords="8,5,100,180" href="http://www.w3resource.com/mysql/mysql-tutorials.php" target="_blank" alt="mysql tutorial">  
<area shape="circle" coords="155,150,59" href="http://www.w3resource.com/php/php-home.php" target="_blank" alt="php tutorial">  
<area shape="rect" coords="197,136,306,188" href="http://www.w3resource.com/sql/sql-tutorials.php" alt="sql tutorials">  
</map>  

</body>
</html>

Answer 1

你可以运行一些测试来获得它，但无论如何它是这样的：

修改

回答后看到你的第二个问题，所以这里有答案： Coords看起来像这样coords="8,5,100,180" 它代表x1,y1,x2,y2，其中(x1,y1)是矩形一角的坐标，(x2,y2)是对角的坐标。

HTML中区域地图的坐标在哪里测量？

1 个答案:

修改