Webmaster
Tips
[ All Tips ]
Transition between two images
Are you bored by traditional mouse-over effects? Why not use the transition properties of Internet Explorer to create a great dissolve effect between two images?
Click on the image to see an example:
To obtain the effect, insert this script in the header of your page:
<script language="JavaScript">
var fRunning = 0
function startTrans()
{
if (fRunning == 0)
{
fRunning = 1
imageid.filters.blendTrans.Apply();
imageid.src = "picture2.gif";
imageid.filters.blendTrans.Play()
}
}
</script>
<script for="my_picture" event="onfilterchange">
fRunning = 0
</script>
Insert the following code in the location where you want to display the image, between the tags <body> and </body>:
<img id="imageid" src="picture1.gif" style="filter:blendTrans(duration=3)" onclick="startTrans()" WIDTH="100" HEIGHT="102">
Simply personalize this script according to the images you want to use and the transition time:
- picture1.gif corresponds to the image displayed by default on the page
- picture2.gif corresponds to the image displayed in a dissolve when the visitor clicks.
- duration=3 corresponds to the transition time.