HOW TO DISPLAY DYNAMIC TEXT ON IMAGE ONMOUSEOVER
I needed to do a small javascript that will change text dynamically upon onmouseover of an image for a star rating on one of my sites. I came up with the solution as the demo below. Hover over the stars to see the text dynamically change:
Default text
Put the following code in between the <head> and </head>tags:
<script type="text/javascript">
function dis(num)
{
var num;
if(num==1)
{
document.getElementById('test').innerHTML = 'Poor';
}
if(num==2)
{
document.getElementById('test').innerHTML = 'Fair';
}
if(num==3)
{
document.getElementById('test').innerHTML = 'Good';
}
if(num==4)
{
document.getElementById('test').innerHTML = 'Very Good';
}
if(num==5)
{
document.getElementById('test').innerHTML = 'Excellent';
}
}
function def()
{
document.getElementById('test').innerHTML = 'Default text';
}
</script>
Put the following code in the body section of your page:
<a href="#" onmouseover="dis(1);" onmouseout="def();" ><img src='stars.png' border='0' /></a>
<a href="#" onmouseover="dis(2);" onmouseout="def();" ><img src='stars.png' border='0' /></a>
<a href="#" onmouseover="dis(3);" onmouseout="def();" ><img src='stars.png' border='0' /></a>
<a href="#" onmouseover="dis(4);" onmouseout="def();" ><img src='stars.png' border='0' /></a>
<a href="#" onmouseover="dis(5);" onmouseout="def();" ><img src='stars.png' border='0' /></a>
| 
Home
Computers & Internet
