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=http://www.webdeveloper.com/forum/archive/index.php/"javascript:void(0)"><img src="images/corner_arrow.gif" border=0 width="13px" height="10px"> My Account</a>
<div class="section">
<a class="item2" href=http://www.webdeveloper.com/forum/archive/index.php/"settings.asp"><img src="images/unselected.gif" border=0 width="13px" height="8px Settings</a>
<a class="item2" href=http://www.webdeveloper.com/forum/archive/index.php/"changepassword.asp"><img src="images/unselected.gif" border=0 width="13px" height="8px"> Change Password</a>
<a class="item2" href=http://www.webdeveloper.com/forum/archive/index.php/"editprofile.asp"><img src="images/unselected.gif" border=0 width="13px" height="8px"> 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 advanceThis 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=http://www.webdeveloper.com/forum/archive/index.php/"settings.asp"><img src="../Images/flagUS.gif" border=0 width="13px" height="8px"> Settings</a>
<a class="item3" href=http://www.webdeveloper.com/forum/archive/index.php/"changepassword.asp">Change Password</a>
<a class="item2" href=http://www.webdeveloper.com/forum/archive/index.php/"editprofile.asp"><img src="../Images/flagUS.gif" border=0 width="13px" height="8px"> Edit Profile</a>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 advanceThat is what the code does, change the image onmouseover. It does not alter the text.
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=http://www.webdeveloper.com/forum/archive/index.php/"javascript:void(0)"><img src="images/corner_arrow.gif" border=0 width="13px" height="10px"> My Account</a>
<div class="section">
<a class="item2" href=http://www.webdeveloper.com/forum/archive/index.php/"settings.asp"><img src="images/unselected.gif" border=0 width="13px" height="8px Settings</a>
<a class="item2" href=http://www.webdeveloper.com/forum/archive/index.php/"changepassword.asp"><img src="images/unselected.gif" border=0 width="13px" height="8px"> Change Password</a>
<a class="item2" href=http://www.webdeveloper.com/forum/archive/index.php/"editprofile.asp"><img src="images/unselected.gif" border=0 width="13px" height="8px"> 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 advanceThis 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=http://www.webdeveloper.com/forum/archive/index.php/"settings.asp"><img src="../Images/flagUS.gif" border=0 width="13px" height="8px"> Settings</a>
<a class="item3" href=http://www.webdeveloper.com/forum/archive/index.php/"changepassword.asp">Change Password</a>
<a class="item2" href=http://www.webdeveloper.com/forum/archive/index.php/"editprofile.asp"><img src="../Images/flagUS.gif" border=0 width="13px" height="8px"> Edit Profile</a>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 advanceThat is what the code does, change the image onmouseover. It does not alter the text.