在图片中链接网页，<area>标签答案

【问题标题】：Linking web pages in images , <area> tag在图片中链接网页，<area>标签
【发布时间】：2012-11-10 01:26:20
【问题描述】：

我目前正在构建一个基本原型，作为我在大学参加的 HCI 课程的一部分。我对应用程序屏幕进行了建模，现在希望将图像链接到 html 中，以便您可以模拟使用和导航。不过，我对 HTML 几乎不熟悉，并且在尝试做的事情时遇到了问题。

当我打开这个页面时，网址是

桌面/carpark_app_prototype/html/carstatus_page.html

但是在单击一个按钮后，该按钮应该完全通过区域标签嵌入的 url 将您导航到不同的页面，而不是在这里

桌面/carpark_app_prototype/html/carstatus_page.html#carstatussuccess_page

我做错了什么？

<html>
<head>
<title>CarPark Application</title>
<h1 id="documentTitle">CarPark Application</h1>
</head>

<body>
<div class="Page" id="pulldownmenu_page">
<div class="ImageContainer">
<img width="320" height="500" src="pages%5Cpulldownmenu.png" usemap="#map_pulldownmenu" />
</div>
<map name="map_pulldownmenu">
<area shape="rect" coords="18,313,296,356" href="carparkstatusscreen_page.html" title="Go to page 'CarParkStatus_Screen'" />
<area shape="rect" coords="18,230,296,273" href="parkinghours_page.html" title="Go to page     'Parking_Hours'" />
<area shape="rect" coords="18,146,296,189" href="carstatus_page.html" title="Go to page     'Car_status'" />
<area shape="rect" coords="18,78,296,123" href="parkcar_page.html" title="Go to page 'Park_car'" />
<area shape="rect" coords="107,394,228,424" href="loginscreen_page.html" title="Go to page         'Login_Screen'" />

</map>
</div>


</body>
</html>

【问题讨论】：

标签： html area

【解决方案1】：

你可以做两件事：

在本地服务器上运行您的 HTML 我建议您使用 Apache 服务器来运行该页面。我猜你使用的是 Windows，所以WampServer 会是一个简单而好用的工具。

将所有文件放在www目录下的文件夹中。
在浏览器中输入 localhost 或完整的“本地”url http://localhost/[目录名称]。示例：如果您创建了一个名为 My_Project 的文件夹，并且 heml 文件名为 index.html ：

http://localhost/My_Project/index.html

放置文件的完整路径，而不仅仅是文件名

如果您的浏览器主目录的 url（实际上是路径）是：

file:///C:/Users/your_user/Desktop/carpark_app_prototype/html/carstatus_page.html

对于所有其他href，请输入完整路径，例如：

<area shape="rect" coords="18,313,296,356" 
href="file:///C:/Users/your_user/Desktop/carpark_app_prototype/html/carparkstatusscreen_page.html"
 title="Go to page 'CarParkStatus_Screen'" />

【讨论】：