How to make all images load before hover on them?

[l Squid l]

http://silentstormstudios.freehostia.com/

On the nav i made it when a user hovers over it changes color, be using the hover with a new gfx image. but i believe it has to load it white box comes up first. any way to make the whole site load up?

[croatiankid]

Yes, there is a way, but I have no idea why you've made the page completely out of background images (why is there no text?). If you actually used text, you could easily change the anchor text color via CSS with the hover pseudo-class.

If you're stuck on actually changing the background image of an element when using the hover pseudo-class and want that background loaded before the cursor hovers over the link, you can set that background as the background of an element that doesn't need one, and position it outside the viewport.

You can see an example of this technique on my site (http://croatiankid.com/). In the CSS (http://croatiankid.com/style.css) you can see that I have the following style set:#navigation
{
width:500px;
margin:0 auto;
background:url(images/navli-reverse.png) -500px no-repeat;
list-style-type:none;
padding:0 0 0 5px
}
Since I didn't actually need a background on that element, I set the background I want displayed when you hover over a link in the navigation and positioned it outside the viewport, so it's loaded before you actually hover over a link (assuming the page has loaded completely).

Hope that helps.

[Arbitrator]

Yes, there is a way, but I have no idea why you've made the page completely out of background images (why is there no text?).This is what the page looks like with images or CSS disabled:

http://i10.photobucket.com/albums/a117/PLGaries/cf145369.png

l Squid l should be applauded for creating such an accessible Web site.

[l Squid l]

Yes, there is a way, but I have no idea why you've made the page completely out of background images (why is there no text?). If you actually used text, you could easily change the anchor text color via CSS with the hover pseudo-class.

If you're stuck on actually changing the background image of an element when using the hover pseudo-class and want that background loaded before the cursor hovers over the link, you can set that background as the background of an element that doesn't need one, and position it outside the viewport.

You can see an example of this technique on my site (http://croatiankid.com/). In the CSS (http://croatiankid.com/style.css) you can see that I have the following style set:#navigation
{
width:500px;
margin:0 auto;
background:url(images/navli-reverse.png) -500px no-repeat;
list-style-type:none;
padding:0 0 0 5px
}
Since I didn't actually need a background on that element, I set the background I want displayed when you hover over a link in the navigation and positioned it outside the viewport, so it's loaded before you actually hover over a link (assuming the page has loaded completely).

Hope that helps.


I see what you are saying. I would have used text but i heard you have to use a font that every has. And this font was really good.


and as for the whole site in CSS, I thought this was better than tables? The my first site the works on most resolutions (1024x768 and up)

[abduraooft]

Your case is even worse than having divitis (http://csscreator.com/?q=divitis)
Squid, the key factors to be considered are accessibility (http://www.w3.org/TR/WCAG10/full-checklist.html) and semantic (http://boagworld.com/technology/semantic_code_what_why_how/).
And thus you may use tables for displaying tabular data.

[l Squid l]

How would you go about it coding it?

[VIPStephan]

How would you go about it coding it?

By determining what function each element of your document has (headline? list? paragraph? section?) and using the appropriate element for each aspect (that’s called semantics (http://boagworld.com/technology/semantic_code_what_why_how/)).

Before you start to style your document you have to have some content to style. And that content has to make sense and be accessible without any styling, and then you start to enhance that default look with CSS.

Study the CSS Zen Garden (http://csszengarden.com) site (and its source code) thoroughly. They have a plain HTML document that consists of plain text only, and is then styled in many different ways with CSS. That’s the right approach.

As to a CSS image rollover effect have a look at http://wellstyled.com/css-nopreload-rollovers.html

[Arbitrator]

I see what you are saying. I would have used text but i heard you have to use a font that every has. And this font was really good.You can still have your font. Just use img elements and code the text representation into the alt attributes so that there’s still something to see when images are disabled, before they’ve finished loading, or for bots (e.g., search engines). (Just, FYI, the alt text can be styled too by styling the img element as if it were a span element containing the text.)

<ul>
<li><a href="index.html"><img alt="Home" src="home.png"></a></li>
<li><a href="projects.html"><img alt="Upcoming Projects" src="projects.png"></a></li>
<!-- et cetera -->
</ul>

When Win. Internet Explorer 8 comes around, object elements will be available for use too:

<ul>
<li><a href="index.html"><object type="image/png" data="home.png">Home</object></a></li>
<li><a href="projects.html"><object type="image/png" data="projects.png">Upcoming Projects</object></a></li>
<!-- et cetera -->
</ul>

Or, better yet, when Mozilla Firefox adds support for @font-face, you’ll be able to reference your fonts via the CSS3 font-face at‐rule. (Internet Explorer, Opera, and Safari already support it.)