SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS "minimenu" over a image when mouse over

    Hi,

    I'm new to these forums and right away asking for help

    I'm creating xhtml & css for music store. I want to create few buttons over cover image - which are shown only when mouse is over a cover image.

    I also need these buttons to be hover images (color chance on hover).

    Here is image to show what I'm looking for (hover state):


    (Don't worry about design - this is just a quick example)

    Only cover image is shown when not hovering that cover. When hovering - bottom menu is shown. And when hovering one of the buttons (listen or buy) they get their hover state (not an important feature). Also clicking image (not any of the buttons) should be possible and takes user to different url than listen or buy buttons.

    Any ideas or hints? It should be pure CSS and browser compatibility should be at least IE6-7 (ie6 doesn't support transparent png, but it's ok), FF, Opera. For older & other browsers it should be work at least that cover is clickable.
    Last edited by apeisa; Jun 8, 2007 at 07:49. Reason: typos

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It'd be the same concept as a dropdown menu. When you hover over a list item (activated with li:hover), the submenu is revealed.

    In your case, you'll be hovering over the element that contains the image (because images can't contain other content). You either hide the hidden content with display: none and then change it to display: block on :hover or you move it offscreen to start with and then bring it back into view on :hover.

    You'll need javascript or the whatever:hover to get it to work in IE<=6 though.

  3. #3
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I made bit of testing and I liked how easily that could be done with adjacent sibling selector... That way I can use a:hover state (which works in IE6)... But of course adjacent sibling selectors doesn't work in IE, so that's about it

    This is not very important issue, I can always put play & order buttons under the image. Just trying to save some space and test different possibilities. Maybe I go with little javascript here. Or I might go with this version - IE users have to go album page to start playing samples... Don't know yet. These numbers about global stats aren't very promising. In Finland I think latest number for Mozilla is 41%.

    I made simple version of this if someone is interested in. Only one button (more could easily be done) in this version.

    http://mohikaani.com/test/pick_test.html

    XHTML:
    Code:
    <div class="pick">
       <a href="album_info.php" title="More info about this album"  class="cover"><img src="images/1534.jpg" alt="Young Desire - Lapko" /></a>
       <a href="listen.php" title="Listen this album" class="listen">Listen</a>
       <h3 class="title">Young Desire</h3>
       <h3 class="artist">Lapko</h3>
    </div>
    CSS:
    Code:
    div.pick img {
        width: 200px;
        height: 200px;
    }
    
    div.pick a.cover {
        width: 200px;
        height: 200px;
        display: block;
    }
    
    div.pick a.cover:hover + a.listen {
        display: block;
    }
    
    div.pick a.listen {
        text-indent: -9999px;
        background: transparent url(../images/listen.png) no-repeat;
        display: none;
        float: left;
        text-decoration: none;
        position: relative;
        height: 30px;
        width: 200px;
        top: -30px;
        margin-bottom: -30px;
    }
    
    div.pick a.listen:hover {
        display: block;
    }

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could put a <div> around the links. Then you could apply the hover rule to that instead of the first link. That way you wouldn't need the adjacent sibling selector.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I remember correctly, :hover works only on <a> in IE6...?

    So that doesn't chance this situation... Now I have less markup and same result.

  6. #6
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, but you could use whatever:hover, like Tyssen suggested, to make :hover work on more elements in IE5-6/Win.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  7. #7
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep, that's true.

    Maybe I punish IE6 users and give them what they deserve, and save extra work from my side

    I seem to do that a lot in my own projects (clients use always IE6 ) - save my own time and not to worry so much about IE6 - just that it works and is accessible. Users with better browsers get better browsing experience.


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
  •