Re: How do I change images on mouseover?

[Rob MacKay]

Code:

yup – you are making it too complicated :D

basically what you should do is assign the image in CSS to the background of a HTML element. For example:

Click me

Then style it like this…

Code:

#myhover {
width: 20px; /*width of the image */
height: 20px; /* height of the image */
background:url(background/image/url.jpg) no-repeat;
}

THEN you use the hover pseudo

Code:

#myhover:hover {
background:url(background/image/url2.jpg) no-repeat;
}

Now when you hover over the div with id of #myhover its background will change…

You should really use sprites if you are going to do something like this to make sure the image loads cleanly and fast. But thats another topic…

On another note you positioning on your site is not good dude, you are using margin to position elements…. have a look here for a tut I wrote on the subject.

http://alteredaspect.info/the-art-of-css-positioning/

Hope that helps – ask away with the questions :D