[RESOLVED] make entire background clickable link?

**Static** · Jan 12th, 2006, 10: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, 11:39 AM

Something like this might be suitable

HTML Code:

<!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, 11:42 AM

thought of something like that.. but what if browser has scripts turned off? will that still work?

**Static** · Jan 12th, 2006, 11:55 AM

this should work then right?

<body onclick="location.href='home.html';">

**DeadEyes** · Jan 12th, 2006, 12:00 PM

I just tried that in Firefox with javascript turned off and it didn't work.

**Static** · Jan 12th, 2006, 12:57 PM

ok.. soo.. how to do this a "safe" way?

**penagate** · Jan 14th, 2006, 04:56 AM

Put the whole page within an anchor tag.

**CornedBee** · Jan 14th, 2006, 04: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, 10: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, 10:33 AM

HTML or XHTML?

**penagate** · Jan 16th, 2006, 10:35 AM

I'll assume HTML so here's the code including CSS

HTML Code:

<!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, 10:52 AM

is this right? "body>div a"
it seems that whatever I have in that section doesnt work....

**penagate** · Jan 16th, 2006, 10: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, 10: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, 11: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, 11: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....

Code:

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, 11: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, 11: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, 11:21 AM

cornedbee.. not to worry.. there is nothing but a background image on this.. no text etc...

Thanks all!!!

**penagate** · Jan 16th, 2006, 11:23 AM

No problem, and PLEASE at least consider using a better browser ... it will make your life much easier.

**Static** · Jan 16th, 2006, 11: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, 11:30 AM

Mouse Gestures for Firefox.

http://optimoz.mozdev.org/gestures/

**CornedBee** · Jan 16th, 2006, 11:49 AM

I can middle-click links for a new tab. How's that for simple?

**Static** · Jan 16th, 2006, 11:53 AM

works for me...

Thread: [RESOLVED] make entire background clickable link?

Thread Tools

Display

[RESOLVED] make entire background clickable link?

Re: make entire background clickable link?

Re: make entire background clickable link?

Re: make entire background clickable link?

Re: make entire background clickable link?

Re: make entire background clickable link?

Re: make entire background clickable link?

Re: make entire background clickable link?

Re: make entire background clickable link?

Re: make entire background clickable link?

Re: make entire background clickable link?

Re: make entire background clickable link?

Re: make entire background clickable link?

Re: make entire background clickable link?

Re: make entire background clickable link?

Re: make entire background clickable link?

Re: make entire background clickable link?

Re: make entire background clickable link?

Re: make entire background clickable link?

Re: [RESOLVED] make entire background clickable link?

Re: [RESOLVED] make entire background clickable link?

Re: [RESOLVED] make entire background clickable link?

Re: [RESOLVED] make entire background clickable link?

Re: [RESOLVED] make entire background clickable link?

Posting Permissions