<title> Image Effect Demo </title>
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<script>
/*
Shun son production
Made by Puterjam
*/
--Initialization variables--
var rt=true;//allows image transitions
var bt=true;//allows images to fade in
var tw=150;//tip Box Width
var endaction=false;//end Animation
var ns4 = document.layers;
var ns6 = document.getElementById &&!document.all;
var ie4 = document.all;
OffsetX = 0;
OffsetY = 20;
var tooltipstyle= "";
function Inittooltips ()
{
if (ns4| | ns6| | IE4)
{
if (ns4) Tooltipstyle = Document.tooltiplayer;
else if (NS6) Tooltipstyle = document.getElementById ("Tooltiplayer"). Style;
else if (ie4) tooltipstyle = Document.all.toolTipLayer.style;
if (NS4) document.captureevents (event.mousemove);
Else
{
tooltipstyle.visibility = "visible";
Tooltipstyle.display = "None";
}
Document.onmousemove = Movetomouseloc;
}
}
function ToolTip (msg, FG, BG)
{
if (ToolTip.arguments.length < 1)//Hide
{
if (NS4)
{
tooltipstyle.visibility = "hidden";
}
Else
{
--image transition, fading processing--
if (!endaction) {tooltipstyle.display = ' none ';}
if (RT) document.all ("Msg1"). Filters[1]. Apply ();
if (BT) document.all ("Msg1"). Filters[2]. Apply ();
document.all ("Msg1"). filters[0].opacity=0;
if (RT) document.all ("Msg1"). Filters[1]. Play ();
if (BT) document.all ("Msg1"). Filters[2]. Play ();
if (RT) {
if (document.all ("MSG1"). Filters[1].status==1 | | document.all ("MSG1"). Filters[1].status==0) {
Tooltipstyle.display = "None";}
}
if (BT) {
if (document.all ("MSG1"). Filters[2].status==1 | | document.all ("MSG1"). Filters[2].status==0) {
Tooltipstyle.display = "None";}
}
if (!rt &&!bt) Tooltipstyle.display = "None";
//----------------------
}
}
else//Show
{
if (!FG) FG = "#777777";
if (!BG) bg = "#eeeeee";
var content =
"<table id=" MSG1 "name=" MSG1 "border=" 0 "cellspacing=" 0 "cellpadding=" 1 "bgcolor=" ' + FG + ' "class=" trans_msg ">< ;td> ' +
' <table border= ' 0 "cellspacing=" 0 "cellpadding=" 3 "bgcolor=" ' + BG +
' ><td width= ' + tw + ' ><font face= ' Arial ' color= ' + FG +
' "Size="-2 ">" + msg +
' \;</font></td></table></td></table> ';
if (NS4)
{
ToolTipSTYLE.document.write (content);
ToolTipSTYLE.document.close ();
tooltipstyle.visibility = "visible";
}
if (NS6)
{
document.getElementById ("Tooltiplayer"). InnerHTML = content;
Tooltipstyle.display= ' Block '
}
if (IE4)
{
document.all ("Tooltiplayer"). Innerhtml=content;
Tooltipstyle.display= ' Block '
--Image transition, fade-
var cssopaction=document.all ("Msg1"). filters[0].opacity
document.all ("Msg1"). filters[0].opacity=0;
if (RT) document.all ("Msg1"). Filters[1]. Apply ();
if (BT) document.all ("Msg1"). Filters[2]. Apply ();
document.all ("Msg1"). Filters[0].opacity=cssopaction;
if (RT) document.all ("Msg1"). Filters[1]. Play ();
if (BT) document.all ("Msg1"). Filters[2]. Play ();
//----------------------
}
}
}
function Movetomouseloc (e)
{
if (ns4| | NS6)
{
x = E.pagex;
y = e.pagey;
}
Else
{
x = Event.x + document.body.scrollLeft;
y = event.y + document.body.scrollTop;
}
Tooltipstyle.left = x + OffsetX;
Tooltipstyle.top = y + OffsetY;
return true;
}
</script>
<style type= "Text/css" >
<!--
. trans_msg
{
Filter:alpha (opacity=100,enabled=1) Revealtrans (duration=.2,transition=1) Blendtrans (duration=.2);
}
-->
</style>
<script>
</script>
<body>
<div id= "Tooltiplayer" style= "Position:absolute; Visibility:hidden "></div>
<p>
<script>inittooltips () </script>
</p>
<p><font face= "Arial" ><a href= "#" > Effect 1</a></font>
<font face= "Arial" > <a href= "#" > Effect 2</a></font>
<font face= "Arial" > <a href= "#" > Effect 3</a></font>
<font face= "Arial" > <a href= "#" > Effect 4</a></font>
</p>
</body>