Compatibility. This tip only works with Internet Explorer version 4 and higher.
Webmaster
Tips
[ All Tips ]
An image that is displayed pixel by pixel
Want to display your images in an original way? How about a dissolve when each page is opened?
To obtain the effect, first copy these two scripts in the header of your page:
<script LANGUAGE="JavaScript">
<!-- Debut du script
function netie(net, ie) {
if ((navigator.appVersion.substring(0,3) >= net && navigator.appName == 'Netscape' && net != -1) || (navigator.appVersion.substring(0,3) >= ie && navigator.appName.substring(0,9) == 'Microsoft' && ie != -1))
return true;
else return false;
}
// Fin du script -->
</script>
and
<script LANGUAGE="JavaScript">
<!-- Debut du script
function loadImage() {
imageEffect.filters.item(0).Apply();
imageEffect.style.visibility = "visible";
imageEffect.filters.item(0).Play();
}
// Fin du script -->
</script>
The first script is used to detect the browser your visitors are using, and the second to create the transition.
Next, define your images in an overlay as follows:
<body onLoad="netie(-1,4)?loadImage():null">
<div id="imageEffect"
STYLE="position:relative;height:69; width:66; background-color:none; filter:revealTrans(Duration=10, Transition=12); visibility:hidden">
<dd><img SRC="my_picture.gif"
STYLE="net(-1,4)?position:relative:null; width:100%; height:100%" width="66" height="69"> </dd>
</div>
Make sure to specify the name of the image used (here my_picture.gif), as well as its width and height (width and height in two different places in this code). You can also change the transition time according to your preferences (Duration=10)
Compatibility. This tip only works with Internet Explorer version 4 and higher.
Discover all Webmaster tips.