PDA

Click to See Complete Forum and Search --> : [RESOLVED] make entire background clickable link?

Static
Jan 12th, 2006, 09:34 AM
is there a way using HTML or CSS to make the entire page a clickable link?

its the "Enter" page for the site.. and right now I have a large trans gif as the link (as well as a 10 second redirect).. but would rather have the whole page clickable...

Thanks!
DeadEyes
Jan 12th, 2006, 10:39 AM
Something like this might be suitable

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Example</title>
<style>
BODY.enterPage{
cursor:hand;
}
</style>
<script>
function goto(){
location.href = "http://www.dogpile.com"
}
</script>
</head>
<body class="enterPage" onclick="goto();">
<a href="www.dogpile.com">Enter</a>
</body>
</html>
Static
Jan 12th, 2006, 10:42 AM
thought of something like that.. but what if browser has scripts turned off? will that still work?
Static
Jan 12th, 2006, 10:55 AM
this should work then right?

<body onclick="location.href='home.html';">
DeadEyes
Jan 12th, 2006, 11:00 AM
I just tried that in Firefox with javascript turned off and it didn't work.
Static
Jan 12th, 2006, 11:57 AM
ok.. soo.. how to do this a "safe" way?
penagate
Jan 14th, 2006, 03:56 AM
Put the whole page within an anchor tag.
CornedBee
Jan 14th, 2006, 03:58 AM
Or put an anchor somewhere and use CSS to make it cover the entire viewport. (But problematic with either scrolling or IE.)
Static
Jan 16th, 2006, 09:14 AM
? I need examples of either of those :) (still learning!!)

if this helps.. there is NOTHING on the page but a background image
penagate
Jan 16th, 2006, 09:33 AM
HTML or XHTML?
penagate
Jan 16th, 2006, 09:35 AM
I'll assume HTML so here's the code including CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
<title>Test</title>

<style type="text/css">
html
{
background-color: black;
}

body
{
overflow: hidden;
}

body>div a
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black url('entry.gif') center center no-repeat;
}
</style>
</head>

<body>
<div><a href="main"></a></div>
</body>
</html>


Change the background colour and "entry.gif" as needed.
Static
Jan 16th, 2006, 09:52 AM
is this right? "body>div a"
it seems that whatever I have in that section doesnt work....
penagate
Jan 16th, 2006, 09:54 AM
That would be because you are using a bad browser ... ;)

It works perfectly fine in Firefox and Opera.

Have you read the bottom two links in my signature? :)
Static
Jan 16th, 2006, 09:57 AM
lol
its because this "body>div a" should be just "div a"

then it works perfectly!!

I have to program for the "majority" and that means IE ;)
but it should work for FF & Opera as well...right?
penagate
Jan 16th, 2006, 10:02 AM
body>div is a perfectly valid, basic, part of the CSS specification. To be quite honest, I removed it and it still did not work for me in IE, but then not much does anyway.

I have a problem with "programming for the majority", because standards are not respected and so progress is never made. But do as you see fit ;)
Static
Jan 16th, 2006, 10:06 AM
it didnt work??
this is what I changed it too based on a few examples I found... body> wasnt used in the ones I saw....

div a
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('bg_main.jpg');
background-repeat: no-repeat;
background-position: center;
background-color: black;
}
penagate
Jan 16th, 2006, 10:15 AM
Well that's actually exactly the same as what I had, minus the body>div child combinator in the selection rule. I only put it in in case you needed multiple div's, which you probably don't anyway :)

To make it work properly in IE I needed to add "height: 100%;" to the body properties.
CornedBee
Jan 16th, 2006, 10:17 AM
Mind you, this method won't work if the content is long enough for scrolling. In that case, the link will simply scroll away.

position:relative;
would ignore scrolling, but doesn't work in IE.
Static
Jan 16th, 2006, 10:21 AM
cornedbee.. not to worry.. there is nothing but a background image on this.. no text etc...

Thanks all!!!
penagate
Jan 16th, 2006, 10:23 AM
No problem, and PLEASE at least consider using a better browser ... it will make your life much easier.
Static
Jan 16th, 2006, 10:28 AM
I will consider it I guess...

I use maxthon, and I know its IE, but the features it has are just too good and so easy to use... basically its the drag link for new tab feature I cant live without

click drag a link a 1/4 inch (so it turns to a shortcut drop cursor) and let go.. bam that link opens in a new page.. love it too much! havent found another browser that does this
penagate
Jan 16th, 2006, 10:30 AM
Mouse Gestures (https://addons.mozilla.org/extensions/moreinfo.php?application=firefox&version=1.0&os=Windows&category=Navigation&numpg=10&id=39) for Firefox.

http://optimoz.mozdev.org/gestures/
CornedBee
Jan 16th, 2006, 10:49 AM
I can middle-click links for a new tab. How's that for simple?
Static
Jan 16th, 2006, 10:53 AM
works for me...