SitePoint Sponsor

User Tag List

Page 2 of 4 FirstFirst 1234 LastLast
Results 26 to 50 of 96
  1. #26
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Most of the answer was in my first post from Doug's site http://www.redmelon.net/tstme/roll/ (his codes a lot neater than mine).

    I have used similar techniques myself before for creating pop up boxes etc and disjointed rollovers and its just a matter of finding out what works and what doesn't. Loading an image in the background and then one in the foreground seems to work quite well, but loading 2 background images in the same place doesn't seem to produce the desired effect.

    Anyway hope its of some use.

    Paul

  2. #27
    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 Paul O'B
    Anyway hope its of some use.
    Paul
    Definately, I think this is awesome!

  3. #28
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, here's what I been playing with http://www.search-this.com/indexcss.asp

    seems pretty good, but a few minor issues


    1.) Notice in IE you get the text selector cursor instead of the finger pointer. Very annoying usability wise.

    2.) Couldnít we get the <img src> in a span itself and that way if you want to change the background image later you only have to make the change in the css.

    3.) Iím wondering what the search engines will think? The anchor link is an img and text. Would be better to just be text Ė no image.

  4. #29
    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 Golgotha
    1.) Notice in IE you get the text selector cursor instead of the finger pointer. Very annoying usability wise.
    Add
    Code:
     cursor: hand;
    to the CSS rule for the span.

  5. #30
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    UK
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Hartmann
    mediaman_12,

    Just so you know, the page you listed does not display in Mozilla Firebird correctly. The top section is skewed and takes up most of the page.
    Hummm? I use Firebird mainly (Using IE only to test pages) and it's rendering fine on mine (after a few tweeks this morning it also should be OK in Safari. I swaped the id's for classes) .
    What version of Firebird are you using (mine is 0.6.1)? could you mail me a screeny to mediaman_12@hotmail.com thanks.

    There are some really interesting soultions on this page, but non of them can work on mine .
    The original reason I chose to do it this way was so all the rollover images are always proportion to the rest of the page. So if you have a 1280X720 window you will see more of the rolover images than on a 800x600 window, Instead of making rolover's that are optimised for the smaller window, and in the bigger one just having loads of space.
    The only image that is displayed from the list is the titles.

    Additional: Anybody know how to style <HR />'s so they are styled in more browsers than just IE? I have a HR in the CSS page but only IE seams to take any notice.
    Last edited by mediaman_12; Oct 1, 2003 at 07:14.

  6. #31
    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
    Add
    Code:
     cursor: hand;
    to the CSS rule for the span.
    learned something new! Good one!

    still think we need to get rid of the img src in the anchor tag - The search engines should be happier that way. Any Ideas?

    PS. I'm really impressed with what we have so far, a lot better than the 100's of other techniques offered out there!

    just need to hide that im src tag!!!

  7. #32
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,
    just need to hide that im src tag
    It seems that only the foreground image will cache and so if you put the second image into the background as well it will have to reload when you switch it on and off.

    I did do a version with two anchors in the same place. One for the image and one for the text only ( I thought that it might be better for SE etc). I thought it was working but when you hovered over the text the image swapped back again. It was fine when you hovered over the image alone. Just couldn't get it to work that way.

    There probably is a solution in there somewhere.

    Paul

  8. #33
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul what if we just took the foreground image and stuck it in a hidden div someplace else? would that be enough to cache it?

  9. #34
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by junjun
    Add
    Code:
     cursor: hand;
    to the CSS rule for the span.
    Actually, it should be "cursor: pointer;". "cursor: hand;" only works in IE/Windows.

  10. #35
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,
    Paul what if we just took the foreground image and stuck it in a hidden div someplace else? would that be enough to cache it?
    Here's 2 examples with and without an image preloaded. I'm not sure it makes any difference. I think the background image still appears to be loading because the hourglass appears.

    Have a look and see what you think. The background image is hidden by setting the background to transparent and letting the other image show through.


    Without image in foreground
    http://www.pmob.co.uk/temp/cssrollover6.htm

    With image in foreground
    http://www.pmob.co.uk/temp/cssrollover8.htm

    Original version (to compare with) hiding the foreground image on hover. foreground image

    http://www.pmob.co.uk/temp/cssrollover4.htm


    Paul

  11. #36
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <throws hands up /> stink

  12. #37
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi Mediaman 12,
    There are some really interesting soultions on this page, but non of them can work on mine .
    The original reason I chose to do it this way was so all the rollover images are always proportion to the rest of the page. So if you have a 1280X720 window you will see more of the rolover images than on a 800x600 window
    Would something like this work. It seems to rollover a lot lot quicker than your page (and its fluid).

    http://www.pmob.co.uk/temp/cssrolloverpercent3.htm

    (only tested in IE6, Opera 7 & Moz 1.2)

    Additional: Anybody know how to style <HR />'s so they are styled in more browsers than just IE? I have a HR in the CSS page but only IE seams to take any notice.
    Try something like this:
    Code:
    hr.newrule {
     color: #FFFccc;
     text-align: center;
     height: 10px;
     width: 30%;
     border: 1px solid #FFFFFF;
     background-color: #FFFCCC;
    }
    <hr class="newrule" />

    I think mozilla uses background colour and IE uses foreground colour for the display so you have to set both.

    Hope this helps.

    Paul

  13. #38
    SitePoint Addict hurricane.uk's Avatar
    Join Date
    May 2003
    Location
    Liverpool
    Posts
    361
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mediaman_12
    Additional: Anybody know how to style <HR />'s so they are styled in more browsers than just IE? I have a HR in the CSS page but only IE seams to take any notice.
    As Paul says, IE uses color whilst Mozilla (and Opera) uses background-color, there's also a couple of other browser issues to consider - more here.

  14. #39
    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 Mediaman 12,


    Would something like this work. It seems to rollover a lot lot quicker than your page (and its fluid).

    http://www.pmob.co.uk/temp/cssrolloverpercent3.htm

    (only tested in IE6, Opera 7 & Moz 1.2)

    Hope this helps.

    Paul
    Thaks for the HR, Works in both IE and Firebird, I will test it in Safari When I get home.

    test example
    The rollovers are almost sorted (I even like the way they load in doing it this way), I can't get it to position the image in the centere and hide a bit at each side (instead of just hiding the right hand edge) though, Is this possible? If it isn't I will just re do the images with the 'important' bit at the left hand end.

  15. #40
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,
    I can't get it to position the image in the centere
    Yes I had problems with that as well. As far as I can see it seems that you can only get that effect with background images. (You could scale the whole image up and down with the div but then the image gets distorted slightly, so its not really a viable alternative.)

    Paul

  16. #41
    + platinum's Avatar
    Join Date
    Jun 2001
    Location
    Adelaide, Australia
    Posts
    6,441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't remember where I picked up the tip, but the best method i've found is to use background-position, no flicker and no need to worry about preloading.

    example

  17. #42
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi Platinum,

    There was a link to this example earlier in the thread from junjun.
    There's been a few solutions tried to solve this. One is to move the background-image, so that another part is shown on hover. Another example of the same idea. But, evidentally, IE still needs to load the background image again, even if it's just to move it.
    I assumed it had been discounted but I have seen it used to good effect before. A quick test on Mediaman's image seems to indicate that it works ok but you do get the annoying hourglass showing. I've only tried it with the same image but it would be worth trying with multiple images.

    Here's a test :

    http://www.pmob.co.uk/temp/cssrolloverpercent4.htm

    The good point is that allows the fluid centring effect that mediaman wanted.

    Paul

  18. #43
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey Plat~
    I looked at your CSS and cant even see how/where you have the hover image - strange. Also, yours does have the flicker, sorry

  19. #44
    + platinum's Avatar
    Join Date
    Jun 2001
    Location
    Adelaide, Australia
    Posts
    6,441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah okay, knew it had to have been mentioend however I don't seem to get the "hourglass" effect in IE6 it works like an ordinary rollover for me.

  20. #45
    + 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 Golgotha
    hey Plat~
    I looked at your CSS and cant even see how/where you have the hover image - strange. Also, yours does have the flicker, sorry
    Odd, I honestly don't see any flicker/hourglass whatsoever in IE6 on windows XP, works exactly the same way it does in firebird.

    BTW, the image I used is this:



    The css just moves it up and down according to the state.

  21. #46
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi Platinum,
    any flicker/hourglass whatsoever in IE6 on windows XP
    I use IE6 xp and the hourglass just flicks on and off very quickly. I don't really get any flicker just the hourglass.

    I think its an excellent technique and if we could just kill the hourglass it would be even better. (My original examples don't have flicker/hourglass because its the foreground image that gets hidden and foreground images get cached whereas bg images don't seem to.)

    Anyway I think theres enough different methods here to keep everyone happy [img]images/smilies/smile.gif[/img]

    Quote Originally Posted by golgotha
    I looked at your CSS and cant even see how/where you have the hover image - strange.
    There is only one image. You have the top part of the image showing and the hover state is the bottom part of the image which isn't showing. You just then flip the background position to show each part of the image as required. It should happen very quickly.


    Paul

  22. #47
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey Plat~ how can both images be called roll? and it knows which one to use? What am I missing here ?

  23. #48
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    boy maybe my coffee isn't kicking in yet, but I dont get http://www.pmob.co.uk/temp/cssrolloverpercent4.htm

    there's only 1 image?

    is the flicker/hourglass/non-cache happening here? I can't tell on my T1, but I suspect it is?

  24. #49
    + platinum's Avatar
    Join Date
    Jun 2001
    Location
    Adelaide, Australia
    Posts
    6,441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah - that image above is just one single image, with both rollover images in it. And there is a "window" of maybe a mask would more accuratly describe it which you can see a 200x22 pixel gap. Basically the CSS shifts the background image up and down (and you can only see whats within that "window").

  25. #50
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah, I get it, took me awhile to see the man behind the curtain, never seen it done this way, kinda cool, but still no cache!

    I want the best of both worlds, Im still not satisfied!!


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
  •