Make background image a link?

Discussion in 'HTML' started by paul j, Dec 20, 2004.

  1. paul j

    paul j Guest

    Is this possible?

    I have a large graphic as a header image which I would like to make
    "clickable" so that visitors can return to the main page but I can't figure
    out how.

    Any thoughts?
    --
    Up from Third Base to Huntington
    They sang another victory song...........
     
    paul j, Dec 20, 2004
    #1
    1. Advertising

  2. paul j

    Neal Guest

    On Mon, 20 Dec 2004 14:17:35 GMT, paul j <>
    wrote:

    > Is this possible?
    >
    > I have a large graphic as a header image which I would like to make
    > "clickable" so that visitors can return to the main page but I can't
    > figure
    > out how.


    Is it background or content? Pick one. Content can be clickable.
    Background can't.
     
    Neal, Dec 20, 2004
    #2
    1. Advertising

  3. paul j

    paul j Guest

    On Mon, 20 Dec 2004 09:20:28 -0500, Neal wrote:

    > On Mon, 20 Dec 2004 14:17:35 GMT, paul j <>
    > wrote:
    >
    >> Is this possible?
    >>
    >> I have a large graphic as a header image which I would like to make
    >> "clickable" so that visitors can return to the main page but I can't
    >> figure
    >> out how.

    >
    > Is it background or content? Pick one. Content can be clickable.
    > Background can't.


    ..topleft {
    background-image: url(topleft.jpg);
    width: 847px;
    height: 204px;
    }

    [---]

    <div class="topleft"></div>
    --
    Up from Third Base to Huntington
    They sang another victory song...........
     
    paul j, Dec 20, 2004
    #3
  4. paul j

    mbstevens Guest

    paul j wrote:

    > Is this possible?
    >
    > I have a large graphic as a header image which I would like to make
    > "clickable" so that visitors can return to the main page but I can't
    > figure out how.
    >
    > Any thoughts?


    You can *approximate* the effect you *might* want by using the z-index.

    A large foreground image can be placed on <body> and all other content
    placed in objects that are above it in the z-index. Google z-index to
    learn particulars.
    --
    mbstevens http://www.mbstevens.com/
     
    mbstevens, Dec 20, 2004
    #4
  5. On Mon, 20 Dec 2004 14:24:51 +0000, paul j wrote:

    >
    > .topleft {
    > background-image: url(topleft.jpg);
    > width: 847px;
    > height: 204px;
    > }
    >
    > [---]
    >
    > <div class="topleft"></div>


    Try this.

    Add "display:block" to the css definition

    Change <div class="topleft"></div>

    to

    <a class="topleft"></a>


    later...

    --
    Jeffrey D. Silverman |
    Website | http://www.newtnotes.com

    Drop "PANTS" to reply by email
     
    Jeffrey Silverman, Dec 20, 2004
    #5
  6. paul j

    paul j Guest

    On Mon, 20 Dec 2004 12:57:28 -0500, Jeffrey Silverman wrote:

    > On Mon, 20 Dec 2004 14:24:51 +0000, paul j wrote:
    >
    >>
    >> .topleft {
    >> background-image: url(topleft.jpg);
    >> width: 847px;
    >> height: 204px;
    >> }
    >>
    >> [---]
    >>
    >> <div class="topleft"></div>

    >
    > Try this.
    >
    > Add "display:block" to the css definition
    >
    > Change <div class="topleft"></div>
    >
    > to
    >
    > <a class="topleft"></a>
    >
    >
    > later...


    That works, but it isn't clickable...adding "href" to it causes it to fail
    validation.
    --
    Up from Third Base to Huntington
    They sang another victory song...........
     
    paul j, Dec 20, 2004
    #6
  7. paul j

    Kris Guest

    In article
    <11v6tufyi0whn$.dlg@P7Ax8zefAz8re8ranuGa9rebruMUdruPHeYaPrabru9haSE5r56r
    eThufrufRu4p.org>,
    paul j <> wrote:

    > > Add "display:block" to the css definition
    > >
    > > Change <div class="topleft"></div>
    > >
    > > to
    > >
    > > <a class="topleft"></a>
    > >
    > >
    > > later...

    >
    > That works, but it isn't clickable...adding "href" to it causes it to fail
    > validation.


    How will visitors without the ability to see images be able to use your
    site?

    --
    Kris
    <> (nl)
     
    Kris, Dec 20, 2004
    #7
  8. paul j

    paul j Guest

    On Mon, 20 Dec 2004 22:05:56 +0100, Kris wrote:

    > In article
    > <11v6tufyi0whn$.dlg@P7Ax8zefAz8re8ranuGa9rebruMUdruPHeYaPrabru9haSE5r56r
    > eThufrufRu4p.org>,
    > paul j <> wrote:
    >
    >>> Add "display:block" to the css definition
    >>>
    >>> Change <div class="topleft"></div>
    >>>
    >>> to
    >>>
    >>> <a class="topleft"></a>
    >>>
    >>>
    >>> later...

    >>
    >> That works, but it isn't clickable...adding "href" to it causes it to fail
    >> validation.

    >
    > How will visitors without the ability to see images be able to use your
    > site?


    Making an image a link renders the site unnavigable?
    --
    Up from Third Base to Huntington
    They sang another victory song...........
     
    paul j, Dec 20, 2004
    #8
  9. paul j

    Kris Guest

    In article
    <6xvtadh6k2up$.dlg@P7Ax8zefAz8re8ranuGa9rebruMUdruPHeYaPrabru9haSE5r56re
    ThufrufRu4p.org>,
    paul j <> wrote:

    > >>> <a class="topleft"></a>
    > >>>
    > >>>
    > >>> later...
    > >>
    > >> That works, but it isn't clickable...adding "href" to it causes it to fail
    > >> validation.

    > >
    > > How will visitors without the ability to see images be able to use your
    > > site?

    >
    > Making an image a link renders the site unnavigable?


    No. When using an appropriate alternative text on the image, those users
    are catered for. However, how would you set an alternative text on a
    background image?

    --
    Kris
    <> (nl)
     
    Kris, Dec 20, 2004
    #9
  10. paul j

    Neal Guest

    paul j wrote:

    > .topleft {
    > background-image: url(topleft.jpg);
    > width: 847px;
    > height: 204px;
    > }
    >
    > [---]
    >
    > <div class="topleft"></div>


    To have a link, you need two things. An anchor, and content to click.
    Right now you have neither.

    Within the div you should include an anchor link, and then the image you
    want clicked as the content. Or, if you really have to have it in the
    background, use a transparent image in the content, same size as your div
    (margin:0;padding:0; as well). In either case, the image's alt value
    will be what you want no-image users to encounter as link text.

    Try something like this, not tested (and BTW "topleft" is cruddy style.
    I'll use "logo" because that's what this is):

    CSS

    ..logo {
    background-image: url(topleft.jpg);
    width: 847px;
    height: 204px;
    }

    ..logo a img {
    margin: 0;
    padding: 0;
    }

    And HTML

    <div class="logo">
    <a href="index.html">
    <img src="transparent.png" height="204" width="847" alt="Logo Text Goes
    Here">
    </a>
    </div>
     
    Neal, Dec 20, 2004
    #10
  11. In article
    <cqgm8dr9t0hq.dlg@P7Ax8zefAz8re8ranuGa9rebruMUdruPHeYaPrabru9haSE5r56reT
    hufrufRu4p.org>, paul j () dropped a +5 bundle
    of words...

    > Is this possible?


    Not with a background image.

    >
    > I have a large graphic as a header image which I would like to make
    > "clickable" so that visitors can return to the main page but I can't figure
    > out how.
    >
    > Any thoughts?


    <a href="yourpage.html"><img src="yourpic.gif"/></a>



    --
    Starshine Moonbeam
    mhm31x9 Smeeter#29 WSD#30
    sTaRShInE_mOOnBeAm aT HoTmAil dOt CoM
     
    Starshine Moonbeam, Dec 23, 2004
    #11
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Kevin Spencer

    Re: Link Link Link DANGER WILL ROBINSON!!!

    Kevin Spencer, May 17, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    891
    Kevin Spencer
    May 17, 2005
  2. Jean-Louis Crouzet

    Table td with background image & link & image

    Jean-Louis Crouzet, Jul 21, 2005, in forum: HTML
    Replies:
    4
    Views:
    1,649
    Jean-Louis Crouzet
    Jul 23, 2005
  3. jc
    Replies:
    3
    Views:
    1,756
  4. jc
    Replies:
    1
    Views:
    1,385
    Neredbojias
    Mar 19, 2008
  5. Dj Frenzy
    Replies:
    3
    Views:
    325
    Robert
    Feb 10, 2004
Loading...

Share This Page