How can i change a class on mouseover?

Hi!

I'm working on a wordpress template at the moment.

http://janwei.startlogic.com/testblog/

I have a purple rss icon in my footer that i want to change to a blue one on mouseover. I have defined the two icons in two seperate classes in my footer named rss-tag-icon and rss-tag-icon2.

I have the following code in my footer:

<a href="?feed=rss2"><img class="rss-tag-icon" onmouseover="changeclass='rss-tag-icon1';" onmouseout="this.className='rss-tag-icon';"

What am i doing wrong here?

 

Maybe a slightly simpler way of changing the icon is to only use CSS instead of using CSS+Javascript.

Here's an example setup taken from your code:

HTML:

<a href="?feed=rss2"><img class="rss-tag-icon" width="35" height="35" /></a>

Code (markup):

CSS:

#footer .rss-tag-icon {
background-image:url(images/rssIcon.png);
background-position:left bottom;
background-repeat:no-repeat;
float:left;
height:35px;
margin:7px 0 0 5px;
position:relative;
width:35px;
}

Code (markup):

#footer .rss-tag-icon:hover {
background-image:url(images/rssIcon2.png);
}

Code (markup):

Since you are already loading the image through CSS already (and the link to your image in the html does not work anyway), using the hover pseudo-class makes a lot more sense.

Note: No changes were made to #footer .rss-tag-icon

 

I just did exactly what you said but it doesn't work. The rss icon now disappears on mouseover.

By the way:
How could you read out my CSS Code "footer rss-tag-icon"?