Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
ASP.NET
VB.Net
C-Sharp
SQL Server
 

Creating Multimedia Rollovers

Author: DevASP
Download Source Code : 579_ImageRollover.zip

This article is about how you can make your image rollovers much more dynamic by using the Microsoft Transition Filters built into Internet Explorer on the Windows platform.

Steps you will do.

 

 

Start visual studio and create a new web application

 

Add the following style tag before closing the head tag.

 

 

<style>

    body {font-family:Arial, Helvetica;}

</style>

 

 

Open the HTML design of your web page and add the following JavaScript functions before closing the head tag.

 

 

<script type="text/javascript">

document.write('<STYLE TYPE="text/css">.imgTrans{ filter:revealTrans(duration=1, transition='+Math.floor(Math.random()*23)+') }</STYLE>');

var onImages=new Array();

function Rollover(imgName, imgSrc)

{

            onImages[imgName] = new Image();

            onImages[imgName].src = imgSrc;

}

function turnOn(imgName)

{

            if(document.images[imgName].filters != null)

            document.images[imgName].filters[0].stop();

            document.images[imgName].offSrc = document.images[imgName].src;

            document.images[imgName].src    = onImages[imgName].src;

}

function turnOff(imgName)

{

            if(document.images[imgName].filters != null)

            document.images[imgName].filters[0].apply();

            document.images[imgName].src = document.images[imgName].offSrc;

            if(document.images[imgName].filters != null)

            document.images[imgName].filters[0].play();

}

Rollover("home",    "home_on.gif");

Rollover("about",   "about_on.gif");

Rollover("forums",  "forums_on.gif");

</script>

 

 

 

Now add the following HTML code to design your web page and call the above JavaScript functions.

 

 

<body bgcolor="#000000" text="#999999" link="#FFFF00" vlink="#FFFF00" alink="#FF0000">

<CENTER>

<p>

(Move your mouse over the images below)<br>

(Refresh the page (F5) for different effects)

</p>

<a href = "http://www.devasp.com"

            onMouseOver="turnOn('home');"

            onMouseOut="turnOff('home');"><img name="home" class="imgTrans"

                        src="home_off.gif" border="0"></a><br>

<a href = "http://www.devasp.com"

            onMouseOver="turnOn('about');"

            onMouseOut="turnOff('about');"><img name="about" class="imgTrans"

                        src="about_off.gif" border="0"></a><br>

<a href = "http://www.devasp.com"

            onMouseOver="turnOn('forums');"

            onMouseOut="turnOff('forums');"><img name="forums" class="imgTrans"

                        src="forums_off.gif" border="0"></a><br>

</CENTER>

 

</body>

 

NOTE! The images used in this application are in the attached project files you can download from there and use in your application.

 

 

Run your application and take the mouse on buttons, see the effects. To change the effects just refresh the web page and again take the mouse over the buttons.

 

 

 

 

 

   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< Creating an Image viewer using JavaScript functions.

Disclaimer - Privacy
© 2002-2017 DevASP.net