Search code examples
htmlarea

Linking web pages in images , <area> tag

I'm currently building a basic prototype as part of an HCI class I'm part of in college. I modeled the app screens and now wish the link the images in html so you can mock usage and navigation. I have little to no familiarity with HTML though and have run into a problem with what I'm trying to do.

When I open this page the URL is

Desktop/carpark_app_prototype/html/carstatus_page.html

But after clicking a button that should navigate you to a different page entirely through the area tags embedded url instead it goes here

Desktop/carpark_app_prototype/html/carstatus_page.html#carstatussuccess_page

What am I doing wrong?

<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>
Solution

  • You can Do two things :

    Run your HTML in a local server I would advise you using an Apache server to run the page. I guess you are using Windows so WampServer would be a good and simple one.

    1. Put all your file in a folder In the www directory.
    2. Type localhost in your browser or the full 'local' url http://localhost/[name of your directory]. exemple: if you created a folder named My_Project and the heml file name is index.html :

    http://localhost/My_Project/index.html

    Put the ful Path of the file instead of just the file name

    If the url (actually its the path) of your main on your browser is :

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

    for all the other href put the full path, exemple:

    <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'" />