2. Now let's add the mouseover image:
a) Open the Image properties and select the Events page.
b) Select onMouseOver and set the action to Set Image.
c) Specify the Filename of the mouseover image.
a) Open the Image properties and select the Events page.
b) Select onMouseOver and set the action to Set Image.
c) Specify the Filename of the mouseover image.
Using events to create a roll over image with sound
WYSIWYG Web Builder makes it easy to handle events of form controls and images.
To demonstrate this feature we are going to create a rollover image that also plays a sound file when the mouse hovers over the image.
1. Add an image to your web page.
Click Insert->Image on the menubar and select the initial image that will be displayed.
WYSIWYG Web Builder makes it easy to handle events of form controls and images.
To demonstrate this feature we are going to create a rollover image that also plays a sound file when the mouse hovers over the image.
1. Add an image to your web page.
Click Insert->Image on the menubar and select the initial image that will be displayed.
3. When the mouse moves out of the image area, we want the original image to reappear.
a) Open the Image properties and select the Events page.
b) Select onMouseOut and set the action to Set Image.
c) Specify the Filename of the mouseout image (this is usually the same as the original image file).
a) Open the Image properties and select the Events page.
b) Select onMouseOut and set the action to Set Image.
c) Specify the Filename of the mouseout image (this is usually the same as the original image file).
4. To play a sound we will use the Windows Media Player object.
Although this object is called 'Windows Media Player' it's just a generic media object so it should work fine on all computer even if WMP is not installed.
Click Insert->Advanced->Windows Media Player on the menubar.
Open the object's properties and select a sound.
Disable Autostart and select the Hidden property so the object will not be displayed in your page.
In Quick Properties note name of the object, if this is the first WMP object on the page this is usually called 'WinMedia1'
Although this object is called 'Windows Media Player' it's just a generic media object so it should work fine on all computer even if WMP is not installed.
Click Insert->Advanced->Windows Media Player on the menubar.
Open the object's properties and select a sound.
Disable Autostart and select the Hidden property so the object will not be displayed in your page.
In Quick Properties note name of the object, if this is the first WMP object on the page this is usually called 'WinMedia1'
5. Now we're going to attach the sound to our rollover image.
a) Open the image properties and select the 'Events' page.
b) Select onMouseMove and set the action to Play.
c) In target select the ID of the Media object eg. 'WinMedia1'.
a) Open the image properties and select the 'Events' page.
b) Select onMouseMove and set the action to Play.
c) In target select the ID of the Media object eg. 'WinMedia1'.
If you like you can also stop the sound when the mouse moves out of the image area:
a) Open the image properties and select the 'Events' page.
b) Select onMouseOut and set the action to Stop.
c) In target select the ID of the Media object eg. 'WinMedia1'.
a) Open the image properties and select the 'Events' page.
b) Select onMouseOut and set the action to Stop.
c) In target select the ID of the Media object eg. 'WinMedia1'.
