HTML Markup | JavaScript | Java | Home & Links

JR's HomePage | Markup | Site Map | Page Bottom Images | ImageTools | Backgrounds | ImageMaps Media | MediaTools

»

Images / Media Lab

Images and media are used as information conveyors, audience attractors, distracters, or just plain 'eye-candy'. This page shows how to include images, audio and video media to supplement textual content.

Image Implementation

The img element is used to include images in an HTML document. There are two attributes which must be included. These attributes are src which points at the actual graphic image and alt which gives an alternate text when browser graphics download is turned off. Presentation effects are done with style properties such as float. Clickable images provide hyperlinks to pages or enlarged views of the same image. Place the img element between the <a> and </a> tags of a normal hyperlink.

Images can be previewed using viewers like XNView and manipulated by editors such as GIMP. New images can be created using drawing and painting programs, captured from other pages (right click on the image), scanned from hardcopy or downloaded from digital cameras. Conversion utilities alter other image formats into JPG or GIF. There are also drawing, animation, and slide show tools for special work.

Standard layout manipulation involves sizing, cropping, mirroring, and rotation. File size can be reduced by reducing the number of colors (ie color depth) and by reducing resolution (ie larger pixels). Advanced work includes using layers, filters and effects. Professional manipulation involves adjusting brightness, contrast, and color gamma.

Animated images appear to move. They are created by using a set of GIF images or slides that differ only slightly (or morph) from one to the next. Special tools are needed to create, organize or resize animated GIFs.

Background transparency can be applied to GIF files to allow the image to blend into the page.

Image Tools

Background Textures and Borders

Textured backgrounds can add variety and interest by simulating parchment, watermarks and grid paper. Borders can simulate comb bindings, punch holes, or perfect bound pages. Or one can choose decorative border frames as fancy stationary. Backgrounds can be made transparent on GIF files so that the same texture or border can be used with different colors. There are many 'caveats' when using images for backgrounds:

• Make sure the background does not interfere with reading the text.
• Make sure the background is not too 'busy'
• Check the effect with the graphics turned off! Some users prefer to sacrifice images for speed.

Image Mapping

Image maps provide different zones for clicking on and hyperlinking to. As an example, clicking on a body part image could reveal the name and function of that part. A map of a tourist region could provide information on the site clicked or perhaps reveal a 'zoomed in' map of that location. Image maps can be used as navigation bars but should be avoided as some users turn off graphics.

Be careful in selecting an image to be mapped. Simple line charts or basic outlines that make the boundaries of selection areas obvious are the best choice. Selection areas should also be of a reasonable size as not all users are mouse 'literate'. Make sure that the user is informed that the imagemap chooses hyperlinks. And if possible provide alternative methods for selecting the hyperlink.

Once an appropriate image is selected, it is mapped or segmented into clickable regions with a suitable image mapping program such as ImageMap, MapThis or MapEdit. The image is included in the HTML document using the 'img' element with an additional attribute 'usemap' whose value must start with an # and is the same name as specified in the map element's id and name attributes. The name attribute is required due to a bug in gecko browsers. The image map is written similar to the following:

<map id="niagara" name="niagara">
<area shape="rect" coords="7,5,292,85" href="niagfall.htm">
<area shape="rect" coords="8,86,141,204" href="notl.htm"></map>

The actual area information comes from the mapper and determines the clickable region shapes, dimensions and where to link to. Below is an image that you can practice with.

Media Implementation

Media files can be included in web documents by using a hyperlink. An example is <a href="evilaff.wav">Bill counting his money</a>. For more interactive control use an <object> element to call a media player. Set the data attribute to the filename and the type attribute to the correct mimetype (eg. audio/<extension>). Always include the id, width and height attributes. Example code for installing the browser's default media player is:

<object data="audio/zzbrnjug.mid" type="audio/mid"
  id="midiObj" width="60" height="40"></object>

Specific media player plug-ins are requested with the classid attribute. Some of the more popular media players are: Windows MediaPlayer, QuickTime, Real Media Player, WinAmp, JPlayer and VideoLan. param elements are used for control. webreference is a great reference on using the various plugins.

Example code for installing Microsoft's MediaPlayer plug-in is:

<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
  type="application/x-oleobject">
    <param name="URL" VALUE="fileUrlName">
    <param name="SendPlayStateChangeEvents" VALUE="True">
    <param name="AutoStart" VALUE="True">
    <param name="uiMode" value="none">
    <param name="PlayCount" value="9999">
  id="mediaObj" width="320" height="240"</object>

Media Caveats

• Not all users have fast connections. Indicate the file size and let them choose whether or not to download.
• Background sounds are not appreciated by some users and their tastes may vary from yours. State the title and type of sound on the link and let the user choose.
• Not all users have media players installed and downloading may be difficult for non-technical users. Always include links to appropriate player software.
• The two major browsers set up different attributes for the same concept (CONTROLS|CONTROLLER) as well as assuming different defaults for others (AUTOSTART). The way in which a control panel is displayed is also browser dependent.
• Not all ISP's have completed configurations required to associate file types with mimetypes. This step is extremely important when using a Firefox browser. Most ISP (but not all) support departments will fix this configuration problem if they are informed. See .htaccess files for possible solutions.
• TEST, TEST and RETEST any media application on a wide variety of browsers and versions. The very minimum is Firefox, Opera, Safari and Microsoft. This is NOT a pretty business.

Note: embed and bgsound are NOT legal HTML elements! However, you can use DHTML dynamic content to hide object, embed and bgsound elements from validators.

Media Tools

Tasks in setting up audio files are: recording source material, editing [for length and fidelity, levels, blends, and remixes], converting to an appropriate format and perhaps denoising. Several tries will be required to get sound levels correct. One useful feature is the ability to break the sequence into tracks. This allows a 'jump to track' tab instead of having to play from the start each time.

Tasks in producing video files are: recording source images [video cameras, digicams or off-air], editing [for length, content and quality], adding titles, captions and special effects, adding audio or background music, converting to an appropriate format such as MPEG and publishing on cdrom or a website. Most cameras provide an editing program which is convenient for the first time producer but the features are limited! Download an editor that saves in MPEG format and has most of the standard editing features and effects.

Audio Recording	Editing/PlayBack	Video Editors	Video Editors
MP3 SoundRecorder SuperSoundRecorder	Audacity AudioUtilities CDex Ripper	Zwei-Stein Video Editor BTV Video for Mac	Nero MediaCreator Virtual Edit