链接图像中的网页,<area />标记

时间:2012-11-10 01:26:20

标签: html area

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

当我打开此页面时,URL为

桌面/ carpark_app_prototype / HTML / carstatus_page.html

但点击一个按钮后,应该完全通过区域标签嵌入式网址导航到另一个页面而不是它在这里

桌面/ 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>

1 个答案:

答案 0 :(得分:1)

你可以做两件事:

在本地服务器中运行HTML 我建议您使用Apache服务器来运行该页面。 我猜你正在使用Windows,所以WampServer将是一个好的和简单的。

  1. 将所有文件放在文件夹中 www 目录。
  2. 在浏览器中输入localhost或完整的“本地”网址http:// localhost / [目录名称]。 例如:如果您创建了名为My_Project的文件夹,并且heml文件名为index.html:
  3.   

    http://localhost/My_Project/index.html

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

    如果您的浏览器主页的网址(实际上是路径)是:

      

    文件:/// 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'" />