SitePoint Sponsor

User Tag List

Page 3 of 4 FirstFirst 1234 LastLast
Results 51 to 75 of 96
  1. #51
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi Golgotha,
    boy maybe my coffee isn't kicking in yet
    lol

    As Platinum says its only one image and all the work is done here.

    background: url(images/footballjoin.gif) no-repeat 50% -55px;
    The bg image is placed at -55px just allowing part of the image to show.

    Then on hover you move the image up (or down if you want) to show another part of the same image.

    (I just joined the two images together in fireworks to make one big image.)

    a:hover {
    background-position: 50% -0px;
    }
    So now the image moves up and shows a different part of its background. It's quite a simple job to marry up the pieces. Ir's a good effect although the hourglass does display but I don't see a flicker.

    Paul

  2. #52
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    I want the best of both worlds, Im still not satisfied!!
    lol - Just no pleasing some people is there

  3. #53
    + platinum's Avatar
    Join Date
    Jun 2001
    Location
    Adelaide, Australia
    Posts
    6,441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,


    lol - Just no pleasing some people is there
    I'm sure flash does it perfectly well, just ask golgotha

  4. #54
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by platinum
    I'm sure flash does it perfectly well, just ask golgotha [img]images/smilies/wink.gif[/img]
    ouch, pulls the dagger out of his back, Nope Flash can't be spidered so you're screwed!!!

    this technique is really all about pleasing the SE's

  5. #55
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi everyone.

    The flicker is caused by setting "Check for newer versions of the page" to "Every visit to the page" (In IE6: Tools->Internet Options->Temp. Internet files->Advanced and pick from the list.) The best setting is "Automatically" and you shouldn't get any flickering.

    In reality, the options are a bit misleading: it is not "check for every page" it is more like "check for every request". This means that a background image in a :hover will trigger a trip to the server, looking for the new image. The easy fix is to move the :hover image outside the link.

    Example: http://www.redmelon.net/tstme/roll/index2.htm

    I'm told it works fine, someone emailed me about this problem a while ago.

    hth,
    Douglas
    Hello World

  6. #56
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by platinum
    Odd, I honestly don't see any flicker/hourglass whatsoever in IE6 on windows XP, works exactly the same way it does in firebird.
    I see the flicker too, and a pretty long delay in swapping the images, which only proves one thing, the images are getting downloaded every time and not cached. I understand that it does not flicker for *everyone*,
    what we're looking for is a solution that does not flicker for *anyone* and that is instant without delay.

    Paul O'B created this solution that afaik, works for everyone:
    http://www.pmob.co.uk/temp/cssrollover4.htm

  7. #57
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by junjun
    Paul O'B created this solution that afaik, works for everyone:
    http://www.pmob.co.uk/temp/cssrollover4.htm
    While I agree this is the best solution yet, I still don't like the fact that this image is in the anchor. Remember, the whole reason for this rollover technique is to feed the search engines text not images - an image doesn't mean much to an SE, but the words 'website design' do and anchor text is one of the most important things there is to the SEs. If you are just going to use the words Home, About, Contact ect. in your rollovers then you may as well just put the text in the image.

  8. #58
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Golgotha
    http://www.pmob.co.uk/temp/cssrollover4.htm
    While I agree this is the best solution yet, I still don't like the fact that this image is in the anchor.
    First off, that example does use text, not just images.

    Secondly, you could use the code below, and then set the background image on the span, and on the :hover state make the background transparent. Otherwise make it act like the last example I posted.

    Code:
    a:hover span { background-image: none; }
    HTML Code:
    <a><span>Web Design</span></a>
    If you don't want to display the text itself, you could use the techniques described here for replacing header images.

    OTOH, I think that it is best to use an image tag with alt text in a standard <a> tag. Cleaner code, reliable accessability.

    Douglas
    Hello World

  9. #59
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wrong, what is best is to just use text - best meaning best for the search engines.

    that's the point, we're faking it out - We are trying to have just text and yet still have our groovy graphics. In other words, we are trying to have our cake and eat it too.

    Now, we also want our groovy graphics to get cached an not flicker or hourglass.

  10. #60
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep, I hear you. Did my example not work?

    Was I not clear enough for you?

    Douglas
    Hello World

  11. #61
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    to be honest, I haven't tried you example because I am at work and can't- was hoping Paul would.

  12. #62
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm, I can't get it to work in a state that I would be confident to rely on in a real site.

    The only thing I can recommend is to have two menus, one at the start of your content, text, as SEO only stuff (If you descide to hide it totally, you'll have to cross your fingers that you are not marked as a spammer), and one at the end of your content, using this method, and use CSS to position it in your header area (or where ever).

    Douglas
    Hello World

  13. #63
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    UK
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    page
    After much reediting of the images (to fill in the blank space) I have decided to go with the background image re-position method. As this alows the image to be centered in the re-sizing button, without the 'blank' delay and 'flicker'. It also allows me to build the menu out of a Xhtml list.

  14. #64
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi Mediaman,

    I think that will be the best choice to achieve the central resizing that you required (and it'll certainly be quicker than your original method ).

    Paul

  15. #65
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mediaman_12
    As this alows the image to be centered in the re-sizing button, without the 'blank' delay and 'flicker'.
    I get the flicker if I have IE set to "check every time" (as described above).

    Douglas
    Hello World

  16. #66
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi Doug,
    I get the flicker if I have IE set to "check every time" (as described above).
    I get the hourglass flicking on and off very quickly on that page when set to "automatic" and when set to "check every time" the image flicks off completely and takes a second or two to come back. (I assume the default setting for IE is automatic but I suppose it's not guaranteed?)

    It seems that any redisplay or even movement of the background image position causes the image to reload (and the image doesn't seem to get cached).

    Whereas using the foreground image method(http://www.pmob.co.uk/temp/cssrollover4.htm) (with "check every time set") the image does seem initially slow to change but eventually caches and then works instantly.

    So I suppose its down to a matter of choice as there a number of ways to do the same thing all with their own peculiarities

    Paul

  17. #67
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    UK
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well there are some 'unusual' problems now :grr: in OSX on my system at home
    In Safari, I get this (40kb jpeg). On the normal view there is a narrow sliver of the Hover image showing, and on hover the 'tinted non hover image goes behind the text? I can't understand this because the image has the colored bit above the tinted one with a huge gap in between?
    now in IE 5.5 this happens. It's a disaster? The first instance of the list is fine, but the second etc. hasn't accepted the width of the boxes (they 'step' across the page, and off the right hand edge). I thought I had fixed this by using 'Class' instead of 'id' elements, but unfortunately no.
    And as you can see the rules are still shaded in Safari gah!
    I may go back to using a table with the method in Mr Zeldmans book.

  18. #68
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi Mediaman12,

    Sorry to hear of your problems.

    Before you cahnge everything tt might be worth viewing the images in this site :

    http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/

    and see if they work in the browsers you're testing. If they do work then it may be something else causing the problems. On that site it says:
    AFAIK, it works in every CSS2 capable browser (IE5+, Mozilla, Opera, Safari etc.)
    (I've only stated that my examples work in IE6, mozilla 1.2 and OPera7 as I don't have IE5 to test.)

    Hope you find something useful.

    Paul

  19. #69
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    UK
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't remotely understand why it's not working though.
    The images I am moving are all like this one

    The gap in the center is to accommodate the Text image that is in the list on the XHTML page.
    In the css I have it at 'no-repeat 50% -48px' to get it centered and in position for the 'normal' state. In the 'hover' this changes to '50% 25px'. So why the hover acts like it does in Safari is a mystery (hmm maybe if I put a 'no-repeat' in to the hover, but it should keep it from the 'normal' state). The problem in IE is more unusual It doesn't seam to like having more than one instance of the 'sporteventlist' element. Also only the 'type' effects the rollover in IE instead of the whole 'block' element?

  20. #70
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    UK
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Update

    new page
    I have re-done this as a table (which validates) like the example in Mr Zeldmans excellent book (I thought table hight & width wouldn't validate?).
    the good news it now (almost) works in both browsers I have installed on my OSX mac (IE 5.2.2 and Safari), I was also able to get rid of the HR's above and below the buttons with this method.
    The problem is that Safari somehow put's in a repeat of the image above the moved one in the 'hover' state, even though no-repeat is put in the CSS (ideas? The images are jpeg's so putting in more 'padding' the the top of the image in Photoshop would make the image lots bigger).
    Can someone test on various PC browsers please? Thanks

  21. #71
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Can't comment on the mac browsers because I don't have one. I suggest you try the examples from the link in my previous post to see if they react the same way. Then you'll know for sure whether the browser supports them or not before you start messing around with them again.

    I had a problem with IE6 (pc) whre the first 4 images and the last image were the only images that rollover instantly. The other images disappeared and take 2 or 3 seconds to load leaving a blank space while they load.

    I couldn't see anything different about your code for those images so I thought it might be a cache problem. I deleted my cache and now the images rollover instantly.

    In Opera7 some of the images didn't show when first loaded but rolling the mouse over made them appear. Now it works all the time.

    In Opera6 the images don't show at all and don't rollover (but I sort of guessed that would happen). Due to the larger font that OPera6 uses your calendar numbers all run together as one long line.

    Mozilla 1.2 everything ok. Images load and rollover ok. Rest of page looks fine.

    Firebird 0.6.1. All ok.

    Netscape 6.2 images and rollovers work ok however the header is missing. I checked that the shockwave plugin was installed and it says it is. Don't know what the problem is. (Also the calendars spill out of their divs.)

    Hope that's of some use.

    Paul

  22. #72
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    UK
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi Mediaman12,

    Sorry to hear of your problems.

    Before you cahnge everything tt might be worth viewing the images in this site :

    http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/

    and see if they work in the browsers you're testing. If they do work then it may be something else causing the problems. On that site it says:


    (I've only stated that my examples work in IE6, mozilla 1.2 and OPera7 as I don't have IE5 to test.)

    Hope you find something useful.

    Paul
    There is a really bad 'flicker' where there is no image in the background of the above menu in my version of IE6 (now I hav fainally got it working again) on my work PC (It also has the same problem on my 'table backgrounds) link to pic
    UGH! why is this so dificult to get working 100% cross browser

  23. #73
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi Mediaman,

    It seems the background image (in ie6) will produce the hourglass (even if for a fraction of a second) when the image is either loaded or even moved. )As Doug pointed out the settings in IE6 will make it worse if you have it set to "check every time" .)

    The best method of switching images was in my earlier examples (similar to dougs) where the foreground image is hidden (on hover) allowing the background to show through. On most compliant browsers this seems to be flicker free as the background image isn't being redisplayed or moved, it's the foreground image that is hidden. Obviously this didn't allow for the resizing of the images centrally rather than right to left as in my example.

    Whether any version is 100% compatible is doubtful and I think you'll just have to check in each browsers that you want to support to find the best option (sorry).

    There is a really bad 'flicker' where there is no image in the background
    Did you mean the image wasn't showing? I've no idea why! It works in my IE6 quite well.

    Sorry I can't give any help on the other browsers you are trying to make it work in as I don't have access to them.

    Paul

  24. #74
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    UK
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quick update and an unusual problerm
    page
    I have re done it with the 'hidden' images method, Works good, you only get a blank right at the start as the images are still loading.
    Now the unusuall prob. In Firebird the images sort of 'flicker between the 'hidden' and 'regular' images if you 'rub' the mouse pointer across the image?

  25. #75
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You need to add an a {display:block} to stop the flicker.

    Obviously you will need to set a class around all your images and then set it.

    e.g.
    Code:
    .imgroll a  {display:block}
    Then stick a <div class="imgroll"> around the whole block of images etc.

    BTW the last two images are not in their container in IE6. I haven't had time to work out why. (Firebird looks ok).

    Paul


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
  •