Replace image in Drop down menu

[Foundas]

Hi all

kindly request your help on this. I want to change the image i have in from of the text in a drop down sub/menu. There is a small empty box and when hovered, i want to replace it with a filled box without loosing the text that follows.
----------------------------------------------------------
my CSS is like this:

.ddm1 .item2,
.ddm1 .item2:hover {
padding: 1em 26px 1em 26px;
text-decoration: none;
display: block;
white-space: nowrap;
}
.ddm1 .item2 {
background-color: #FEF5F8;
color: #000000;
}
.ddm1 .item2:hover {

color: #FF0000;
}
---------------------------------------------------------

and the HTML:

<table cellspacing="0" cellpadding="0" id="menu1" class="ddm1" width="100%">
<tr>
<td width="13%"><a class="item1 left" href="javascript:void(0)"><img src="images/corner_arrow.gif" border=0 width="13px" height="10px">&nbsp;&nbsp;My Account</a>
<div class="section">
<a class="item2" href="settings.asp"><img src="images/unselected.gif" border=0 width="13px" height="8px&nbsp;&nbsp;Settings</a>
<a class="item2" href="changepassword.asp"><img src="images/unselected.gif" border=0 width="13px" height="8px">&nbsp;&nbsp;Change Password</a>
<a class="item2" href="editprofile.asp"><img src="images/unselected.gif" border=0 width="13px" height="8px">&nbsp;&nbsp;Edit Profile</a>
</div>
</td>
<table>

---------------------------------------------------------------

is there a way to check in HTML, and when "Change Password" is hovered, to change the "unselected.gif" image with the "selected.gif" ???



Thanks in advance

[Fang]

This is better done with changing the background image:.ddm1 .item3 {
padding-left:50px;
background: #FEF5F8 url(images/unselected.gif) no-repeat left;
color: #000000;
}
.ddm1 .item3:hover {
background:url(images/selected.gif) no-repeat left;
color: #FF0000;
}and <a class="item2" href="settings.asp"><img src="../Images/flagUS.gif" border=0 width="13px" height="8px">&nbsp;&nbsp;Settings</a>
<a class="item3" href="changepassword.asp">Change Password</a>
<a class="item2" href="editprofile.asp"><img src="../Images/flagUS.gif" border=0 width="13px" height="8px">&nbsp;&nbsp;Edit Profile</a>

[Foundas]

Hi Fang

thank you for the reply. I tried your suggestion but i get all sort of errors. the bar no longer works, and the whole line "Change Password" is replaced by the selected image (selected.gif)

Maybe i didnt explain it good enough.

You see, i have an empty box in front of the text. What i am trying to do, is when you hover on the text, to change the empty box with a filled one. This will give the impression that the black dot, which fills the empty box, is following the mouse pointer. I do not wish to alter the text. The text will remain the same.

Thanks in advance

[Fang]

That is what the code does, change the image onmouseover. It does not alter the text.