Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8

Thread: CSS Rollovers

  1. #1
    New Coder
    Join Date
    Jul 2007
    Location
    Yorkshire, UK
    Posts
    54
    Thanks
    1
    Thanked 0 Times in 0 Posts

    CSS Rollovers

    Hi,

    I have been doing CSS for a few months now on and off (well the web design has been on and off).

    Anyway, I want to start using the CSS rollover technique for a website I am working on. I have found some good tutorials for it and understand it etc. But I have a question.

    When I rollover one image, I want it to make another image visible (i.e. visibility:visible) is this possible at all in CSS or should I look into Javascript rollovers etc.

    Thanks
    Last edited by Blekk; 07-09-2007 at 04:20 PM.

  • #2
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Do you mean you want the image to change to another image, or a image to appear elsewhere on the page, when the first image is rolled over?

    For the first method this is easy with links as you can just use a background-image in the a and a:hover states that is different, so when the link is hovered a different image is shown.

    You can use just the :hover psuedo class on objects, but this will not work in IE6-

    Instead of visibity, you would use display: hidden; and display: block to hide and show certain elements.
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #3
    New Coder
    Join Date
    Jul 2007
    Location
    Yorkshire, UK
    Posts
    54
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ok thanks but what I meant was that I want it to show another image.

    Say image1 was rolledover by the user, I want this to change image2 to not be hidden.

    So what I am asking is, can you reference other image's properties in another image's method (if that is the right word)?

    Thanks.

  • #4
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    http://www.motuweb.com/techstuff/2x_...lover_demo.htm

    This might help in that case! And try the link on that page to Eric Meyers too!
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #5
    New Coder
    Join Date
    Jul 2007
    Location
    Yorkshire, UK
    Posts
    54
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ok thanks, I'll check it out in a moment.

  • #6
    Regular Coder Donkey's Avatar
    Join Date
    Sep 2003
    Location
    Blackfield UK
    Posts
    312
    Thanks
    1
    Thanked 36 Times in 36 Posts
    Do you mean something more like this
    http://www.test-area1.doncaz.co.uk/cssrollover.html

    This is a method I came up with a while ago, but I haven't used it on a site yet.

    This version works for stand alone image replacement, but the code could be adapted to work as an unordered list for a navigation bar. If it was just a small number of pages to navigate I would just use the divs though.
    " 90% of everything is crud" - Theodore Sturgeon
    Filthy Beast - a 60's Rock Band

  • #7
    Regular Coder oldcrazylegs's Avatar
    Join Date
    Feb 2004
    Location
    East Moline Illinois USA
    Posts
    414
    Thanks
    4
    Thanked 5 Times in 4 Posts
    Here is a really cool way to do rollovers with a single image

    No Preload CSS Rollovers

    http://www.wellstyled.com/css-nopreload-rollovers.html

  • #8
    New Coder
    Join Date
    Jul 2007
    Location
    Yorkshire, UK
    Posts
    54
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks Donkey and Oldcrazylegs, but what I was looking for was more like what ahallicks gave me. As I want to rollover image1 (for example) and it changes the state of image2. Not to rollover image1, and it just changes the image of image1, if you know what I mean.


  •  

    Posting Permissions

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