20.5.2. How to create a fade block
So you have seen this cool fade effect on a site and you decided to incorporate it in a PHP-Nuke block on your site too? I mean that effect that makes the image fade gradually away, when you pass over it with the mouse cursor - and comes again gradually back the next time you revisit it with the mouse cursor. Before you plunge into this, consider that it is just an effect - and one that will work only with Internet Explorer. If you still feel you must have it, here is the PHP-Nuke block that demonstrates this fade effect:
<?php
if (eregi("block-Fade.php",$PHP_SELF)) {
Header("Location: index.php");
die();
}
$content .= "<script> n";
$content .= "n";
$content .= "/* n";
$content .= "Gradual-Highlight Image Script II- n";
$content .= "By J. Mark Birenbaum (birenbau@ugrad.cs.ualberta.ca) n";
$content .= "Permission granted to Dynamicdrive.com to feature script in archive n";
$content .= "For full source to script, visit http://dynamicdrive.com n";
$content .= "*/ n";
$content .= "n";
$content .= "nereidFadeObjects = new Object(); n";
$content .= "nereidFadeTimers = new Object(); n";
$content .= "n";
$content .= "/* object - image to be faded (actual object, not name); n";
$content .= "* destop - destination transparency level (ie 80, for mostly solid) n";
$content .= "* rate - time in milliseconds between trasparency changes (best under 100) n";
$content .= "* delta - amount of change each time (ie 5, for 5% change in transparency) n";
$content .= "*/ n";
$content .= "n";
$content .= "function nereidFade(object, destOp, rate, delta){ n";
$content .= "if (!document.all) n";
$content .= "return n";
$content .= "if (object != "[object]"){ //do this so I can take a string too n";
$content .= "setTimeout("nereidFade(" object "," destOp "," rate "," delta ")",0); n";
$content .= "return; n";
$content .= "} n";
$content .= "n";
$content .= "clearTimeout(nereidFadeTimers[object.sourceIndex]); n";
$content .= "n";
$content .= "diff = destOp-object.filters.alpha.opacity; n";
$content .= "direction = 1; n";
$content .= "if (object.filters.alpha.opacity > destOp){ n";
$content .= "direction = -1; n";
$content .= "} n";
$content .= "delta=Math.min(direction*diff,delta); n";
$content .= "object.filters.alpha.opacity =direction*delta; n";
$content .= "n";
$content .= "if (object.filters.alpha.opacity != destOp){ n";
$content .= "nereidFadeObjects[object.sourceIndex]=object; n";
$content .= "nereidFadeTimers[object.sourceIndex]=setTimeout
("nereidFade(nereidFadeObjects[" object.sourceIndex "]," destOp ",
" rate "," delta ")",rate);n";
$content .= "n";
$content .= "} n";
$content .= "} n";
$content .= "n";
$content .= "</script> n";
$content .= "<center><img src="images/xxx.png"
style="filter:alpha(opacity=10)" onmouseover="nereidFade(this,100,30,5)"
onmouseout="nereidFade(this,10,50,5)"></center>";
?>
|
This is an adaptation of the Dynamic Highlight II Script, by J Mark Birenbaum, that just appends the Javascript code in the $content variable of a PHP-Nuke block. You can adjust some parameters, such as the transparency level, the time between trasparency changes and amount of change each time - see the comments in the script's code. You should of course at least adapt the image source file (images/xxx.png in the code) to your situation.
 |
 |
