Recently, I made a small code addition to an existing one in order to display text below an image and have the text highlighted in blue on mouse over. Everything seemed to be working fine until I noticed that on mouseover, the text and image shifted to the left side inexplicably. Can anyone offer some assistance?
<td align="right" valign="bottom" id="helpid">
<a href="javascript: void(null)" onClick="if(legendDIV.style.visibility=='visible') { legendDIV.style.visibility='hidden'; isClickonLegend = 1; } else { legendDIV.style.visibility='visible'; isClickonLegend = 1;}">
Help
I implemented a JavaScript function called highlightBG to turn the text color blue on mouse over. This was the only modification made to the existing tag.
Javascript Code :
function highlightBG(id,action) {
if(action==0)
{
document.getElementById(id).className='AttachOnMouseOverText';
}
else
{
document.getElementById(id).className='AttachOnMouseOutText';
}
}
CSS Code:
.AttachOnMouseOverText{
color: blue;
font-size: 9px;
text-align: center;
}
.AttachOnMouseOutText{
color: black;
font-size: 9px;
text-align: center;
}