Results 1 to 4 of 4

Thread: CSS trouble with vertical image mouseover

  1. #1
    Join Date
    Jul 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation CSS trouble with vertical image mouseover

    Recently I have made a DIV layout and I want to use image mouseovers for the Navigation, but I can't seem to get it right.

    I understand CSS a little, and I usually learn by hands-on. I just can't seem to get it to work. I have 4 images that I need to work with. There were originally 8, but I placed them together.

    I've been jumping around from site to site trying to learn more about CSS image mouseovers. I would use JS, but for the website I want to post it on has JS disabled.

    Can anyone help me?

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,881
    Thanks
    49
    Thanked 266 Times in 258 Posts
    Blog Entries
    56

    Default

    Is this useful?
    ===
    Arie Molendijk.

  3. #3
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 129 Times in 116 Posts

    Default

    If you could post up your CSS that you're using, I might be able to help. Need to see what the problem is though.
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

  4. #4
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 129 Times in 116 Posts

    Default

    The CSS:
    Code:
    .rollover a, .rollover a:link, .rollover a:active, .rollover a:visited{
    background:url('yourserver.com/image.gif');
    background-repeat:no-repeat;
    width:75px;
    height:50px;
    }
    .rollover a:hover{
    background:url('yourserver.com/image2.gif');
    background-repeat:no-repeat;
    width:75px;
    height:50px;
    }
    The HTML:
    Code:
    <div class="rollover">
    <a href="somewhere.com">Home</a>
    </div>
    Very basic version since you didn't post the code you're working with.
    Last edited by TheJoshMan; 07-20-2008 at 04:56 AM. Reason: forgot sizes
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

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
  •