Scribd
Upload
9 views21 pages

Lab Manual ITEC-241

The document is a lab manual for the course 241-ITEC Multimedia Applications at Jazan University, detailing the curriculum for the second semester of 2024-2025. It covers various topics including HTML, CSS, GIMP, and JavaScript, providing instructions and examples for creating web pages and multimedia applications. The manual includes practical exercises on image effects, text effects, and animation techniques using different software tools.

Uploaded by

Eros
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
9 views21 pages

Lab Manual ITEC-241

The document is a lab manual for the course 241-ITEC Multimedia Applications at Jazan University, detailing the curriculum for the second semester of 2024-2025. It covers various topics including HTML, CSS, GIMP, and JavaScript, providing instructions and examples for creating web pages and multimedia applications. The manual includes practical exercises on image effects, text effects, and animation techniques using different software tools.

Uploaded by

Eros
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 21

COLLEGE OF COMPUTER SCIENCE & INFORMATION TECHNOLOGY

JAZAN UNIVERSITY, JAZAN


KINGDOM OF SAUDI ARABIA

LAB MANUAL

241-ITEC MULTIMEDIA APPLICATIONS BIT


Level – 4
SECOND Semester (2024-2025)

Course Coordinator: Ms. Durdana Tarannum


Dept. of Information Technology & Security

WEEK TOPICS PAGE HOURS


HTML Programs
Insert Image
1 Hyperlink an Image 2
Creating Frames
Table (with frame attribute)
2 CSS Script 2
Introduction to GIMP
3 Text Effects : (i) Text written in Shape 2
Text Effects : (ii) 3D Text effect
Text Effects : (iii) Text Reflection
4, 5 4
Text Effects : (iv) Fire Flaming Text
6 Image Effects: (i) Morphing 2
7 Image Effects: (ii) Dispersion or Explosion effect 2
Introduction to Synfig Studio
8 2
Animation : (i) Bouncing Ball or Rolling Ball
9 Animation : (ii) Animated Banner 2
Animation : (iii) Flying Object
10 2
Animation : (iv) Day Night Effect
Javascript
Embed multimedia component text and image in
11 2
your web page and make the image Zoom In-Zoom
out using JavaScript function.

Javascript
Embed audio file in your web page using javascript
Function.
12 2
Embed video file in your web page using javascript
function.

13 Revision 2

What is HTML?

• HTML stands for Hyper Text Markup Language.


• HTML is the standard markup language for creating Web

pages.
• HTML describes the structure of a Web page.

• HTML elements tell the browser how to display the content.

What is an HTML Element?

<tagname> Content goes here... </tagname>


Starting Tag ending/closing tag
e.g. <h1>My First Heading</h1>

HTML Page Structure


<!DOCTYPE html>
<html>
<head>
<title> Page Title </title>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
• All HTML documents must start with a document type declaration: <!DOCTYPE html>.
• The HTML document itself begins with <html> and ends with </html>.
• The visible part of the HTML document is between <body> and </body>.

HTML Editor
Windows- NOTEPAD
Mac- TextEdit

BASIC TAGS
<b> : Bold
<u>: Underline

<i>: Italics
<p>: Paragraph tag

<br>: Break line

• Heading Tags
HTML headings are defined with the <h1> to <h6> tags.
e.g <h6> heading tag h6 </h6>

• Font Tag
The font tag is used to change the color, size, and style of a
text. The base font tag is used to set all the text to the same
size, color and face.
Syntax:
<font attribute = "value"> Content </font>

Attributes: Size=”20”
Color=”blue”
Face=”Times New Roman”

Insert an Image
The HTML <img> tag is used to embed/insert an image in a web
page.
Images are not technically inserted into a web page; images are
linked to web pages. The <img> tag creates a holding space for
the referenced image.
The <img> tag is empty; it contains attributes only, and does not
have a closing tag.
The <img> tag has two required attributes:
• src - Specifies the path to the image
The required src attribute specifies the path (URL) to the
image.
• alt - Specifies an alternate text for the image
The required alt attribute provides an alternate text for an
image

• The width and height attributes always define the width and
height of the image in pixels.

<html>
<head>
<title> Insert Image </title>
</head>
<body>
<img src=”flower.jpg” alt=”My Flower” height=”50”
width=”50”/>
</body>
</html>

Hyperlink
HTML links are hyperlinks. You can click on a link and jump to another document.
<a> : Anchor tag
Href: Hyperlink reference
• The <a> tag is used to create a hyperlink on the webpage.
• The most important attribute of the <a> element is the href attribute, which indicates the
link's destination.
Example for creating a link to a website

<a href=”program1.html”> Click Here </a>

Example for creating an image as hyperlink:

<a href=”program1.html > <img src=”logo.jpg” height=”30” width=”30”/> </a>

Example for creating a link to a website


<a href=https://www.jazanu.edu.sa/> Jazan University Website </a>

<html>
<head>
<title> Hyperlink </title>
</head>
<body>
<a href=”program1.html”> Click Here </a>

<br>
<a href=”program1.html > <img src=”logo.jpg” height=”30” width=”30”/> </a>

<br>

<a href=https://www.jazanu.edu.sa/> Jazan University Website </a>


</body>

</html>

Create Table

Create table using <Table> tag

A table in HTML consists of table cells inside rows and columns.

Create table using <Table> tag

<tr>: table row

<th>: table heading

<td> : table data

• Each table row starts with a <tr> and ends with a </tr> tag.
• Everything between <td> and </td> are the content of the table cell.
• The text in <th> elements are bold and centered.

<html>
<head>
<title> Insert Image </title>
</head>
<body>
<table>
<tr>
<th> Name </th>
<th> ID </th>
</tr>
<tr>
<td> abc </td>
<td> 20201111 </td>
</tr>
<tr>
<td>xyz </td>
<td> 20202222 </td>
</tr>
</table>
</body>
</html>

Creating Frames

• HTML frames are used to divide your browser window into multiple sections where
each section can load a separate HTML document.
• A collection of frames in the browser window is known as a frameset.
• The window is divided into frames in a similar way the tables are organized: into rows and
columns.
• To use frames on a page we use <frameset> tag instead of <body> tag.
• The <frameset> tag defines how to divide the window into frames.
• The rows attribute of <frameset> tag defines horizontal frames and cols attribute defines
vertical frames. Each frame is indicated by <frame> tag

<html>
<head>
<title> frames </title>
</head>
<frameset cols="25%,50%,25%">
<frame src="program1.html"/>
<frame src="image.jpg">
<frame src="program2.html">
</frameset>
</html>

CSS SCRIPT
What is CSS?

• CSS stands for Cascading Style Sheets


• Styles define how to display HTML elements
• Styles were added to HTML 4.0 to solve a problem
• External Style Sheets can save a lot of work
• External Style Sheets are stored in CSS files

Styling background

e.g 1
body { background-image:url('gradient2.png'); background-repeat:repeat-x; }

e.g 2
body { background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:right
top; }

CSS Script
h1 { color:orange; text-align:center; }
p { font-family:"Times New Roman"; font-size:20px; }

(i) Inline CSS


<html>
<body>
<h1 style="color:red;"> All header 1 elements will be red</h1>
<h2 style="color:blue;"> All header 2 elements will be
blue</h2>
<p style="color:green;"> This is paragraph</p>
<h1> H1 heading tag </h1>
<p> Paragraph tag </p>
<h2> H2 heading tag </h2>
</body>
</html>
(ii) Internal CSS
<html>
<head>
<style type="text/css">
h1 {color:red;}
h2 {color:blue;}
p {color:green;}
</style> </head>
<body>
<h1>All header 1 elements will be red</h1>
<h2>All header 2 elements will be blue</h2>
<p> This is paragraph.</p>
<h1> This is H1 Heading tag </h1>
</body> </html>
(iii) External CSS
<html>
<head>
<link rel="stylesheet" href="a.css">
</head>
<body>
<h1> H1 heading tag </h1>
<p> paragraph </p>
<h1> H1 Heading tag </h1>
<h2> H2 Heading tag </h2>
</body> </html>
a.css file
h1 {color:red;}
p {color:green; font-size:40px;}

Introduction to GIMP
Downloading GIMP Open Source Tools:
https://www.gimp.org/downloads/
GIMP Tutorial: https://www.gimp.org/tutorials/
GIMP Introduction:
GIMP is a multi-platform photo manipulation tool. GIMP is an acronym for GNU Image
Manipulation Program. The GIMP is suitable for a variety of image manipulation tasks,
including photo retouching, image composition, and image construction.
One of The GIMP's strengths is its free availability from many sources for many operating
systems. The GIMP is a Free Software application covered by the General Public License
(GPL). The GPL provides users with the freedom to access and alter the source code that makes
up computer programs.
GIMP Interface:

GIMP Tools:
GIMP provides a comprehensive toolbox in order to quickly perform basic tasks such as making
selections or drawing paths.

Row 1: Row 2:
Rectangle Select Tool Scissors Selection Tool
Eclipse Select Tool Foreground Selection Tool
Free Select Tool
Path Tool
Fuzzy Select Tool
Color Picker Tool
Select By Color Tool Zoom Tool

Row 3: Row 4:
Measure Tool Rotate Tool

Move Tool Scale Tool


Alignment Tool Shear Tool
Crop Tool Handle Transform Tool
Unified Transform Tool
Perspective Tool

Row 5: Row 6:
Flip Tool
Gradient Tool
Cage Transform Tool
Pencil Tool
Wrap Transform Tool
Paintbrush Tool
Text Tool
Eraser Tool
Bucket Fill Tool Airbrush Tool

Row 7: Row 8:

Ink Tool Blur/ Sharpen Tool


MyPaint Brush Tool Smudge Tool
Clone Tool Dodge/ Burn Tool
Healing Tool
Perspective Clone Tool Foreground and Background Color

TEXT EFFECTS

(i) Text Writing in Different Shapes:

or
https://www.youtube.com/watch?v=_Wq_A-jkWQE
(wrap text around circle) https://www.youtube.com/watch?
v=0CMt3Uc0zrg (text along path)

Here are the steps for wrap the text around the Shape:

1. Click on “File menu-> select “New” ->


Enter height and width for the canvas/image
2. Using “Eclipse” tool, draw a circle.
3. Go to “Select” menu-> click on “To path”
4. Go to “ Select” menu-> click on “None”
5. Using “Text” tool, write text (any text) TextLaye-1 (for
example- Welcome)
6. Repeat step-5 (with different text) TextLayer-2 ( for
example- New Website)
7. Select on TextLayer-2, right click on it-> click on “Text along
path”
8. Turn off the visibility of TextLayer2
9. Create a new layer
10. Go to “path”à Layers/channel/Path
11. Right click on (text) path-> select “Path to selection”
Go to “Edit”menu, select “ Fill with FG color”
12. Go to “Select”menuà select “None”
13. Delete the path (step no. 11)
14. Go to “Layers”à Layers/channel/Path
15. Click on “Rotate” tool, rotate the layer, to adjust the text.
16. Select “Layer” menu-> select “Layer to image size”
17. Click on flip tool-à please check in “Transform option->
select “path”
Just click on circle
Then in “Transform option-> select “Layers”
18. Repeat same for 1 Text( TextLayer-1) from step No. 7 till
st

step 15
Go to “path”à Layers/channel/Path
Make visibility off for ->selection

(ii) 3D Text using GIMP:

or or
https://www.youtube.com/watch?v=OfeIBK1k_PY
https://www.youtube.com/watch?v=-gjK00o4EP0

Here are the steps to create 3D text (GIMP) using GIMP:

1. Click on “File menu-> select “New” ->


Enter height and width for the canvas/image
[you can set the background as black color]
2. Select “Text” tool, write any text of your choice.
Adjust the font style (bold) and size of your text.
[Select the text color, which is visible on your background]
3. Make duplicate layer of your Text layer->
Right click on the Text layer-> select “Duplicate Layer”
[You can also create it, using double rectangular box icon in
the bottom of the Layer pane]
4. Repeat step 3, for 2-3 times. For both the duplicate layer, Go
to “Layer” Menu->Select “Layer to Image size”.
5. Make the visibility off for Text layer. (text layer- step-2)
Click on the eye symbol
6. Click on first duplicate Layer->( step-3 Layer)
Go to “Filter” Menu, select “Light and shadow”-> select
“Long Shadow”.
Adjust the “Length”, “Angle” and “color” for shadow as
per your choice-> click “ok”.
7. Repeat same (step-6) for other duplicate layers.
Adjust the long shadow, by Angle and Length, color
8. On last layer, repeat same (step-6), select “Style” as “Fading”-
> click “ok”.

(iii) Text Reflection using GIMP:

or or
https://www.youtube.com/watch?v=Ab4m63SRj-w
https://www.youtube.com/watch?v=PBohY0adf18
https:/**/www.youtube.com/watch?v=WAX6bK5BjMc
https://www.youtube.com/watch?v=SETdoN_B4lg

Here are the steps to Text Reflection using GIMP:

1. Click on “File” menu-> select “New” ->


Enter height and width for the canvas/image
[Choose background as black color]
2. Select “Text”tools, write text on canvas of your choice.
[adjust the font size and style]
[choose white/red text color]
3. Duplicate the text Layer (step-2 layer)
Right click on the Text layer-> select “Duplicate Layer”
[You can also create it, using double rectangular box icon
in the bottom of the Layer pane]
4. On Duplicate Layer, choose “Flip” tool->
Select Direction as “vertical”
5. Click on the Text on canvas.(you can see the flipped text)
6. Using “Move” tool, move/ adjust the text downside o the
original text.
7. Using “Perspective” tool, stretch the text as you want, make
sure it look like reflection
8. On Duplicate layer, Add a Layer Mask
Click on “Add Mask” icon in the bottom of the Layer pane
[right click on the duplicate layer-> select”Add Layer Mask”
9. Make sure, your FG color “Black” and BG color “White”
10. Click on “Gradient” Tool, -> choose shape as “Linear” And
Gradient as”FG to BG”
Then click on flipped text, using mouse-drag the mouse
upside, and then release the mouse.
[adjust the gradient effect as you want]

(iv) Fire Flaming Text using GIMP:

or or
https://www.youtube.com/watch?v=4BHMA-llEKA
https://www.youtube.com/watch?v=-qizkopE3uE
https://www.youtube.com/watch?v=UJg_BQVuueA
Here are the steps to create fire flaming text (YouTube) using
GIMP:

1. File->New-> Set height and width for the new image-> click
ok
Make sure Background color is “Black” color.
2. Select “Text” tool-> Type any text of your choice
Adjust the size, and style of your text. Make sure text color is
“white” color
3. Layer Menu-> “Layer to Image size”
4. Select “Smudge” tool->Select the brush (select fuzzy type
brush)
Adjust the brush size of your choice
Rate= 75
Spacing=1
Fade Length=100
5. Using brush, smudge the text, make some flames on top
6. Go to the text layer-> right click on it-> select “Merge Down”
It will merge the text and background layer as one layer.
7. Go to” Colors” menu-> select “Color Balance”
In Color balance box
For shadow:
Cyan-Red=100
Magneta-Green=30
Yellow- Blue= -30
-------
For Midtones:
Cyan-Red=100
Magneta-Green=30
Yellow- Blue= -30
-------
For Highlights:
Cyan-Red=100
Magneta-Green=0
Yellow- Blue= -100

Then click “ok”


IMAGE EFFECTS

(i) Image Morphing in GIMP:


Morphing: The smooth transformation of one image into another
by computer.
https://www.youtube.com/watch?v=HEPLeMxVE2Q
https://www.youtube.com/watch?v=JN4HegSFHoA (swap
face)
https://www.youtube.com/watch?v=dvHEkZAV_nQ
https://www.youtube.com/watch?v=WCiYSiHKfO0
Here are the steps for swapping faces; for this we need G’MIC
plug-in
➔ To install G’Mic plug-in, Go to this link: gmic.eu/download.html
Download the file (exe installer)
Once Downloaded, double click on that file-> It will open a box
Then click-> “RUN”-> select “English”-> click ok
Click on “Next-> Click “I accept” -> Click “Next”->Click “Next-> click “Install”-> Click “Finish”

** Download the images (faces) which you want to swap (any


two images).
Make sure face is clear, with hairs or glasses etc on face. And
take big sized image.
1. Go to “File” Menu -> open-> you have to browse the first
image-> open 1 Layer st

2. Go to “File” Menu-> “open as Layer”-> you have to browse


the second image->open 2 Layer nd

3. Click on “Free Select Tool”. Using this tool select the face
area which you want to swap.
4. Copy the selected area (by pressing Ctrl+C key or Go to
“Edit” Menu -> “Copy”)
5. Paste it (by pressing Ctrl+V key or Go to “Edit” Menu ->
“Paste”)
It will appear in 3 Layer, as Floating Layer
rd

6. Right click on 3 Layer->Select “To New Layer” (you can


rd

delete the 2 Layer/ or make Inactive)


nd

7. Go to “Layer” Menu-> Select” Layer to Image size”


8. Adjust the size of image (face) using “Scale” Tool and if you
need Rotate it using “Rotate” tool
9. Place the pasted image in the proper position (try to adjust the
position of both eyes at same position). You can reduce the
“Capacity” of 3 Layer
rd

10. Go to “Filters” Menu-> Select “G’MIC“ plug-in


You will get a G’Mic box, in that you have to search “Blend” ->
select “blend (seamless)”
àThen adjust the inner and outer fading (optional). Then
click “Apply”-> click “OK”
11. Save the image -> Go to file-> Export-> enter the filename
(.jpg or.png )-> click on export-> export
(ii) Dispersion/Disintegration/Explosion Effect using GIMP
Dispersion is defined as the breaking up or scattering of
something. A Dispersion effect makes explosive visuals, which
take the core subjects of your photos and spread them across the
image canvas.

or or
https://www.youtube.com/watch?v=kUt2cditN1g
https://www.youtube.com/watch?v=fsfI6BRO3ps
https://www.youtube.com/watch?v=Ez5uaH_FVA4

Here are the steps for (face) disintegration effect:


1. Go to File menu-> Select open-> open an image (face image)
2. Go to Colors menu-> Select Levels-> Adjust the color levels
(increase the sharpness of the image).
Then click on OK
3. Duplicate the (face) image layer (right click on image layer->
select duplicate layer)
Turn off the visibility of the duplicate layer. And Select
Original (Face) layer
4. Go to Tools menu-> Select Transform-> Select Wrap
Transform
Adjust the size of the brush (as per your image)-> Using
mouse stretch the image (from 1 side)
5. Turn on the visibility of the duplicate layer
Select the duplicate layer
6. Select Paint Brush tool-> choose the “splats-2” brush
Adjust the size of the brush
7. Change the Foreground (FG) color to white
8. Gently apply the paint brush on the side of the image (make
sure the edge is not visible)
9. Add a Layer Mask on duplicate Layer (right click on
duplicate layer->select add layer mask (white))
10. Change the Foreground (FG) color to black
11. Increase the brush size, and apply the paint brush tool on
side of the image.
(iii) Displacement Effect using GIMP
It is realistic effect on texts, paints, images; when they are blend
with a textured background (map/image).

It is an effect, like a text, paint, or an image to become (for


example) a flag in the wind, or matches the deformation of a
wrinkled cloth, or matches a deformed wall like a deformed
bricked wall.

or or
https://www.youtube.com/watch?v=FpYwxPE9J54
https://www.youtube.com/watch?v=0Vz8ES48DpQ
https://www.youtube.com/watch?v=uuWJg_ew3No

Here are the steps for displacement effect on face image (as
background) with a flag image:
1. File Menu-> Open->[open the image –face image]
2. Select Path tool-> [using path tool, select the area—face area
—around the face make a selection]
3. Press ctrl+ C (copy the selection) and Press ctrl+ V (paste)
4. Right click on the new Layer-> “As a New Layer” (it will
create a pasted layer)
5. Go to Layer Menu-> Layer to Image size
6. Go to Colors Menu-> Select Saturation (it will make change
image black & white)
Set Saturation as 0 -> click ok
7. Drag the 2 image (flag image) and drop on the face (on
nd

gimp)
8. Select Scale tool-> click on 2 image(or flag)-> adjust the size
nd

of the 2 image (or flag)


nd

9. Select Alignment tool-> set align as Centre


10. Change the Mode-> Soft Light (for 2 image layer- or flag nd

image layer)
11. Use Move tool to adjust the 2 image on face nd

12. Go to Filters Menu-> select Distort-> Select Whirl & Pinch


Set Whirl as 0
Set pinch as -0.5
Click ok
13. Add Layer mask : Right click on 2 image layer-> select nd

Add Layer Mask-> Black-> add button


14. Select Pasted Layer-> Right click> Select Alpha to Selection
15. Select 2 Image Layer-> click n Bucket Fill tool
nd

[ Make sure your Foreground color is White and Background


color is Black]
Click on the 2 image (or inside the selection)
nd

16. Go to Select Menu-> Select None


[change the Foreground color is Black and Background color is
White]
17. Make the Layer Mask active (click on mask layer)
And Using paintbrush tool click over the eyes (you can adjust
the size, and brush type)
18. Use Erase tool to delete the black and white color—just
erase the eyes
19. Go to Filters-> Map-> Displace
Set Axus1 input as (Black & white face)
Set Axus2 input as (Black & white face)
Horizontal as 4 (check the preview and accordingly adjust)
Vertical as 4 click ok

SYNFIG STUDIO
Introduction to Synfig Studio
Synfig Studio (also known as Synfig) is a free and open source vector based 2D animation
software. It uses the filename extension .sif (uncompressed), .sifz (compressed) or .sfg (zip container
format).

Downloading Synfig Studio Open Source Tools: https://www.synfig.org/


Synfig Studio main interface components are:

▪ Toolbox — is the main Synfig Studio window. It contains tools


and more to create and edit your artwork.
▪ Canvas — displays your artwork and animation.

▪ Panels — contain tools and information about certain elements

of your project. Some panels will allow you to modify those


elements.

The center of the window is the Canvas Window. A new Canvas Window appears each time Synfig Studio starts.

Toggle Animate Editing Mode:

Animate Editing Mode Off Changes will be applied throughout the entire timeline of the animation.

Animate Editing Mode On Changes will create a waypoint to remember the value.

Bouncing Ball or Rolling Ball using SYNFIG STUDIO

https://www.youtube.com/watch?v=JtUxHVIBFhE
https://www.youtube.com/watch?v=2Bi--fpBhsM
Animated Banner/Logo using SYNFIG STUDIO
Animated logos (adding motion to your logo) help you to create
a strong image/logo for your brand/website.
Animated banners are made up of a series of frames. An individual display time is set for each frame,
measured in fractions of a second. A loop is a complete cycle through all of the images in an animated
sequence.
Because of the eye catching movement, animated banners stand out from the static data on websites and
social media platforms.
For animated web banner designs, you can animate texts, shapes, texts inside shape, images.

Web Banner designs:

https://www.youtube.com/watch?v=RL1tZl61H5Q
https://www.youtube.com/watch?v=7x5ET6JTvKY
https://www.youtube.com/watch?v=VxS0qu8ovvA
https://www.youtube.com/watch?v=UL1ZHkouWgM

Flying Object using SYNFIG STUDIO

Flying animation of an object (like bird, plane, balloons, any


shape etc.) on scene/background.
https://www.youtube.com/watch?v=odlPI6hfnDM
https://www.youtube.com/watch?v=rL11Dkisk7Q

Day Night Effect using SYNFIG STUDIO

Convert day time scene/image into a night time scene


(animated). Adjust the color/gradient values to make the scene
darker or brighter (for night to day).

https://www.youtube.com/watch?v=ZiK-2bB15Bg
https://www.youtube.com/watch?v=Dr8aqNF2jhc
https://www.youtube.com/watch?v=AmNzxxb8BkY

JAVASCRIPT PROGRAMS

Embed multimedia component text and image in your web page and make the image Zoom In -
Zoom out using JavaScript function.
Answer:
<HTML>
<HEAD>
<TITLE>ZOOM-IN AND ZOOM-OUT</TITLE>
</HEAD>
<BODY BGCOLOR="#996666">
<marquee>
<FONT COLOR="#000066" size="30">Zooming In....Zooming Out Image....</FONT>
</marquee>
<img src="nr.jpg" name="slide" height=600 width=675 border=5>
<Script>
var i=600;
var j=50;
var k;
var zoomspeed=500;
function zooming()
{
if(i==600)
{
k=0;
}
if(i==0)
{
k=1;
}
if(k==0)
{
document.images.slide.width=i;
document.images.slide.height=i;
i=i-j;
}
else
{
document.images.slide.width=i;
document.images.slide.height=i;
i=i+j;
}
setTimeout("zooming()", zoomspeed);
}
zooming();
</SCRIPT>
</BODY>
</HTML>
Embed an audio file in your web page using JavaScript function.

<HTML>
<HEAD>
<TITLE>EMBED AUDIO FILE ON WEB PAGE</TITLE>
</HEAD>
<BODY>
****Code to embed Audio file on web page***
<SCRIPT>
function play()
{
var source="horse.mp3";
document.write('<EMBED SRC='+source+' VOLUME
="100" HEIGHT="500" WIDTH="1000">');
}
</SCRIPT>
<input type="button" value="click" onClick="play()">
</BODY>
</HTML>

Embed a video file in your web page using JavaScript


function.

<HTML>
<HEAD>
<TITLE>EMBED AUDIO FILE ON WEB PAGE</TITLE>
</HEAD>
<BODY>
****Code to embed Video file on web page***
<SCRIPT>
function play()
{
var source="jarir.mp4";
document.write('<EMBED SRC='+source+' VOLUME
="100" HEIGHT="300" WIDTH="500">');
}
</SCRIPT>
<input type="button" value="click" onClick="play()">
</BODY>
</HTML>

ITEC-241 MULTIMEDIA APPLICATIONS


Page 2

You might also like