Changing Images in a Web Page with Script Events (JS)

 

 

Description:

 

 

Goal: Send and event from the Windows Media Player, which will replace on embedded JPG image with another one

 

This is accomplished by sending

 

CODE TO PUT IN YOUR WEB PAGE:

 

The first step in this process is to embed the Windows Media Player in your web page.  This is easy to do with All Browser Friendly HTML and JavaScript Code that you can cut and paste directly into your web page. 

 

Add this code between the <Body> tags of your web page.

 

<OBJECT ID="MediaPlayer" 

              classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" 

            CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"

              standby="Loading Microsoft Windows Media Player components..."

              type="application/x-oleobject">

 

                 <PARAM NAME="FileName" VALUE="">

                 <PARAM NAME="AnimationatStart" VALUE="true">

                 <PARAM NAME="TransparentatStart" VALUE="false">

                 <PARAM NAME="AutoStart" VALUE="true">

                 <PARAM NAME="ShowControls" VALUE="true">

                                                  

                 <Embed type="application/x-mplayer2"

            pluginspage="http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/"

                        src=" "

                        Name=MediaPlayer

                        ShowControls=1

                        ShowDisplay=1

                        ShowStatusBar=1                    

                        >

                 </embed>

                                               

</OBJECT>

 

Add this JavaScipt code before the first body tag.

 

 

<script language="JavaScript">

<!--

    if ( navigator.appName == "Netscape" )

    {

        navigator.plugins.refresh();

        document.write("\x3C" + "applet MAYSCRIPT Code=NPDS.npDSEvtObsProxy.class" )

        document.writeln(" width=5 height=5 name=appObs\x3E \x3C/applet\x3E")

{alert ('The internet browser you are currently using does not support VBScript which is used in the following page.  Please download Internet Explorer Version 4.x or later from http://www.microsoft.com/ie for full functionality.') }

     }

//-->

</script>

 

 

Now that you have the Windows Media Player in your page you, you will need to add some code that will interpret the script events and replace images in the web page.  You will need to assign the script events to two variables, ScType will be the type of Script Event.  ScParam will be a parameter that should be filled in with the source of an image will replace the currently loaded image. In this case we have two possible Script Events to choose from. “chthinking” changes an image to the upper right of the player. “display” changes an image to the lower right of the embedded player.

 

<Script LANGUAGE="JavaScript" FOR="MediaPlayer" EVENT="ScriptCommand(bstrtype,bstrparam)">

<!--

           

              if (bstrtype = 'chthinking')      

 { thinking.src= (bstrparam) }

              else  if (bstrtype = 'display')

 { description.src= (bstrparam) }

 

//-->

</script>

 

You will notice that one of the parameters that I am using is changing the chthinking script event to Blank.gif.  It is important to note that this is being used to clear the image.  It is a good idea to create an image that is the same color as your background.  This will be useful when you want to clear an image.

 

 

EVENTS AND PARAMETERS TO PUT IN YOUR NETSHOW SERVICES STREAM          

 

TIME

EVENT

PARAMETER

00:00:09.8

chthinking

Thinking.gif

00:00:12.5

chthinking

Thinking2.gif

00:00:16.2

chthinking

Blank.gif

00:00:29.5

Display

Graph.gif

00:00:33.1

Display

Chart.gif

 

Seattle Flash Designer and Web Designer : Mikey Longr:

I specialize in Seattle Web Design and Seattle Flash Design. Michael has been working on the web for over ten years and specializes not only in web design technologies like Macromedia Flash and HTML but web development technologies including the asp, asp.net and PHP4. As a Flash Designer in Seattle Washington I have done work for top names in the ever expanding Flash Animation industry. I owned a new media and multimedia design company for three years. OverDrive Media specilized in multimedia development including Flash, streaming, web design and database driven media systems.

Flash has revolutionized the way that web graphics are created and built an entirely new market for 3d Animation and motion graphics. Flash Animation started as a very simple method for creating vector based web animation. The Flash Movie was little more than a slight advancement of the animated gif. The files were large, the drawing options limited and the end result clunky. In the early days of the Internet (5 years ago) this was enough to blow the competition out of the water. While their have been numerous ways to create motion graphics none of these methods has combined the impact and usability of Flash. Flash became the standard for online motion graphics because it was easy to use. Web animators did not have to understand code or advanced scripting language. You could design in flash, move things around, restructure the animation and duplicate effects with ease. None of this was possible before Macromedia Flash.