combining javascript image rollover with css rollovers

[jforty]

I've designed a page that uses javascript image rollovers placed next to text links (as link markers). The text links use CSS background image rollovers. The javascript images are preloaded in the script, but every time I mouseover the text links, the browser reloads the image. Shouldn't it be caching? The site is up and running; the links work but the desired effect of the appearance of a foot kicking a ball through the link works only inconsistently. The javascript rollovers utilize the same two images 8 times on the page and the css background rollover uses the same image throughout the site. Any ideas?
Thanks!

 

[Bentley22]

Can you post a link to the site?

 

[jforty]

sure!

http://www.soccernc.com/mysa

 

[Bentley22]

li {list-style-image: url(file:///C%7C/WINDOWS/Temporary%20Internet%20Files/Content.IE5/806WG95G/ball_bullet.gif);}

Thats in your stylesheet, its using a reference on your hard-drive. As such, I can't even see them. Change that, and see if it works any better. Nice site, I like the foot-combo with the link

 

[Bentley22]

a:hover{color:#50A650;background-image: url(file:///C%7C/WINDOWS/Temporary%20Internet%20Files/Content.IE5/806WG95G/link_bg.gif);background-repeat:repeat-x;font-family:lucida sans,arial,helvetica,verdana,sans serif;font-size:12pt;font-weight:600;text-decoration:none;}


There too. These forums need and Edit Post option!

 

[jforty]

whoa! I'm a little confused there. The references to the images on my style sheet read: "link_bg.gif" and "ball_bullet.gif" The images are in the right directory. I'm having a typical monday slow-brain day....can you explain it differently and maybe I'll "get" it? Thanks!! )

 

[Bentley22]

Ahh, sorry, my bad. Had to do with me saving your .css file to my drive. Dreamweaver seems to have changed all the references. So thats not your problem.

As for seeing soccer balls behind the text links, I still don't see them. I just see the foot going through its kick animation.

If you were just using them for punctuation in your last post, try actually adding quotations around your url's to the images, only use single quotes eg: url('link_bg.gif'). See if that helps at all.

Think your having a bad Monday? Try a Monday while hung over! :-s

 

[jforty]

I'll try that. I did the style sheet so long ago, i can't remember if there was a reason to NOT put the single quotes there! I'm pretty sure the problem lies either in my javascript (which I always struggle with) or the combining of the two rollovers with the same event. Everything worked fine until I uploaded it--the image isn't caching for some reason. Have you ever seen another example using both with the same link?
(psst: i blamed it on monday, but it's probably really because i'm blonde and flakey anyway!)
THANKS!

 

[Bentley22]

LOL, well, you can't be too bad if your actually asking for help! X-)

No, I've never encountered a page that uses something similar to what your attempting to do, or tried it myself. Its an interesting concept, so I'll keep it in mind for the future. Considering the size of the images, I wouldn't be too worried about caching of them, even on dialup there shouldn't be much lag.

If I get bored out of my skull today (a likely occurance), I'll play around with it, and if I can come up with a solution, I'll post it.

Good luck!

 

[cactus1000]

The rollovers work fine for me in IE -- the images seem to be caching, but then I'm on a T1 line, so who knows?

I'm sure you've thought of this, but have you checked the cache on your browser? it might be full, or set to zero size.

By the way, I can't view this site in Netscape 4.7. I can view the source code, but the screen is blank.

 

[jforty]

eeeek! I tested in Netscape 6 and it is actually MORE reliable than IE! Go figure. guess i'll need to add a browser check and redirect, too...

 

[jforty]

well, DUH! I used a javascript preload for the ball image used in the CSS rollover and it seems to be ok now. THanks everyone for your input! )