css rollover help

Discussion in 'CSS' started by coldclimber, Jul 21, 2007.

0
  1. #1
    I have created a site that uses rollover images as the main links but what i would like to know is how i make the active link the same as the hover link so that when i go to the page that link remians the correct image instead of going back to the image before rollover.

    I have tried this in css and created a clear png as the link image and then assigned the class to is from the style sheet like this,

    .dog a{
display:block;
background-image:url(images/1.jpg);
background-position:top;
}
.dog a:hover{
background-image:url(images/index_03.jpg);
display:block;
background-position:top;
}
.dog a:active{
background-image:url(images/index_03.jpg);
display:block;
background-position:top;
}
    Code (markup):
    I am not sure if this is the right way about it but i need the rolloever image to remain high lighted on the active page :confused:
     
    coldclimber, Jul 21, 2007 IP
  2. kimberlybarryd

    kimberlybarryd Peon

    Messages:
    45
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    you need to use a current link. <li class="current">page</li> and style the
    .current {
    background-image: etc
    }
     
    kimberlybarryd, Jul 22, 2007 IP
  3. Webray

    Webray Active Member

    Messages:
    469
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    58
    #3
    I think you're looking for this:

    .dog a:visited{
    background-image:url(images/index_03.jpg);
    display:block;
    background-position:top;
    }
     
    Webray, Jul 22, 2007 IP
  4. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #4
    <a id="dog" href="#foo">dog.</a>

    a#dog {
    background:url(../images/normal.jpg) no-repeat;
    display:block;
    width:100px; height:100px;
    }

    a#dog:hover {
    background:url(../images/rollover.jpg);
    }
     
    soulscratch, Jul 22, 2007 IP
  5. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I actually suggest you use a single image for the rollover, so you don't have to waste the server's time grabbing multiple images, have it send those images to the browser, and then waste the user's time as the browser downloads them (as can happen with dialup users such as myself).

    Paul O'Brien has a wonderful example of this (bear in mind his example supports Mac-IE, which is a dead browser; if you want to use a SPAN instead of EM, feel free to).

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

    The only thing I'd do to give the menu item the effect you want is to add an ID of "current-page" (or "current", or whatever value works best for you) to the list item, and then style the image's position so that the hover state is present by default. But then again, I'd set the image to have three states (static, current, hover) so that there's some variation and you don't confuse your site's visitors. :)
     
    Dan Schulz, Jul 22, 2007 IP