Text and Picture Blurring Effect

So you want to blur some text and pictures, perhaps for mouse hovering.  Maybe you also happen to be lazy.  Well, have no fear, for this has become a reality.  The requirement for utilizing this feature is Internet Explorer 5.5 and up.

Blurring Text and Pictures with <SPAN>

To blur text, use the following code around the text or picture to be blurred:

<SPAN STYLE="width: 100%; filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=1);">Text goes in here.</SPAN>

The result will be:

Text goes in here.

You can also change the number after "pixelradius=" to a higher number for more of a blurring effect.  You can putthe SPAN tag around pictures as well for a blurring effect.

Blurring Text and Pictures with <SCRIPT>

Perhaps you want to blur something with a script, so that something can be cleared up when the mouse is hovering over a link, for example.  Here is some code which will blur text and undo the blur on hovering of the mouse.

<P><SPAN ID="Test" STYLE="width:100%; filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=1);" ID="Test" onmouseover="window.status="hover_over(Test);return true;" onmouseout="window.status= "unhover_over(Test);return true;">Hover over me.</SPAN></P>

<SCRIPT LANGUAGE="JavaScript">
function hover_over(id)
{
    /* When the mouse is hovered over */
    id.style.cssText="";   // Nothing. //
}

function unhover_over(id)
{
    /* When the mouse leaves */
    id.style.cssText="width: 100%; filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=1);";
}
</SCRIPT>

This script can also be applied to VBScript, by changing "function" to "Sub", removing comments ("//" and "/* */"), and removing all semicolons.  Here is the result of the example above:

Hover over me.