Results 1 to 11 of 11

Thread: Rollovers and CSS

  1. #1
    Senior Member Kezzer's Avatar
    Join Date
    Sep 2003
    Posts
    4,863
    Thanks
    12
    Thanked
    5 times in 5 posts

    Rollovers and CSS

    I'm trying to accomplish UNIQUE rollovers in CSS yet can't seem to achieve it. Every tutorial i see works for links which have exactly the same rollover effect.

    I'm trying to swap an image, so far in the stylesheet i have

    #home a:hover {
    background: url('images/home_over.gif'); }

    and then i've done <div id="home"><a href="#"><img src="images/home.gif" /></a></div>

    As well as applying the id directly to the image

    Anyone got any ideas why it's not working?

    Cheers

  2. #2
    Comfortably Numb directhex's Avatar
    Join Date
    Jul 2003
    Location
    /dev/urandom
    Posts
    17,074
    Thanks
    228
    Thanked
    1,027 times in 678 posts
    • directhex's system
      • Motherboard:
      • Asus ROG Strix B550-I Gaming
      • CPU:
      • Ryzen 5900x
      • Memory:
      • 64GB G.Skill Trident Z RGB
      • Storage:
      • 2TB Seagate Firecuda 520
      • Graphics card(s):
      • EVGA GeForce RTX 3080 XC3 Ultra
      • PSU:
      • EVGA SuperNOVA 850W G3
      • Case:
      • NZXT H210i
      • Operating System:
      • Ubuntu 20.04, Windows 10
      • Monitor(s):
      • LG 34GN850
      • Internet:
      • FIOS
    use a.home:hover and so on

    e.g. from the guildwars.HEXUS.org stylesheet:

    a.navigate:link, a.navigate:visited {
    text-decoration: none;
    color: black;
    }

    a.navigate:hover {
    background-color: #9b7;
    }

  3. #3
    Treasure Hunter extraordinaire herulach's Avatar
    Join Date
    Apr 2005
    Location
    Bolton
    Posts
    5,618
    Thanks
    18
    Thanked
    172 times in 159 posts
    • herulach's system
      • Motherboard:
      • MSI Z97 MPower
      • CPU:
      • i7 4790K
      • Memory:
      • 8GB Vengeance LP
      • Storage:
      • 1TB WD Blue + 250GB 840 EVo
      • Graphics card(s):
      • 2* Palit GTX 970 Jetstream
      • PSU:
      • EVGA Supernova G2 850W
      • Case:
      • CM HAF Stacker 935, 2*360 Rad WC Loop w/EK blocks.
      • Operating System:
      • Windows 8.1
      • Monitor(s):
      • Crossover 290HD & LG L1980Q
      • Internet:
      • 120mb Virgin Media
    Also you need to set the background for the non rolled over link, what youre doing there may very well be changing the background, but the original picture is in the div, therefore on top of it.

  4. #4
    Senior Member Kezzer's Avatar
    Join Date
    Sep 2003
    Posts
    4,863
    Thanks
    12
    Thanked
    5 times in 5 posts
    Yeh i could fix that by changing the z-index but alas no luck!

    Now i have the following in the stylesheet;

    a.home:link, a.home:visited {
    text-decoration:none;
    background-image:none;
    background-color:transparent;
    }

    a.home:hover {
    background: url('images/home_over.gif') no-repeat center;
    }

    and in the web page file;

    <a class="home" href="#"><img src="images/home.gif" /></a>

  5. #5
    HEXUS.net Webmaster
    Join Date
    Jul 2003
    Location
    UK
    Posts
    3,108
    Thanks
    1
    Thanked
    0 times in 0 posts
    You can't change the background of an image, it doesn't have one. You're changing the background of the hyperlink and since it wraps perfectly round the image you're probably changing the background but can't see it. You need to set the original image as a background rather than a foreground image e.g.

    Code:
    #home a {
    background-image: url(images/home.gif);}
    #home a:hover {
    background-image: url(images/home_over.gif;}
    
    <div id="home"><a href="#"> </a></div>
    The problem with that is that you will get a very small link so your best bet may be to put a transparent gif (ugh) in between the <a> tag which is the same height and width as the image for the background

  6. #6
    Senior Member Kezzer's Avatar
    Join Date
    Sep 2003
    Posts
    4,863
    Thanks
    12
    Thanked
    5 times in 5 posts
    Ah sweet, that works, but now the background image doesn't display properly.

    Surely there's a tidier way to do this?

    The website is at http://www.kezzer.co.uk/midcarsoncoalition/

    The links on the top right are the ones i'm trying to get to work via rollover. That version isn't the spliced version but you can see what i'm trying to do with it. Any easier ideas? Perhaps place a box over the top of the nav and just place new images on top of that whole image?

  7. #7
    Treasure Hunter extraordinaire herulach's Avatar
    Join Date
    Apr 2005
    Location
    Bolton
    Posts
    5,618
    Thanks
    18
    Thanked
    172 times in 159 posts
    • herulach's system
      • Motherboard:
      • MSI Z97 MPower
      • CPU:
      • i7 4790K
      • Memory:
      • 8GB Vengeance LP
      • Storage:
      • 1TB WD Blue + 250GB 840 EVo
      • Graphics card(s):
      • 2* Palit GTX 970 Jetstream
      • PSU:
      • EVGA Supernova G2 850W
      • Case:
      • CM HAF Stacker 935, 2*360 Rad WC Loop w/EK blocks.
      • Operating System:
      • Windows 8.1
      • Monitor(s):
      • Crossover 290HD & LG L1980Q
      • Internet:
      • 120mb Virgin Media
    Are you just trying to change the colour of the text? Depending how browser compatible you want it to be, i belive there is a transparency option so you could just overlay a block of semi transparent colour.

    HAve you seen the CSS zen garden? THey do pretty much what you need on the nautillus page i think.

  8. #8
    Senior Member Kezzer's Avatar
    Join Date
    Sep 2003
    Posts
    4,863
    Thanks
    12
    Thanked
    5 times in 5 posts
    Nah, i'm trying to change that whole grey bit so it's not transparent, subtle i know but it gives a good effect.

    Yes i've seen CSS zen garden as well ass the multitude of css vaults around

  9. #9
    Treasure Hunter extraordinaire herulach's Avatar
    Join Date
    Apr 2005
    Location
    Bolton
    Posts
    5,618
    Thanks
    18
    Thanked
    172 times in 159 posts
    • herulach's system
      • Motherboard:
      • MSI Z97 MPower
      • CPU:
      • i7 4790K
      • Memory:
      • 8GB Vengeance LP
      • Storage:
      • 1TB WD Blue + 250GB 840 EVo
      • Graphics card(s):
      • 2* Palit GTX 970 Jetstream
      • PSU:
      • EVGA Supernova G2 850W
      • Case:
      • CM HAF Stacker 935, 2*360 Rad WC Loop w/EK blocks.
      • Operating System:
      • Windows 8.1
      • Monitor(s):
      • Crossover 290HD & LG L1980Q
      • Internet:
      • 120mb Virgin Media
    Right then, so yo can get the change over to work? But it screws up the background for the rest of the bar? IE or firefox or both?

    Personnally id have done this:
    Have the image you have now as background for the whole navbar, then line up the rollover images in front of it, but set invisible, visible on rollover.

  10. #10
    Senior Member Kezzer's Avatar
    Join Date
    Sep 2003
    Posts
    4,863
    Thanks
    12
    Thanked
    5 times in 5 posts
    Ok i've had a better idea, the whole area where there's buttons i've cut out completely, then i'm going to use absolute positioning to place new images in the area where the buttons are meant to be. You think that'd work? It'd be pretty difficult as i have to absolute position a load of buttons

  11. #11
    Bigger than Jesus Norky's Avatar
    Join Date
    Feb 2005
    Posts
    1,579
    Thanks
    1
    Thanked
    8 times in 8 posts
    Quote Originally Posted by Iain
    The problem with that is that you will get a very small link so your best bet may be to put a transparent gif (ugh) in between the <a> tag which is the same height and width as the image for the background
    You could use

    Code:
    display: block;
    width: xx;
    height: xx;
    on the <a> tag

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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