SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Nov 2003
    Location
    us
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Headings as images but problem with a href

    Hi,

    im using images for heading for my <H1> tags
    like so

    // html and cdd

    <style>
    #header .pc {
    BACKGROUND: url(images/header.gif);
    }
    #header .pc SPAN {
    DISPLAY: none
    }
    </style>

    <body>
    <div id="header">

    <div class="pc"><a href="/"><span>header text</span></a></div>

    </div>
    </body>

    ... which display the image and not the text however my problem is when you want to click on the image it does nothing

    help ?

  2. #2
    Word Painter silver trophy Shyflower's Avatar
    Join Date
    Oct 2003
    Location
    Winona, MN USA
    Posts
    10,053
    Mentioned
    142 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by tension
    Hi,

    im using images for heading for my <H1> tags
    like so

    // html and cdd

    <style>
    #header .pc {
    BACKGROUND: url(images/header.gif);
    }
    #header .pc SPAN {
    DISPLAY: none
    }
    </style>

    <body>
    <div id="header">

    <div class="pc"><a href="/"><span>header text</span></a></div>

    </div>
    </body>

    ... which display the image and not the text however my problem is when you want to click on the image it does nothing

    help ?
    You can't click on background images... which IMO is one of the nice things about having background images. If you right click it will let you save the background as (blah blah blah) but you can't tie an anchor to it.
    Linda Jenkinson
    "Say what you mean. Mean what you say. But don't say it mean." ~Unknown

  3. #3
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,350
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    you might want to experiment with one of the other image replacement techniques -- see http://www.stopdesign.com/also/articles/replace_text/ for links
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you hide the text with visibility:hidden then it still takes up space in the element. Then all you need to do is make sure you have enough text to cover the width of the background image.

    Something like this should work.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    h1#header {
    background: url(images/pob.gif);
    width:50%;
    }
    h1 img {border:none}
    h1 a {text-decoration:none;width:100%;white-space:nowrap}
    h1#header span {
    visibility: hidden;
    }
    </style>
    </head>
    <body>
    <h1 id="header"><a href="#"><span>header text header text header text</span></a></h1>
    </body>
    </html>
    Paul

  5. #5
    SitePoint Member
    Join Date
    Nov 2003
    Location
    us
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    i used your example, which worked , well sort of. I couldnt get the whole image area to be clickable, just the top section similair to the size of the text thats being replaced. so increased the font size to be larger, which then increased the area to be clicked.

    its seems dodgy, can u specify the exact area to be the hot spot similiar to an image map

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Give your header a height to match the image and then set height:100% and width:100 and display:block on the a element.

    e.g.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    h1#header {
    background:blue url(images/pob.gif);
    width:50%;
    height:65px;
    }
    h1 a {text-decoration:none;width:100%;height:100%;white-space:nowrap;display:block}
    h1#header span {
    visibility:hidden;
    }
    </style>
    </head>
    <body>
    <h1 id="header"><a href="test.htm"><span>header</span></a></h1>
    </body>
    </html>
    You should now only need one word in the span instead of a whole line.

    (Works ok in mozilla1.2, firebird 0.61, opera7 and IE6)

    Paul

  7. #7
    SitePoint Member
    Join Date
    Nov 2003
    Location
    us
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yep that did the trick,

    cheers !


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •