HTML Support - Images

Multimedia and Images

Microsoft® Internet Explorer 3.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 can 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:

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="sample.gif" 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="sample.gif" 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="sample.gif" 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="sample.url"><IMG SRC="test.gif" 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="fun.avi" CONTROLS>
The above video has a set of transport controls under it. IExplore

DYNSRC=URL Specifies the address of a video clip or VRML world to be displayed in the window. Stands for Dynamic Source. <IMG SRC="sample.gif" DYNSRC="test.avi"> 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="sample.gif" 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="sample.gif" 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="jump.map"> <IMG SRC="sample.gif" 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="preview1.gif" DYNSRC="movie.avi" LOOP=3>
The above video will loop three times when activated.

<IMG SRC="preview1.gif" DYNSRC="movie.avi" LOOP=INFINITE>
The above video will loop indefinitely until stopped. IExplore

SRC Specifies the address of the picture to insert. <IMG SRC="http:// 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 pointer over the animation. <IMG SRC="preview1.gif" DYNSRC="skiing.avi" START=FILEOPEN>
The above video will start playing as soon as it is opened.
<IMG SRC="preview2.gif" DYNSRC="curling.avi" 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="preview3.gif" DYNSRC="windsurfing.avi" 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="sample.gif" USEMAP "#map1"> IExplore IExplore

VSPACE=n See HSPACE. <IMG SRC="sample.gif" 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="sample.gif" WIDTH=320 HEIGHT=200> HTML 3

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="sample.gif" 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="sample.gif" 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="sample.gif" 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="sample.url"><IMG SRC="test.gif" 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="fun.avi" CONTROLS> The above video has a set of transport controls under it.	IExplore
DYNSRC=URL	Specifies the address of a video clip or VRML world to be displayed in the window. Stands for Dynamic Source.	<IMG SRC="sample.gif" DYNSRC="test.avi"> 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="sample.gif" 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="sample.gif" 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="jump.map"> <IMG SRC="sample.gif" 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="preview1.gif" DYNSRC="movie.avi" LOOP=3> The above video will loop three times when activated. <IMG SRC="preview1.gif" DYNSRC="movie.avi" LOOP=INFINITE> The above video will loop indefinitely until stopped.	IExplore
SRC	Specifies the address of the picture to insert.	<IMG SRC="http:// 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 pointer over the animation.	<IMG SRC="preview1.gif" DYNSRC="skiing.avi" START=FILEOPEN> The above video will start playing as soon as it is opened. <IMG SRC="preview2.gif" DYNSRC="curling.avi" 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="preview3.gif" DYNSRC="windsurfing.avi" 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="sample.gif" USEMAP "#map1"> IExplore	IExplore
VSPACE=n	See HSPACE.	<IMG SRC="sample.gif" 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="sample.gif" 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 format.

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

<BGSOUND SRC="start.wav">

Here are the attributes associated with BGSOUND.

Attribute Explanation Example Source

SRC=URL Specifies the address of a sound to be displayed. <BGSOUND SRC="boing.wav">You 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="boing.wav"LOOP=5>You will hear a boinging noise five times in a row.
<BGSOUND SRC="boing.wav" LOOP=INFINITE>You will hear boinging noises as long as the page is active. IExplore

Attribute	Explanation	Example	Source
SRC=URL	Specifies the address of a sound to be displayed.	<BGSOUND SRC="boing.wav">You 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="boing.wav"LOOP=5>You will hear a boinging noise five times in a row. <BGSOUND SRC="boing.wav" LOOP=INFINITE>You will hear boinging noises as long as the page is active.	IExplore

HTML Feature Which Inserts a Marquee

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

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

Back to: HTML Specification Home Page