how to load images that are used in CSS as "a:hover" element?

[LetItBe]

hi there,

i hope my question is clear. if not, read the short description following:

html:

<p class="item"><a href="/contact/">contact</a></p>

css:

.item a
{
width: 70px;
height: 70px;
text-indent: -9999px;
background: url('/images/img_a.gif') no-repeat;
display: block;
}
.item a:hover { background: url('/images/img_ahover.gif') no-repeat; }

the problem: when i move mouse over the "item" element "img_ahover.gif" does not load. however this exists on a remote server, differently from my local machine.

javascript is the way? how?

thanks a lot.

[Angelis]

just do .item:hover

[LetItBe]

it doesn't change situation.

[kushty]

Do you mean the image is situated on another server? If so you need to point to the location like so.

background: url('http://www.otherserver.com/img_a.gif') no-repeat;

[rocknbil]

however this exists on a remote server, differently from my local machine.

If you are specifying the image relative to the css file, this should work. / means start at document root. Example,

thisfile.html
images/img_ahover.gif

or

thisfile.html
css/css-for-thisfile.css
images/img_ahover.gif

The only other two things I can see, try removing the quotes and if that doesn't work, what happens if you take out the negative margin? Applying this to the a is correct, if you apply it to .item it won't work in all browsers.

<p class="item"><a href="/contact/">contact</a></p>

css:

.item a
{
width: 70px;
height: 70px;
background: url(/images/img_a.gif) no-repeat;
display: block;
}
.item a:hover { background: url(/images/img_ahover.gif) no-repeat; }

Javascript is "A" way, but it should not be necessary. Keep editing! :-)

[LetItBe]

thanks for posts, guys. however, looks like i told you a total nonsense. sorry, it's just me ;-)

hope this is better for you to get my mind:

there is no problem with css and html - image loads clearly and nicely. but, when i move mouse pointer over this element, i have to wait until image "img_ahover.gif" is downloaded to see it. so, how do i make browser to download this image earlier so that i don't have to wait?

[Achernar]

I you know beforehand what the url for the image(s) is/are, you can preload it/them in javascript. Just like standard practice for roll-overs.
A dynamic alternative, where a javascript function reads the style-sheets associated with the page and automatically finds images' urls to preload, is also possible.

There is also a solution where you set up a dummy style with the same image (as background, or whatever), and use it in your document on an hidden element. This gives it the time to load before it's used on a "a:hover".

[thecoalman]

how do i make browser to download this image earlier so that i don't have to wait

Put a hidden div with all background images somewhere in your document:

<div style="display:none">
<img src="/images/backgrounds/bckgrnd.jpg" alt="+" />
</div>

The alt tag is plus sign because you shouldn't use desciptive alt tags for hidden images so you don't fill the browser window up with non essential text for those that are impaired.

Do a search for tri fecta , that's a very good solution for doing mouseover effects with CSS.