An issue regarding background images changing when i rollover a link

[gruffy321]

Hi all,
I am very new ( 1st Post) and i have to apologise in the first instance as it would seem that i may end up falling into this nasty category of annoying student types who do not attempt coding themselves first before asking a question and expect some miracle answer.
I am sorry if this appears true of my message as this is not the case, but i am new to coding especially in the sense of making html and css really work for me.
My issue comes from many hours of writing the wrong code time after time as i am finding it very hard to get hold of a topic that covers my issue.
Before i bore the world trying to explain my questions validity i will just say the problem ....

I am currently creating a site for a photograppher friend and it has doubled up as a project for my access course ( which leads on to fdsc in computing then honours in specilist area, sorry very excited to be on this course) and i have a part where i am trying to achieve a background image changeover when the mouse rolls over an image link .
So the idea is roll over a link, thats clickable, and on the rollover(hover) the background image changes to a different image, then back to original image when roll out occurs.
I really have tried alot of code stitchingas such ( using prerequisite knowledge and online tut`s) but to no avail.
I really wanted to be able to do tis in html & css, but understand i may have to cram javascript for a bit to get on my way there...
I dunno
Any advice will leave me eternally greatful and bowing in your glossy web development prowess as i am at the end of my natural tether trying to work it out and i know ...somewhere... there is a simple answer to this ...but it eludes me like a ninja in the shadows.
Sorry if i have bogged on to get to my question/post, please dont hold it against me too much in your replies.
With many many thanks for any advice i can get and for one more time i am in this for the long haul , not looking for somebody else to tell me everything, but desperately hungry for webdev knowledge as this has become my life......and i am loving this life.

[scottloway]

You can do this with just HTML + CSS reasonably easily. It would help us a bunch though if you could point us to a website where your page is hosted, or paste in some source code for review.

[pritaeas]

Start with the tutorials at w3schools. The specific CSS you are looking for is :hover

[scottloway]

This post seems like it could help you: http://www.daniweb.com/forums/thread109916.html

And there are other methods documented out there as well. In essence, you'd use the css pseudo class of :hover to handle the mouseover behavior. Because an anchor is an inline element by default, you'll need to make it a block element so you can define a static width and height and see the background image accordingly. You can then define your :hover background image, and you're on your way.

You'll need to consider layout of your anchors (making them block will likely move them out of where you want them), so you may need to play around with that.

[gruffy321]

Thanks guys you are all being super amazingly helpful and i am on w3shools now and trying to understand "hover" a bit better by reading up in my visual quickstart guide- css, dhtml & ajax.
Does everybody start out a bit bewildered or should i be less intimidated by some of the complexities of coding ( dont get me wrong I LOVE IT but fell like im riding a fairly large curve at the mo !?

I will get this, used to feeling a bit like im the only one who doesnt at the moment . All part of learning a bit later in life i guess. Peace all :)

ps . wonderful css tip from Rahul Dev Katarey, thanks for the direction scottloway :)

[scottloway]

You're definitely not alone, otherwise this forum wouldn't have to exist. :-) We all start someplace, and never stop learning...it's complex, but fun!

[almostbob]

when you get the code sorted out for the css rollover, the FIRST rollover for each image will appear very slowly, as the file is not downloaded from the server until that time
this can really mess up your page appearance
javascript to preload the images can be added to the foot of the page after the </body> tag and before </html> to preload the images, it wont display anything and degrades gracefully(does nothing) if javascript is disabled on the user browser. but speeds the apparent load time of the page as the images load after the page is fully active, but usually before the user has a chance to mouseover something

</body><script type="text/javascript">
//<![CDATA[
<!-- 
image1 = new Image();
image1.src = "http://pics.mysite.com/rollover1.jpg";
image2 = new Image();
image2.src = "http://pics.mysite.com/rollover2.jpg";
//-->
//]]>
</script></html>

this script loads rollover1 and rollover2 which are then in the cache to be accessed without load delays

[scottloway]

Good point Gruffy. Another approach here would be to avoid using images at all, and instead use CSS to describe the presentation you're looking for. CSS alone may not provide the look you're going for however, or if it does, may not be identical across browsers. For that reason, this approach could be a bit more challenging to accomplish your goals, but a good alternative to loading images if you're concerned about load times and such.