HTML Markup | JavaScript | Java | Home & Links

Tutorial 17 - MultiMedia

MultiMedia adds graphics, audio, video and print presentations. When properly used, these effects can be important viewer attractors or content highlighters.

List Selection Rotator

Slideshows and music tools often need to increment (or randomize) the current selected value of a list control based on a timer.

Timed Image Cycler

Any image link can be time-cycled through several images. This is useful for sponsored ads and event promotions. The first step is to create same-size images. Corresponding URLs for the images and for linked websites (optional) are then loaded into the arrays named adImages and adURLs defined at the start of the script. The img element for the link should be initialized to the first image in the array. The delay between ads is set by the setTimeout() method. The display is pointed at by the identifier AdBanner. The cycling is started by using the onLoad event in the body element.

adImages=["images/mit.gif","images/inria.gif", "images/keio.gif"];
adURLs=["www.lcs.mit.edu","www.inria.fr","www.keio.ac.jp"];thisAd=0;
function gotoAd(){location.href="http://"+adURLs[thisAd];}
function cycleAds(){
  if(++thisAd===adImages.length){thisAd=0;} //move to next ad
  document.images.adBanner.src=adImages[thisAd]; //show current
  setTimeout(cycleAds,3000);}  //change every 3 seconds

The above is placed in the head section and the following in the body:

<body onLoad="cycleAds()">
...
<a href="javascript:gotoAd()">
<img id="adBanner" style="height:55px;width:50px"
  src="images/mit.gif" alt="Our sponsors"/></a>

Our Sponsors: Our sponsors

The banner ad cycling concept can be easily extended to present a slideshow to viewers.

Image Strips and Viewports

Many designs such as advertisement banners use a slidestrip where several images are displayed as a group. showImg offers non-repeated random image selection from user prepared trays or lists. Trays provide unique groups for a slidestrip. Settings can be made for: clicked image is link (isLink), hovered image pops larger version (isPop), randomization (isRandom) and redisplay of new selection is on timed basis (isTimed). Tray image database entries are of the form image, redirection url, alt value. Document calls define elementName, numberOfImages, folderName [default is none], stripOrientation [default is horizontal], trayName [default is hAds or vAds depending on orientation]. The last three parameters are optional. Images are dynamically written to divisions that can be inserted anywhere in the page using calls like onload="showImg(divId,numImg,folder,dirn,trayName);".

A viewport is an image viewer that allows transition selection by hovering on a related menu item. It is set up similar to a rollover effect with event initiators onmouseover and onmouseout. The onclick event can be added to link to an appropriate page (perhaps full screen view). Viewport.zip is a working example that can be tailored with css and script. Be sure to consult the readme.txt file for setup information.

Transitions and Slide Shows

Image transitions are changes from one image to another. The basic transition is an abrupt switch from one to another. Several methods can be used to make the transition more attractive. These methods include:

Presentation slide shows are linear structured events that focus on transferring facts to the audience in an effective and memorable way, often enhanced with lists and graphics. In some cases interactivity and animation are included. The most commonly used presentation slideshow is PowerPoint but this program uses proprietary techniques and bulky files. In addition, style is intermixed with content in the design process. Many Open Source slideshows including S5, S5 Reload and slidy use a combination of CSS and JavaScript to duplicate the functionality of PowerPoint.

A different approach to slideshows is available for those who are showing non-interactive slides but need a slick interface with an auto-sequencing timer, transitions and perhaps audio for stand-alone kiosk type operations. My own S3 (Simple Slide Show) can be a start point for those who want to roll their own slideshow.

JukeBoxes and Radios

Jukeboxes and radios play tunes from playlists using media players (eg MediaPlayer or QuickTime). The difference is that a radio continues on to the next song automatically. Radio playlists are often shuffled (random ordered) before starting or after a certain percentage has been played.

Building a jukebox or radio requires assembling these components:

GUI controls such as a group of radio buttons or a selection list can set a pointer to the music file's URL. The selection can be started with an onchange event or with a toggle button / onclick event. ondblclick is yet another option. A Now Playing xxx message would add a bit of flash!

Example scripts: audiojs, HTML5, Flash.

Charts and TimeLines

Simple bar charts or graphs can be used to show the results of a survey or as a progress bar. Lines are drawn from a database of start, stop, text and color. An extension that would give a better look to the bars is to add shadowing by redrawing with x&y offsets and either a black or lighter shade of the bar color. Other obvious extensions are to generalize the data entry mechanism and to add a vertical drawing option. For cut/paste progress bars, google on javascript progress bars.

A special charting/graphing application is a TimeLine where the origin for each timeline bar is not at a single edge but is based on the start time of an event. Gantt charts also have this requirement but include the complexity that the bars are interrelated.

My simple solution for timelines is to draw timeline bars from a database with fields for start, stop, group, infolink. Styles are set for the chart, header and individual timelines. You can view a demo at Timelines of Cryptology. Both the HTML and the script source can be ripped and reused. A needed extension is popups for events occurring within any lifeline. Another possible extension to the project would be to include Gantt chart dependencies.

An alternative timeline char approach is used by EasyTimeLine which generates an image and an imagemap from supplied data. It scales much better than my program and is very easy to customize but there are some inflexibilities that are inherent in a non-DHTML solution. Currently these include link color selection and inability to use an image as background canvas. But this is a small price to pay for scalability and the ease of use! A more complex charting utility that you can use simply by linking your page and data to is TimeLine.



JR's HomePage | Comments [jstutorh.htm:2014 08 19]