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:
HTML Feature Which Embeds Images and Video Clips
You can embed video clips in HTML by adding several new attributes, notably DYNSRC (Dynamic Source), to the IMG tag. Nonvideo-enabled browsers display still images in their place.
The HTML used to insert the video clip at right is:
<IMG DYNSRC="TheEarth.avi" SRC="TheEarth.gif" WIDTH=46 HEIGHT=46 LOOP=INFINITE ALIGN=RIGHT>
Here is a complete description of the new attributes.
|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.
|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.
|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.
|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
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:
Here are the attributes associated with BGSOUND.
|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.
HTML Feature Which Inserts a Marquee
The new MARQUEE tag enables you to create a scrolling text marquee. Here is an example of one:
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.
|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>
|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
© 1996 Microsoft Corporation