Multimedia and Images

Internet Explorer 2.0 enables you to embed multimedia components and images in HTML pages. This includes .avi (Audio Video Interleave) video clips, sound and marquee text.

You are able to center all of the tags described on this page, for more information see Center.

This following information is described here:

• Embed Images and Video Clips
  
• Embed Background Sound
  
• Insert a Marquee
  

HTML Feature Which Embeds Images and Video Clips

IMG

You can embed video clips in HTML by adding several new attributes, notably DYNSRC (Dynamic Source), to the IMG tag. Non-video-enabled browsers display still images in their place.

The HTML used to insert the video clip at right is:

<IMG DYNSRC="[unarchived-media]" SRC="[unarchived-media]" WIDTH=46 HEIGHT=46 LOOP=INFINITE ALIGN=RIGHT>

Here is a complete description of the new attributes.

Attribute	Explanation	Example	Source
ALIGN=TOP, MIDDLE, or BOTTOM	The surrounding text is aligned with the top, middle, or bottom of the picture.	<IMG SRC="[unarchived-media]" ALIGN=MIDDLE>This text is aligned with the middle of the graphic named Sample.	HTML 3
ALIGN=LEFT, or RIGHT	The picture is drawn as a left-flush or right-flush "floating image," and text will flow around it. (See BR CLEAR.)	<IMG SRC="[unarchived-media]" ALIGN=LEFT>This text will appear to the right of the graphic named Sample.	HTML 3
ALT="text"	Specifies text that will be displayed in place of the picture if Show Pictures is turned off.	<IMG SRC="[unarchived-media]" ALT="Picture of the Taj Mahal">	HTML 2
BORDER=n	Specifies the size of a border to be drawn around the image. If the image is a hyperlink, the border is drawn in the appropriate hyperlink color. If the image is not a hyperlink, the border is invisible.	<A HREF="[unarchived-link]" SRC="[unarchived-media]" BORDER=5>That was an image with a five-pixel-wide colored border around it.</A>	Netscape
CONTROLS	If a video clip is present, a set of controls is displayed under the clip.	<IMG DYNSRC="[unarchived-media]" CONTROLS> The above video has a set of transport controls under it.	IExplore
DYNSRC="[unarchived-media]">URL	Specifies the address of a video clip or VRML world to be displayed in the window. Stands for Dynamic Source.	<IMG SRC="[unarchived-media]" DYNSRC="[unarchived-media]" If your browser supports inline video, you will see the movie Test.avi; otherwise you will see the picture Sample.gif.	IExplore
HEIGHT=n	Along with WIDTH, specifies the size at which the picture is drawn. (If the picture's actual dimensions differ from those specified with WIDTH and HEIGHT, the picture is stretched to match what's specified.) Internet Explorer also uses this to draw a placeholder of appropriate size for the picture before it's loaded.	<IMG SRC="[unarchived-media]" WIDTH=320 HEIGHT=200>	HTML 3
HSPACE=n	Along with VSPACE, specifies margins for the image. Similar to BORDER, except the margins are not painted with color when the image is a hyperlink.	<IMG SRC="[unarchived-media]" HSPACE=5 VSPACE=10> This image has five pixels of space on its left and right, and 10 pixels of space above and below.	Netscape
ISMAP	Identifies the picture as a server-side image map. Clicking the picture transmits the coordinates of the click back to the server, triggering a jump to another page.	The following inserts the picture Sample.gif into the document and indicates that when the user clicks it, the server should interpret the click according to the information in Jump.map: <A HREF="[unarchived-link]" <IMG SRC="[unarchived-media]" ISMAP></A>	HTML 2
LOOP=n LOOP=INFINITE	Specifies how many times a video clip will loop when activated. If n=-1, or if LOOP=INFINITE is specified, it will loop indefinitely.	<IMG SRC="[unarchived-media]" DYNSRC="[unarchived-media]" LOOP=3> The above video will loop three times when activated. <IMG SRC="[unarchived-media]" DYNSRC="[unarchived-media]" LOOP=INFINITE> The above video will loop indefinitely until stopped.	IExplore
SRC	Specifies the address of the picture to insert.	<IMG SRC="[unarchived-media]" www.sample.com/test.gif">	HTML 2
START= FILEOPEN and/or MOUSEOVER	For video clips: specifies when the file should start playing. FILEOPEN means start playing as soon as the file is done opening. This is the default. MOUSEOVER means start playing when the user moves the mouse cursor over the animation.	<IMG SRC="[unarchived-media]" DYNSRC="[unarchived-media]" START=FILEOPEN> The above video will start playing as soon as it is opened. <IMG SRC="[unarchived-media]" DYNSRC="[unarchived-media]" START=MOUSEOVER LOOP=5> The above video will start playing when the user moves the mouse over it, and will loop five times before stopping.	IExplore
	The user can specify both together.	<IMG SRC="[unarchived-media]" DYNSRC="[unarchived-media]" START=MOUSEOVER, FILEOPEN> The above video will play once as soon as it opens and thereafter will play whenever the user moves the mouse over it.
USEMAP "map name"	Identifies the picture as a client-side image map and specifies a MAP to use for acting on the user's clicks. See Client Side Image Maps for a code example.	<IMG SRC="[unarchived-media]" USEMAP "#map1"> IExplore	IExplore
VSPACE=n	See HSPACE.	<IMG SRC="[unarchived-media]" HSPACE=5 VSPACE=10> This image has five pixels of space on its left and right, and 10 pixels of space above and below.	Netscape
WIDTH=n	See HEIGHT.	<IMG SRC="[unarchived-media]" WIDTH=320 HEIGHT=200>	HTML 3

HTML Feature Which Embeds Background Sound

BGSOUND

The new BGSOUND tag allows you to create pages with background sounds or "soundtracks." The sound you heard when you opened this page is a background sound. (Choose Refresh from the View menu to hear it again.) Sounds can either be samples (.wav or .au format) or MIDI (.mid format).

The HTML entry used to insert the background sound into this page is:

<BGSOUND SRC="[unarchived-media]">

Here are the attributes associated with BGSOUND.

Attribute	Explanation	Example	Source
SRC="[unarchived-media]">URL	Specifies the address of a sound to be displayed.	<BGSOUND SRC="[unarchived-media]" will hear a boinging noise as soon as Internet Explorer has downloaded the file Boing.wav.	IExplore
LOOP=n LOOP=INFINITE	Specifies how many times a sound will loop when activated. If n=-1, or if LOOP=INFINITE is specified,it will loop indefinitely.	<BGSOUND SRC="[unarchived-media]" will hear a boinging noise five times in a row. <BGSOUND SRC="[unarchived-media]" LOOP=INFINITE>You will hear boinging noises as long as the page is active.	IExplore

MARQUEE

The new MARQUEE tag enables you to create a scrolling text marquee. Here is an example of one:


This is a scrolling marquee.


The HTML entry used to insert the marquee above is:

<MARQUEE BGCOLOR=#FFFFBB DIRECTION=RIGHT BEHAVIOR=SCROLL SCROLLAMOUNT=10 SCROLLDELAY=200><FONT COLOR="WHITE">This is a scrolling marquee.</FONT></MARQUEE>

Marquees can be left- or right-aligned, like images, and have a variety of attributes to control them.

Attribute	Explanation	Example	Source
none	Makes a scrolling text marquee.	<MARQUEE>This text will scroll!</MARQUEE>	IExplore
ALIGN=TOP, MIDDLE, or BOTTOM	Specifies that the text around the marquee should align with the top, middle, or bottom of the marquee.	<MARQUEE ALIGN=TOP>The following words, "Hi there!", will be aligned with the top of this marquee.</MARQUEE> Hi there!	IExplore
BEHAVIOR= SCROLL, SLIDE, or ALTERNATE	Specifies how the text should behave. SCROLL (the default) means start completely off one side, scroll all the way across and completely off, and then start again. SLIDE means start completely off one side, scroll in, and stop as soon as the text touches the other margin. ALTERNATE means bounce back and forth within the marquee.	<MARQUEE BEHAVIOR=SCROLL>This text will scroll all the way on and then all the way off.</MARQUEE> <MARQUEE BEHAVIOR=SLIDE>This marquee will scroll in and "stick."</MARQUEE> <MARQUEE BEHAVIOR=ALTERNATE>This text will bounce back and forth.</MARQUEE>	IExplore
BGCOLOR= #rrggbb or colorname	Specifies a background color for the marquee, either as a RGB triple or using a "friendly" colorname. (See Using Color for a list of valid colornames.)	<MARQUEE BGCOLOR=#FF0000>This marquee has a red background!</MARQUEE>	IExplore
DIRECTION=LEFT or RIGHT	Specifies which direction the text should scroll. The default is LEFT, which means scrolling to the left from the right.	<MARQUEE DIRECTION=RIGHT>This marquee will scroll from the left in a rightward direction.</MARQUEE>	IExplore
HEIGHT=n or HEIGHT=n%	Specifies the height of the marquee, either in pixels or as a percentage of the screen height.	<MARQUEE HEIGHT=50% WIDTH=80%>This marquee is half the height of the screen and 80% of the width.</MARQUEE>	IExplore
HSPACE=n	Specifies left and right margins for the outside of the marquee, in pixels.	<MARQUEE HSPACE=10 VSPACE=10>This marquee will be separated from the surrounding text by a 10-pixel border.</MARQUEE>	IExplore
LOOP=n LOOP=INFINITE	Specifies how many times a marquee will loop when activated. If n=-1, or if LOOP=INFINITE is specified, it will loop indefinitely.	<MARQUEE LOOP=5>This marquee will loop five times.</MARQUEE>	IExplore
SCROLLAMOUNT=n	Specifies the number of pixels between each successive draw of the marquee text.	<MARQUEE SCROLLDELAY=5 SCROLLAMOUNT=50>This is a very fast marquee.</MARQUEE>	IExplore
SCROLLDELAY=n	Specifies the number of milliseconds between each successive draw of the marquee text.	<MARQUEE SCROLLDELAY=5 SCROLLAMOUNT=50>This is a very fast marquee.</MARQUEE>	IExplore
VSPACE=n	Specifies top and bottom margins for the outside of the marquee, in pixels.	<MARQUEE HSPACE=10 VSPACE=10>This marquee will be separated from the surrounding text by a 10-pixel border.</MARQUEE>	IExplore
WIDTH=n or WIDTH=n%	Sets the width of the marquee, either in pixels or as a percentage of the screen width.	<MARQUEE HEIGHT=50% WIDTH=80%>This marquee is half the height of the screen and 80% of the width.</MARQUEE>	IExplore