Menu Buttons Image Swapping (css) - Question?..Help please

YSR

Jan 26 2007, 05:11 AM

I used image swapping when hovering on a menu button with CSS
Every thing worked fine, except:

If you were visiting the page for the first time, so that the images is not cached in your browser yet.. The main images loads with the page since they are a part of that page but..
When hovering on the button which supposed to swap the image... the current image disappears but the image that should be swapped with doesn't show up.
That's happening because the images didn't load yet, so..
After hovering the first time on the buttons the other images (which supposed to be swapped with) start loading, and the next time you hover on the buttons after few seconds everything works fine.

The question is:
Is there anyway to make the other images (which will be swapped with the main ones) to pre-load when the whole page start loading, so that when someone hover on the buttons the images are already pre-loaded and cached?

I know this can be done by placing javascript code in the head to pre-load all the images you want before/while loading the page, so the images are already cached in the browser and ready to show when they are called.
But the thing is I don't want to use javascript in the head, and thats why I made the whole image swapping thing with CSS in first place.

Thanks in advance

biscuitrat

Jan 26 2007, 05:52 AM

A few questions:

1) Can I see this page in action?
2) How big are these images we're talking about?
3) Instead of having separate states for your images, why not roll them into one? Make one file that has all three states next to each other, side to side, or top to bottom. Then, just set the margin/padding necessary to show the new states. I can explain this more when I'm not trying to recover 13 credits I lost for no reason. I'm not really rational right now!

Lemme know!

jlhaslip

Jan 26 2007, 06:25 AM

Another method is to pre-load the images into a one-pixel size space on the fringe of your page so when the page first loads, they are pre-loaded with the page and there is a minimal delay when the on-hover state occurs.

rvalkass

Jan 26 2007, 06:56 AM

One way many people do this (similar to jlhaslip's suggestion) is to preload the images using Javascript. You can go from very simplying writing some JS to load the image and do nothing with it, to those that are slightly more complicated and can do all sorts of fancy tricks.

There are lots available from this quick search. The simplist one is probably this script if you want to quickly try it out.

Just remember that if the images have a very large file size then they may still not have loaded by the time they roll over the links. If that is the case then your best bet is to try and get the file size down.

YSR

Jan 26 2007, 08:45 AM

biscuitrat: Lol, I'm sorry for those 13 credits you lost..

1) Sure here's the Link but I haven't built anything in the page yet.
2) The images are only buttons, 3Kb each... 4-5 of them, that makes the total around 10-12 Kb.
3) You mean make all the three states of each button in one single image... But the problem is there's a fair amount of space to the nearest area to hide them... Or can that be done by using transparency in the single image file between each state??

jlhaslip: I like the idea, I think I will try it now to see..

rvalkass: I know how to do that in Javascript.. But I said in the first post that I don't want it to be done using javascript... But thanks for the suggestion and the links

Kubi

Jan 26 2007, 02:47 PM

I go with haslips suggestion. If you want you may even be able to make that 1 pixel image go under the ad you placed for Trap17(thank you).

CSS:

CODE

.buttonl { background-image url(images/x.png) height: 1px width: 1px };

Possibly looking something like that. Just place the div tag for it somewhere

CODE

Hope you figure it out.

Recent Queries:-

css dropdown menu separate images - 40.13 hr back. (1)

Similar Topics

Keywords : menu buttons image swapping css

Link Image Css Bug In Firefox - Can anyone help me? (7)
Centering A Div Containing Image. - I have a logo I need centered in a aujustable width page (9)
http://sonesay.trap17.com/sonesayi/ Just a new layout I'm working on, Any ideas how I can get
the logo to be centered? At the moment I can only float it left or right. I think is possible to get
it done in tables but I would prefer to stay away from them in layouts. Any insight appreciated. by
the way source code and css is at http://sonesay.trap17.com/sonesayi/index.html
http://sonesay.trap17.com/sonesayi/main.css thanks ...

How Do You Make A Dropdown Menu? - with css (13)

Hi, i want to know how to make a horizontal drop down menu with css? i am not talking about the ones
that have like an arrow where you click for options.. but when you hover over the buttons, other
buttons drop down below..i have seen some tutorials but i couldn't understand how they did it..
so if anybody knows how to make one and if you can put it here or if you have a link where i can
find some.. that would be great.. Thanks...

Css Menu -- A Little Help Needed - i want a cool menu (4)

ok, basicly i learned on trap17 that tables are bad for webdesign beacouse of their slow loading and
incompability with browsers. since i have some html, css and even php skills (very little indeed but
i have the will) i'm building this new website for local alternative club. i have enough time to
build it, so it means i can practice on those skills.. i basicly know how to build css website (and
i have a good book about it /smile.gif" style="vertical-align:middle" emoid=":)" border="0"
alt="smile.gif" /> ) so i wont bother you much with all of it, just this menu i ...

Css Dropdown Menu - (10)

hi eveyone for my new site i want to create a css dropdown menu the image has what the menu needs
to look like. but beneth all the links when you need to click on them another set needs to dropdown
how can i achieve this. ...

Centering Background Image In Css - (8)

Well, the title says what I need. Basically, I want a background image that can be used in the body
or inside a div (or table), which is centered....

CSS Rollover Menu Code - for < a > tags used on HTML pages (5)

QUOTE(moldboy @ Nov 18 2005, 03:23 PM) ... I am wondering if you have a particular site in
mind that would show how? 206171 Hate to add this to a topic about unordered lists, but
here goes. Maybe this part will get split into its own topic later. I'll ask another mod how to
do that. ( new guy comment) My Webpage , or click on the bottom link of my signature to go to the
same site which has css rollover effects. This isn't the exact code that performs the rollover
on that site, but is from another (handier to acquire) html page on my computer...

Css Image Replacment - using CSS to change the image path (5)

I was wondering if it is possable to change the path to an image using CSS, so that I could provide
a sort of template system rather then having to change a bunch of thing I could have astandard page
and then by changing the external CSS I could change not only styles but the whole image, I soo how
I could change the background-color { url(image.gif)} but whatabout an actual image say change the
src of an img tag?...

Css Image Position Problem - align image left or right (1)

I am having problems figuring out why my image will not align how I want it. Here , you can see
that the image is aligned to the left. This is the code for that block: CODE <a
href="http://img355.imageshack.us/img355/844/r25870774779uu.jpg"><img
src="http://img355.imageshack.us/img355/844/r25870774779uu.th.jpg" alt="bush
bathroom break note" align="left" style="margin-right:
5px;"></a>[text goes here] But if you go here , you can see that the
text does not stay to the right of...

Looking for Menu, Buttons, Image, Swapping, (css)

ADD REPLY / Got an Opinion!	Remove these ADs!	RAPID SEARCH!	Free Web Hosting	[X]
Express your Opinions, Thoughts or Contribute more info. to help others. Ask your Doubts & Queries to get answers, So that "Together We can help others!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE