Bob Faulkner 0

I'm making a web-based kiosk. We would like the entire home page to be clickable, to go to the second page. Here is the link to the page as it is now:

http://statehousehotel.com/kiosk/

I placed an image on the page and added a link. Then, I added padding around the image to extend the link to the entire page. I then added text below the image. To get the text from being pushed off the page by the image padding, I added a negative top margin to the text. That's where the trouble began. The area around the text was not clickable.

Here is the HTML as it is now:

    <body>

    <div id="pageWrap"> <a href="pages/lists/listTransitional.html"><img id="logo" src="images/homePage/logo.png" width="767" height="239" alt="State House Hotel logo" /></a>

    <h1><a href="pages/lists/listTransitional.html">Welcome to the digital concierge.<br />
   Our take on the best places in town.<br />
    Touch anywhere to begin.</a></h1>

</div>
    <!-- end pageWrap -->

</body>

And, here is the CSS:

#logo {
    display: block;
    margin: 0 auto;
    padding: 14em 14em 35em;
}
h1 { margin-top:-12em; font-size: 2em; }

How can I make the entire page clickable?

3 answers

Jens Hedqvist 1396
0
points
This was chosen as the best answer

I would recommend using basic HTML to achieve that rather than relying on javascript. If javascript should fale in the browser or redirection with javascript is disabled the user is stuck in that splahs screen void. Also, search engines won't be able to follow that javascript-redirect.

Here's what you do:

  • Use an ordinary a-element
  • Position it above all content

First, ad a hyperlink the the page, say after the <h1>:

<a href="pages/lists/listTransitional.html" class="entrance">Enter the kiosk</a>

Use CSS to position it on the page:

.entrance {
   position: absolute:
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   width: 100%;
   height: 100%;
   text-indent: -9999px; /* we don't need to see the text, but some users and robots such as Google do */
}

You also might want to set #pageWrap to position: relative.

Answered over 1 year ago by Jens Hedqvist
Bob Faulkner 0
0
points

Okay, I ended up adding this to the body tag: onclick="location.href='pages/lists/listTransitional.html';"

That did the trick.

Answered over 1 year ago by Bob Faulkner
Bob Faulkner 0
-1
points

Terrific! Thank you!

Answered over 1 year ago by Bob Faulkner