SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    396
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Image background changing if it's a link

    Hi guys,

    I've currently got a few images being displayed in a simple list, and want it so that if it's a link, it'll change the background location of that image, however I'm not having much luck.

    Here's my current CSS code:
    Code CSS:
    .managers_icons li{
    	background: url('../img/managers_info.png') no-repeat 0 -18px;
    	float: left;
    	margin: 0 5px;
    	width: 18px;
    	height: 18px;
     
    }
    .managers_icons li a{
    	display: block;
    	height: 18px;
    	background-position: 0 0;
    }
    .e_info{background-position: 0 0;}
    .e_notes{background-position: 0 -18px;}
    .e_pdr{background-position: 0 -36px;}

    For some reason the background position that's set where I initially define the background image (.managers_icons li) works just fine, and any changes made there is reflectec accordingly.

    Anything after that just doesn't change the background image at all, which is really odd. I know it's taking the other attributes on fine because for example if I change .managers info li a to have 5px padding, it's added to any listed element that's linked. Likewise the bottom ones where it's defined seperately, adding padding for example is fine, but the background image won't change.

    fwiw, here's my HTML code too:
    Code HTML4Strict:
    		<ul class="managers_icons">
    			<li class="e_info"><a href="#">Employee Information</a></li>
    			<li class="e_notes">Employee Notes</li>
    			<li class="e_pdr">Employee e-PDR Information</li>
    		</ul>

    And finally, the image:


    And help would be ace, thanks.

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry if this doesn't work as I haven't tested it but the reason why you're having problems is because you're initially applying the image to the <li> and positioning it correctly but then wrongly expecting the <a> to trigger the :hover and also expecting the background-image from the <li> to be passed onto the <a> which won't work

    As I've mentioned, I've not tested this code, but I suspect you're after something like this:

    CSS
    Code:
    .managers_icons li {
        float: left;
        margin: 0 5px;
        list-style-type: none;
    }
    .managers_icons span {
        float: left;
        min-height: 18px;
        background-color: #FFF;    
    }
    .managers_icons li a {
        background: url(../img/managers_info.png) no-repeat 0 -18px;
        height: 18px;
        display: block;
        padding-left: 20px;
    }
    .e_info a:hover {background-position: 0px 0px !important;}
    .e_notes a {background-position: -18px -18px !important;}
    .e_notes a:hover {background-position: -18px 0px !important;}
    .e_pdr a {background-position: -36px -18px !important;}
    .e_pdr a:hover {background-position: -36px 0px !important;}
    HTML
    Code:
            <ul class="managers_icons">
                <li class="e_info"><a href="#"><span>Employee Information</span></a></li>
                <li class="e_notes"><a href="#"><span>Employee Notes</span></a></li>
                <li class="e_pdr"><a href="#"><span>Employee e-PDR Information</span></a></li>
            </ul>
    Last edited by DaveWoods; Sep 25, 2007 at 09:00. Reason: Tested code and corrected...

  3. #3
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    396
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Huge thanks for the reply, certainly an improvement from my code, however a couple of things:

    1) I need them displayed inline and for some reason, using that ^ no matter where I add the inline attribute it isn't working
    2) I need links to view the different image as opposed to actual hovering, so if the item is linked, it'll use the top row (darker) and if it isn't linked it'll use the bottom row (lighter) to appear as if it's inactive.

    Once again huge thanks, I'm going to have a mess around with the code now and hope I don't break it too much, any other help would be great though, cheers

    Edit: Manged to resolve #1 by adding a width to li a, which if I was going on a hover system would be spot on, but I just need to work out how to do it so that ones without links appear inactive now.

  4. #4
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    396
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Everything seems to be working, except for the a attribute on the end, not sure what I'm doing wrong.

    Code CSS:
    .e_info {background-position: 0px -18px !important;}
    .e_info a {background-position: 0px 0px !important;}
    .e_notes {background-position: -18px -18px !important;}
    .e_notes a {background-position: -18px 0px !important;}
    .e_pdr {background-position: -36px -18px !important;}
    .e_pdr a {background-position: -36px 0px !important;}

    Even if I change it to a:hover or whatever, it isn't working at all :/

  5. #5
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, misunderstood your problem. Try the following code.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title>Icon example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    .managers_icons li {
        float: left;
        margin: 0 5px;
        list-style-type: none;
    }
    .managers_icons span {
        float: left;
        min-height: 18px;
        background-color: #FFF;    
    }
    .managers_icons li{
        background: url(../img/managers_info.png) no-repeat 0 -18px;
        height: 18px;
        display: block;
        padding-left: 20px;
    }
    .managers_icons li a {
        background: url(../img/managers_info.png) no-repeat 0px 0px;
        height: 18px;
        float: left;
        padding-left: 20px;
        margin-left: -20px;
        cursor: pointer;
    }
    .e_info {background-position: 0px -18px !important; }
    .e_notes {background-position: -18px -18px !important;}
    .e_pdr {background-position: -36px -18px !important;}
    
    .e_info a {background-position: 0px 0px !important;}
    .e_notes a {background-position: -18px 0px !important;}
    .e_pdr a {background-position: -36px 0px !important;}
    
    </style>
    </head>
    <body>
    <ul class="managers_icons">
        <li class="e_info"><a href="#"><span>Employee Information</span></a></li>
        <li class="e_notes"><span>Employee Notes</span></li>
        <li class="e_pdr"><span>Employee e-PDR Information</span></li>
    </ul>
    </body>
    </html>
    Now, if you add a link around any of the <span>'s as I've done with the first one, then the active state of the icon should be shown.

    Hope that helps?

  6. #6
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    396
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Huge thanks for the code again, really appreciate it, was just about to post that I managed to resolve the problem though, I moved the background-image from li a to li and didn't realise that it wouldn't apply to both when setting the background of the linked elements, if that makes sense.

    Either way, it's working now ^ So many thanks again for the help!

  7. #7
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    396
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    -edit: ignore, sorry-

  8. #8
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not sure what I'm ignoring? Does you code not work, is mine not doing what you expect etc?

  9. #9
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    396
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I did a post saying "Argh! It's not working in IE" or similar, then I realised it was actually my HTML that was screwed, and not the CSS

    Thanks again, it's all fine now!

  10. #10
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    aah, makes sense now, I hadn't seen the original post

    my code was tested in IE6+, Firefox, Opera and Safari so shouldn't have been any problems

  11. #11
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    396
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Awesome, thank you once again


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
  •