1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Javascript vs CSS, for mouse over, mouse out

Discussion in 'CSS' started by scutari, May 9, 2008.

  1. scutari

    scutari Peon

    Messages:
    431
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #21
    Well i tried out today, and it worked ok with the background image on the <li> element, but there are still problems to deal with this way. I used background-positioning bottom and top. But still need someone o give any explanation on all about. I used that spricing technique.
    SEMrush
     
    scutari, May 14, 2008 IP
    SEMrush
  2. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #22
    wd:
    How come the li isn't holding one end and the a holding the other?

    To get them both to hover you'd need to get both to have hover CSS like
    li {
    blah, background image
    }
    a {
    blah, the other background image
    }
    li:hover {
    change li's part of background image (remember IE6 won'tr hover these)
    }
    li a:hover {
    change a's part of the background image
    }

    something like on this page http://www.filamentgroup.com/lab/styling_the_button_element_with_sliding_doors/
    or this one (but screw the JS, it's just IE (and FF) keeping the focus on the element, click elsewhere on the page and it's gone): http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html
    and as far as I know you can use one of the li's in place of their span (they use a span cause it's a loose link and not part of a list menu).

    *edit maybe I'll have to make one of these myself, as I don't normally use sliding doors in menus... then I'd prolly see the problems better.
     
    Stomme poes, May 15, 2008 IP
  3. wd_2k6

    wd_2k6 Peon

    Messages:
    1,742
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #23
    Sorry for the late reply on this but I needed to use it. OK what I am doiing is the following:
    As you said have the LI hold the right part of the image and the A hold the left part
    but the A is set to display block, therefore I have to set 10px right padding to show the right part of the background image for the LI.
    However this means that this 10px padding is obviously not clickable! How would i go about this?

    Maybe it's best to stick to using the Bold tags to hold the right part of the image? Would give me some relief if i didn't need them though!!
     
    wd_2k6, Jun 4, 2008 IP
  4. iamben

    iamben Active Member

    Messages:
    116
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    73
    #24
    Don't over complicated it.

    Set your sizes in the LI style, then set the LI A as a block, with a width and a height, give it a background image that's double the width or height of the styled A and set as position 0 0. On the LI A:hover just change the background image position so it shows the other half of the image.

    It's pretty simple, really.

    Hit me up in a PM if you get really stuck and I'll help you out.
     
    iamben, Jun 4, 2008 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,136
    Likes Received:
    1,697
    Best Answers:
    239
    Trophy Points:
    515
    #25
    Just to stir the pot
    http://battletech.hopto.org/html_tutorials/tristate/

    directory unlocked so you can see the bits and pieces.

    IamBen hit it on the head, don't overcomplicate - though my advice is to toss a sandbag span in (just like the examples stomme poes linked to) and avoid styling the LI. Putting style on the LI can lead to IE headaches via the 'staircase effect' - I just set them to display:inline and avoid doing anything else with them.
     
    deathshadow, Jun 4, 2008 IP
  6. HDaddy

    HDaddy Active Member

    Messages:
    287
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    60
    #26
    I´ve used this a lot and love it!. you can do great menus with it.
     
    HDaddy, Jun 5, 2008 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,136
    Likes Received:
    1,697
    Best Answers:
    239
    Trophy Points:
    515
    #27
    No, it's just INCORRECTLY called image sprites by ALA. Sprites are images that move around the screen - while old 8-bit games and many recent games may store their sprites in a single file in the same manner we are discussing, since the image itself does NOT move in our implementations it is not a sprite, just a sliding animation. IF you assigned it position:absolute and started moving it's render box around the screen with javascript (like that stupid falling snowflake script that crops up around the holidays), THEN it's a sprite.
     
    deathshadow, Jun 5, 2008 IP
  8. wd_2k6

    wd_2k6 Peon

    Messages:
    1,742
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #28
    I'm not overcomplicating it I was just seeing if I needed the extra element, for example like you have the SPAN, I have a B tag.
    The thing is I am only using background images, left corner and right corner, I don't need to cover up the text as I want this to be shown, so is the extra element still required to hold the right edge background image?
     
    wd_2k6, Jun 9, 2008 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,136
    Likes Received:
    1,697
    Best Answers:
    239
    Trophy Points:
    515
    #29
    If they are going to all be the same width - no. If they are going to all be different widths, yes.

    At least, until CSS3 is real world deployable. (so figure 8-10 years)
     
    deathshadow, Jun 9, 2008 IP
  10. wd_2k6

    wd_2k6 Peon

    Messages:
    1,742
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #30
    OK cheers, CSS3 better be worth it's wait, nothing should ever take so long as it has done imo especially if proper structures are set up i.e analysis design testing etc......
     
    wd_2k6, Jun 10, 2008 IP
  11. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #31
    Lawlz, or just use Safari and pretend the future is here (although I actually don't know how well Safari does it, but it does support more-than-1 background image per element).

    Make a bunch of menus and play with them until they work. Then make more. It'll become second nature.
     
    Stomme poes, Jun 10, 2008 IP
  12. wd_2k6

    wd_2k6 Peon

    Messages:
    1,742
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #32
    Yep i'll always refer to these examples when creating a menu anyways just to make sure, but I like to think i'm getting better at it.

    Do you follow football Stomme? Good win for the Netherlands yesterday!!
     
    wd_2k6, Jun 10, 2008 IP
  13. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,136
    Likes Received:
    1,697
    Best Answers:
    239
    Trophy Points:
    515
    #33
    Eh, I'm just basing the timeframe on how long it took for CSS2 to be 'deployable'. The specification for CSS 2 was locked in back in '98, yet nobody considered it real world deployable 4-5 years ago when gecko was an unstable tinker toy NOBODY took seriously except for people stuck on *nix, firefux wasn't even a twinkle in a floss fanboy's eye, konqueror was a joke, and IE6 was the most standards compliant browser to date. (which it was in it's own time - that time just lasted too damned long)
     
    deathshadow, Jun 11, 2008 IP
  14. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #34
    Yeah but it seems there are more standards-aware developers out there, who maybe could demand vendors keep up with day (MS excepted, as their developement time is just too damn slow it seems).

    wd: while I don't drink enough to watch regular football, I saw some of it at work the next day, since the night of the game I saw some fans walking home. They weren't cheering or being loud or anything, so I assumed we'd lost (and it was against Italians, after all). They must have just been tired. Imagine my surprise!

    So now we've got these shirts with a lion's face on them, and you can open this flap and turn the lion's mouth open and full of teeth. Google "brulshirt". Goofy football fans...

    lawlz, a commercial: http://www.youtube.com/watch?v=PWSvUIOprAE&feature=related
     
    Stomme poes, Jun 12, 2008 IP
  15. BeetleB

    BeetleB Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #35
    Give the <div an id to handle the image swap. Put any other formatting in your class.
    _____________
    <div id=idName></div>

    ______________

    #idName{
    background-image:url(../images/test.jpg);

    }
    #idName:hover {
    background-image:url(../images/test2.jpg);
    }


    nice and clean
     
    BeetleB, Jun 14, 2008 IP
  16. iamben

    iamben Active Member

    Messages:
    116
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    73
    #36

    Use the same image and shift its position, otherwise you could end up with a loading flicker.
     
    iamben, Jun 14, 2008 IP
  17. scutari

    scutari Peon

    Messages:
    431
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #37
    Yeah really?

    That would probably work but if you try to validate your page you will get an error telling that you cannot use same id for all menu divs.

    Got it?
     
    scutari, Jun 20, 2008 IP