image glitching or loading

[gffects]

Hey all I finally finished my homepage and it meets the w3c html and css recomendations but I am noticing a glitch.

When I first load the page when i go to an image that is a link with a roll over when I go to use the link both images completly disapeer for a second then when i hover agin it works what could the reason be for this.

 

I have use the images in css not html so that could be the cause or it could be the server being slow to load, I am with ipage hosting, could also be the sizes of the image but there only 50kb so that shouldn't be much of problem.

 

The website I am discussing is in my signiture your help would be greatly appreciated.

[falkencreative]

Two things:

 

-- A lot of your images seem pretty large. For example, each of your buttons seem to be between 50 and 70kb each. I would highly suggest using the .gif file type (or the PNG8 file type) and dropping/simplifying the need for transparency. In many cases, the transparency isn't needed. For example, in your main navigation, you would get significantly smaller file sizes if you removed transparency and integrated the background gradient into the navigation image. You'd be much better off using navigation images that didn't include transparency but were significantly smaller.

 

-- The issue is caused with the fact that you are changing the background image when links are hovered over, and each link has to load a 50 something kb image. This can be partially fixed by reducing the image size, but it would be better for you to use CSS sprites and skip the whole issue entirely. This is a pretty good tutorial on the subject: http://css-tricks.com/css-sprites/

 

I don't usually suggest making one large sprite image that contains all/most of the images you use in the site, but I do think it would be helpful to use sprites for your buttons, so the hover effect is done by moving the background position and no loading of new files is done. Your code wouldn't need to be modified much to take advantage of CSS sprites -- you'd just need to create an image for each of your buttons that uses both normal and hover states, and modify the CSS to move the background position on hover, rather than loading a new file.

[gffects]

Ok never heard of sprites other than tiny images so this is new to mee but I will give it a good read and put it into action thanks very much I will let you know how it goes.

[BuildMyWeb]

i think an older term, or at least an alternative, was sliding doors technique: http://www.alistapart.com/articles/slidingdoors/

 

http://css-tricks.com/css-sprites/

 

two good sources above. you really want to employ these if doing rollovers