Embedding Sound in Web Pages, Part II: The Volume Buttons and Gauge - Doc JavaScript | WebReference

Embedding Sound in Web Pages, Part II: The Volume Buttons and Gauge - Doc JavaScript


The Volume Buttons and Gauge

The volume buttons are rich in fucntionality that you will find useful for many other scripts. The buttons are implemented differently on Navigator and Internet Explorer. Let's take a look at the makeVolumeButtons() function:

function makeVolumeButtons() {
  var str = "";
  str += "<FONT SIZE=2 COLOR='#ffffff'>Volume</FONT><BR>";
  if (NSsound) {
    str += "<A HREF='javascript:void(0)' " +
      "onClick='if (!document.layers) changeVolume(1)' " +
      "onMouseDown='return startSlide(1)' onMouseUp='stopSlide()' " +
      "onMouseOver='return display(\"Increase volume\")' " +
      "onMouseOut='return display(\"\")'><IMG " +
      "SRC='volup.gif' WIDTH='9' HEIGHT='10' HSPACE='2' " +
      "VSPACE='3' BORDER='0'></A>";
    str += "<A HREF='javascript:void(0)' " +
      "onClick='if (!document.layers) changeVolume(-1)' " +
      "onMouseDown='return startSlide(-1)' onMouseUp='stopSlide()' " +
      "onMouseOver='return display(\"Decrease volume\")' " +
      "onMouseOut='return display(\"\")'><IMG " +
      "SRC='voldown.gif' WIDTH='9' HEIGHT='10' HSPACE='2' " +
      "VSPACE='3' BORDER='0'></A>";
  } else {
    str += "<IMG SRC='volup.gif' WIDTH='9' HEIGHT='10' " +
      "HSPACE='2' VSPACE='3' " +
      "onMouseOver='return display(\"Increase volume\")' " +
      "onMouseOut='return display(\"\")' " +
      "onMouseDown='return startSlide(1)' onMouseUp='stopSlide()'>";
    str += "<IMG SRC='voldown.gif' WIDTH='9' HEIGHT='10' " +
      "HSPACE='2' VSPACE='3' " +
      "onMouseOver='return display(\"Decrease volume\")' " +
      "onMouseOut='return display(\"\")' " +
      "onMouseDown='return startSlide(-1)' onMouseUp='stopSlide()'>";
  }
  return str;
}

As you can see, the buttons are implemented as anchors (<A> tags) on Navigator and as images (<IMG> tags) on Internet Explorer. The reason for this mismatch is that neither implementation works on both browsers. The link solution (<A> tags) does not work on Internet Explorer, due to an undocumented bug. The images solution (<IMG> tags) doesn't work on Navigator, because Navigator's <IMG> tag does not support the click event (this isn't a bug). We did not use the <FORM> tag because there is no way to customize its buttons.

Let's take a look at the <A> solution for Navigator:

str += "<A HREF='javascript:void(0)' " +
  "onClick='if (!document.layers) changeVolume(1)' " +
  "onMouseDown='return startSlide(1)' onMouseUp='stopSlide()' " +
  "onMouseOver='return display(\"Increase volume\")' " +
  "onMouseOut='return display(\"\")'><IMG " +
  "SRC='volup.gif' WIDTH='9' HEIGHT='10' HSPACE='2' " +
  "VSPACE='3' BORDER='0'></A>";

The button's event handlers are:

The volume-down button is similar to the volume-up one. Additionally, the <IMG> solution is not much different from the <A> one, as describe above. The only significant difference is that the <A> tag causes the cursor to switch from an arrow to a hand shape. By explicitly performing this routine on Internet Explorer, we can eliminate the differences between the two implementations (Navigator and Internet Explorer, <A> and <IMG>).

The volume display consists of ten images referenced off.gif. The images are named voli, where i is the relative position of the image among the others: vol9 is the name of the top dot in the volume meter, and vol0 is the bottom one. Here is the makeVolume() function, which returns the HTML code for the volume gauge:

function makeVolume() {
  var str = "";
  for (var i = 9; i >= 0; i--) {
    str +=  "<IMG SRC='" + off.src + "' HEIGHT='" + 
      off.width + "' WIDTH='" + off.width + "' NAME='vol" +
      i + "'><BR>";
  }
  return str;
}

Notice that the URL of the "off" image is stored in the src property of the off object. In order to replace the images with "on" images (the green bullets), we preload the images:

var off = new Image(4, 4);
off.src = "off.gif";
var on = new Image(4, 4);
on.src = "on.gif";

For more information on preloading images and using the Image object, see Column 1, Universal JavaScript Rollovers.

http://www.internet.com


Created: July 6, 1998
Revised: July 6, 1998

URL: http://www.webreference.com/js/column21/volume.html