SitePoint Sponsor |
|
User Tag List
Results 26 to 50 of 96
Thread: Preloading (CSS) rollover images
-
Sep 30, 2003, 15:43 #26
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 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
-
Sep 30, 2003, 15:46 #27
- Join Date
- Mar 2002
- Location
- northern MI
- Posts
- 1,392
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by Paul O'B
-
Sep 30, 2003, 19:48 #28
- 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.WordPress Plugins: Comment Info Tip
My Blogs: What a Savage | Search-This
Tools: Search Engine Decoder | PageRank Decoder
Podcast: Rand Fishkin | SitePoint Founders
-
Sep 30, 2003, 21:10 #29
- Join Date
- Mar 2002
- Location
- northern MI
- Posts
- 1,392
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by Golgotha
Code:cursor: hand;
-
Oct 1, 2003, 02:39 #30
- Join Date
- Mar 2003
- Location
- UK
- Posts
- 245
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by Hartmann
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.
-
Oct 1, 2003, 11:04 #31
- Join Date
- Nov 2001
- Location
- Colorado
- Posts
- 2,085
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by junjun
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!!!WordPress Plugins: Comment Info Tip
My Blogs: What a Savage | Search-This
Tools: Search Engine Decoder | PageRank Decoder
Podcast: Rand Fishkin | SitePoint Founders
-
Oct 1, 2003, 12:29 #32
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
just need to hide that im src tag
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
-
Oct 1, 2003, 12:37 #33
- 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?
WordPress Plugins: Comment Info Tip
My Blogs: What a Savage | Search-This
Tools: Search Engine Decoder | PageRank Decoder
Podcast: Rand Fishkin | SitePoint Founders
-
Oct 1, 2003, 13:23 #34
Originally Posted by junjun
-
Oct 1, 2003, 14:13 #35
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 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?
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
-
Oct 1, 2003, 14:54 #36
- Join Date
- Nov 2001
- Location
- Colorado
- Posts
- 2,085
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
<throws hands up /> stink
WordPress Plugins: Comment Info Tip
My Blogs: What a Savage | Search-This
Tools: Search Engine Decoder | PageRank Decoder
Podcast: Rand Fishkin | SitePoint Founders
-
Oct 1, 2003, 15:19 #37
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 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
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.
Code:hr.newrule { color: #FFFccc; text-align: center; height: 10px; width: 30%; border: 1px solid #FFFFFF; background-color: #FFFCCC; }
I think mozilla uses background colour and IE uses foreground colour for the display so you have to set both.
Hope this helps.
Paul
-
Oct 2, 2003, 01:46 #38
- Join Date
- May 2003
- Location
- Liverpool
- Posts
- 361
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by mediaman_12
-
Oct 2, 2003, 02:57 #39
- Join Date
- Mar 2003
- Location
- UK
- Posts
- 245
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by Paul O'B
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.
-
Oct 2, 2003, 04:59 #40
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
I can't get it to position the image in the centere
Paul
-
Oct 2, 2003, 05:27 #41
- 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
-
Oct 2, 2003, 06:07 #42
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 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.
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
-
Oct 2, 2003, 06:17 #43
- 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, sorryWordPress Plugins: Comment Info Tip
My Blogs: What a Savage | Search-This
Tools: Search Engine Decoder | PageRank Decoder
Podcast: Rand Fishkin | SitePoint Founders
-
Oct 2, 2003, 06:17 #44
- 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.
-
Oct 2, 2003, 06:19 #45
- Join Date
- Jun 2001
- Location
- Adelaide, Australia
- Posts
- 6,441
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by Golgotha
BTW, the image I used is this:
The css just moves it up and down according to the state.
-
Oct 2, 2003, 06:29 #46
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi Platinum,
any flicker/hourglass whatsoever in IE6 on windows XP
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]
Originally Posted by golgotha
Paul
-
Oct 2, 2003, 06:34 #47
- 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 ?
WordPress Plugins: Comment Info Tip
My Blogs: What a Savage | Search-This
Tools: Search Engine Decoder | PageRank Decoder
Podcast: Rand Fishkin | SitePoint Founders
-
Oct 2, 2003, 06:42 #48
- 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?WordPress Plugins: Comment Info Tip
My Blogs: What a Savage | Search-This
Tools: Search Engine Decoder | PageRank Decoder
Podcast: Rand Fishkin | SitePoint Founders
-
Oct 2, 2003, 06:43 #49
- 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").
-
Oct 2, 2003, 06:48 #50
- 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!!WordPress Plugins: Comment Info Tip
My Blogs: What a Savage | Search-This
Tools: Search Engine Decoder | PageRank Decoder
Podcast: Rand Fishkin | SitePoint Founders
Bookmarks