SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    Serial Publisher silver trophy aspen's Avatar
    Join Date
    Aug 1999
    Location
    East Lansing, MI USA
    Posts
    12,937
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Rounded Overlapping Buttons and Mouse Overs

    If you had a series of rounded overlapping buttons like so:



    ...and wanted to do a mouseover that changed the color of a single button, how would you go about doing it?

    You can't just splice the image into table cells because there are no verticle lines.

    I've thought about not splicing the image up at all but instead using an image map that replaces the entire button strip on a mouse over, with of course the correct button highlighted. However I don't think this is the best way.

    On the same topic, can anyone point me to a rollover script in which IE actually honors the image preloading. IE ignores preloaded images if you do it the standard way.
    Chris Beasley - I publish content and ecommerce sites.
    Featured Article: Free Comprehensive SEO Guide
    My Guide to Building a Successful Website
    My Blog|My Webmaster Forums

  2. #2
    pg for mild peril cow's Avatar
    Join Date
    Mar 2000
    Location
    nevada, usa
    Posts
    636
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    just slice the buttons up as normal, but instead of having just one rollover, you need to have three rollovers for the middle buttons and two rollovers for the outside buttons. this is how i sliced the buttons:

    "There's no justice like angry mob justice!" --Seymour Skinner

  3. #3
    Serial Publisher silver trophy aspen's Avatar
    Join Date
    Aug 1999
    Location
    East Lansing, MI USA
    Posts
    12,937
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, but then it looks bad if one rollover goes before the other.
    Chris Beasley - I publish content and ecommerce sites.
    Featured Article: Free Comprehensive SEO Guide
    My Guide to Building a Successful Website
    My Blog|My Webmaster Forums

  4. #4
    pg for mild peril cow's Avatar
    Join Date
    Mar 2000
    Location
    nevada, usa
    Posts
    636
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the way i do multiple rollovers is to just call them all in the mouseOver statement. i'll try to make a sample menu real quick...
    "There's no justice like angry mob justice!" --Seymour Skinner

  5. #5
    SitePoint Wizard samsm's Avatar
    Join Date
    Nov 2001
    Location
    Atlanta, GA, USA
    Posts
    5,011
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Seems to me this could be done with layers.

    Separate the overlapping shapes into indivisual gifs with transperancy and give:

    bottom layer.... z-index of 1
    bottom layer's rollover.... z-index of 2
    next layer... z-index of 3

    Plus layers always load whether they are visable or not, I think.

    That said, I think the method cow suggested should work fine and with better compatability.

  6. #6
    pg for mild peril cow's Avatar
    Join Date
    Mar 2000
    Location
    nevada, usa
    Posts
    636
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    "There's no justice like angry mob justice!" --Seymour Skinner

  7. #7
    Serial Publisher silver trophy aspen's Avatar
    Join Date
    Aug 1999
    Location
    East Lansing, MI USA
    Posts
    12,937
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, it shows that it loads them in pieces.

    IE has a bug where it does not acknowledge preloaded images. So with every mouse over it downloads the images. If you do three rollovers IE will download the images in order creating a roll like effect. First the left image changes color, then the middle, then the right image. It looks bad.

    Its not that you need to do it all in one js function, the time it takes to execute one function or 3 functions is miniscule and our eyes wouldn't be able to see the difference. The problem is the bug with IE.

    The image rollover needs to be smooth.

    I've though about using layers, and admittedly it could possibly work. However I'm worried about compatibility issues with that as well.

    Oh and for my particular problem I can't use gifs as I'm using gradient images that don't convert well to gif format.
    Chris Beasley - I publish content and ecommerce sites.
    Featured Article: Free Comprehensive SEO Guide
    My Guide to Building a Successful Website
    My Blog|My Webmaster Forums

  8. #8
    SitePoint Wizard geiger's Avatar
    Join Date
    Jul 2001
    Posts
    2,459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you can sort of be cheap and make sure the left button's right side [looking like a "("] is perfectly aligned with the right button's left side [looking like an "O"] Basically, if you get the black border to be thick enough, you can slice right on the black line without cutting off either of the buttons' ends.

    too confusing?

  9. #9
    Serial Publisher silver trophy aspen's Avatar
    Join Date
    Aug 1999
    Location
    East Lansing, MI USA
    Posts
    12,937
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    NO, I understand what you're saying geiger - but that image I through up was just an example. My actual menu is different and doing that wouldn't work with it.
    Chris Beasley - I publish content and ecommerce sites.
    Featured Article: Free Comprehensive SEO Guide
    My Guide to Building a Successful Website
    My Blog|My Webmaster Forums

  10. #10
    SitePoint Wizard samsm's Avatar
    Join Date
    Nov 2001
    Location
    Atlanta, GA, USA
    Posts
    5,011
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by aspen
    IE has a bug where it does not acknowledge preloaded images.
    I'll admit that I am ignorant of this IE problem. Would it be safe for me to assume that IE can keep an image in memory once it loads it... it just is incompatable with standard pre-load techniques?

    Could one hidden layer with all the rollover images avert the preload problem? Most of the incompatability problems I'm aware of with layers have to do with javascript and exact positioning so a hidden layer could just get the images discreetly loaded without too much trouble.
    Just an idea


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
  •