Re: [Solved] Changing Image on Mouseover

[gooflett]

I didn’t have time to copy and paste your code to test. But one thing jumped out at me that could be causing your problem.

#aboutme: hover{
background-image: url(aboutmesmall.png);
background-repeat: no-repeat;
}

Try changing the selector to #aboutme:hover

Removing the space will help the browser know what you want. I think all pseudo selectors like that can’t have a space.

Another thing I noticed, you currently are using DIVs with an onclick as a link. I mean this works I guess but I have never seen it done like this. A more common markup approach would be to do an unordered list. The markup you have now is useless to someone who is blind or uses a screen reader. There is no text on the page to say there is a link.

<ul id="navigation">
<li><a href="#">About Me</a></li>
<li><a href="#">My Work</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Fbook</a></li>
</ul>

Watch this screencast for a standard way of doing image rollovers with css.
http://css-tricks.com/video-screencasts/7-three-state-menu/

I hope this helps you out.