SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    319
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    sprite hides behind image

    So, I performed a sprite on a button but when I tried to put that button over an image it gets hidden behind the image. So, what's the trick to allowing a sprite to sit on top of an image.

    Sorry, I tried to post and image of the example, but for some reason the editor kept giving me an error.

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>

    <style TYPE="text/css">

    #Container {

    width:300px;
    height:250px;
    }

    img {
    border:none;
    }

    #BIGimage {
    margin-top:0%;
    border:none;
    }

    #ButtonImg{
    margin-left:20%;
    margin-top: -5%;


    }


    a.HoverOver {
    display: block;
    width: 173px;
    height: 47px;
    text-decoration: none;
    background: url("BUTTON sprite.png");
    }

    a.HoverOver:hover {
    background-position: 174px 0;
    }




    </style>


    </head>

    <body>

    <div id="Container">





    <div id="BIGimage">

    <a href="http://www.utahlibertylaw.com/" target="_blank"><img src="UtahLibertyLawImg.png" /></a>

    </div> <!--BIGimage-->

    <div id="ButtonImg">

    <a href="http://www.utahlibertylaw.com/" target="_blank" class="HoverOver" title="Free Consultation button"></a>

    </div> <!--ButtonImg-->

    </div><!--container-->


    </body>
    </html>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    If you want the sprite to sit over the top of text, you need to place it in something like a span element that is absolutely positioned over the text. Here is an example (it's not a sprite, but works the same way):

    http://www.pmob.co.uk/temp/headerreplacement3.htm

  3. #3
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    319
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't want it to sit on top of text. I want the button to sit on top of another image. I wish I could upload the photo to show but I keep getting an error message.

  4. #4
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    319
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The text and button are one image

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    I think I misread your question. But it's not clear what you are trying to do. An image over an image? That makes no sense. Do you mean that you want to use an image for a link but to have that image change on hover? That's quite easy, and it's what a sprite is for. BUT ... in a sprite, both the normal state and the hover state are part of the same image. You just shift the position of the background image on hover.

    Firstly confirm that this is what you want, and we can explain further if that's the case.

  6. #6
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    319
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes so I have a button which I want people to click on when to take them to another website. The button changes when you hover over it and its working great with the use of a sprite. However, when I try to place that button over the background image that I want to set it on then the button gets hidden behind the image. The order of the html doesn't matter, either way the button gets hidden.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    This is still a bit confusing, but I'm guessing that you have a button, inside a bigger container that has a background image? In that case, place that bigger image as a background on the div that contains the button.

    If that doesn't make sense, make up an image of what you are trying to do and post it here. If you are having trouble posting an image, use the "Manage Attachments" facility, or just post a link to an image online somewhere.

  8. #8
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    319
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks changing that big image to a background image worked. However, now I have an issue of making a background image clickable. I don't know if I've seen this before.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    You can't do that per se, but you can fake it. BUT ... why? You want a clickable button ... inside a div that is separately clickable? This is not making sense at all.

  10. #10
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    The code posted above is horribly inaccessible.

    Image text can be made big and blurry, but cannot be enlarged like real text... of which there is none.

    That aside, if you show an example of somewhere working the way you want, or can throw up a fake temp version page with real code (and real images) we can play with, we can show how it can be coded (and accessible too).


Tags for this Thread

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
  •