Submenu links to images and movies

programming web dev
1

So, I have a fairly simple javascript submenu that links to images that replace a “placeholder” in the site. I’m trying to figure out how to use these submenus to additionally show quicktime files in the same spot as the images load. Heres the coding for my javascript file:


//Main Nav

function Browser() {

  var ua, s, i;

  this.isIE    = false;  // Internet Explorer
  this.isNS    = false;  // Netscape
  this.version = null;

  ua = navigator.userAgent;

  s = "MSIE";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isIE = true;
    this.version = parseFloat(ua.substr(i + s.length));
    return;
  }

  s = "Netscape6/";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS = true;
    this.version = parseFloat(ua.substr(i + s.length));
    return;
  }

  // Treat any other "Gecko" browser as NS 6.1.

  s = "Gecko";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS = true;
    this.version = 6.1;
    return;
  }
}


var browser = new Browser();


function removeClassName(el, name) {

  var i, curList, newList;

  if (el.className == null)
    return;

  // Remove the given class name from the element's className property.

  newList = new Array();
  curList = el.className.split(" ");
  for (i = 0; i < curList.length; i++)
    if (curList* != name)
      newList.push(curList*);
  el.className = newList.join(" ");
}

// Submenu links

var submenu=new Array()

submenu[0]='<a onclick="return showPic(this)" href="images/archigram.jpg">archigram poster</a><br><a onclick="return showPic(this)" href="images/archigram_2.jpg">archigram denotative</a><br><a onclick="return showPic(this)" href="images/amazon.jpg">amazon concordance</a><br> <a onclick="return showPic(this)" href="images/hierarchy.jpg">hierarcy poster</a><br><a onclick="return showPic(this)" href="images/amunicons.jpg">amunicons</a><br><a onclick="return showPic(this)" href="images/elegante.jpg">elegante typeface</a><br><a onclick="return showPic(this)" href="images/urban.jpg">urban outfitters</a><br><a onclick="return showPic(this)" href="images/orchid.jpg">orchid valley</a><br><a onclick="return showPic(this)" href="images/magazine.jpg">infinity spread</a><br><a onclick="return showPic(this)" href="images/reconstruction.jpg">reconstruction</a><br><a onclick="return showPic(this)" href="images/self.jpg">selfish</a><br><a onclick="return showPic(this)" href="images/figure.jpg">the figure</a><br><a onclick="return showPic(this)" href="images/glaciers.jpg">glaciers</a><br><a onclick="return showPic(this)" href="images/hawaii.jpg">sandwich islands</a>'

submenu[1]='<a onclick="return showPic(this)" href="images/pontiac.jpg" >pontiac boards</a><br> <a onclick="return showPic(this)" href="images/dash.jpg">mrs dash boards</a><br><a onclick="return showPic(this)" href="images/ps3.jpg">ps3 style frame</a><br><a onclick="return showPic(this)" href="images/knorss.jpg">knorss boards</a><br><a onclick="return showPic(this)" href="images/bp.jpg">bp boards</a><br><a onclick="return showPic(this)" href="bp.qtl">bp spot</a><br><a onclick="return showPic(this)" href="images/adidas.jpg">adidas style frames</a><br><a onclick="return showPic(this)" href="images/comcast.jpg">comcast boards</a><br><a onclick="return showPic(this)" href="images/vsp.jpg">vsp boards</a><br><a onclick="return showPic(this)" href="images/sync.jpg">sync boards</a>'

submenu[2]='<a onclick="return showPic(this)" href="images/8bite.jpg">8bite</a><br><a onclick="return showPic(this)" href="images/dwelling.jpg">self_centered</a><br><a onclick="return showPic(this)" href="images/hi.jpg">smoke.fog.chat</a><br><a onclick="return showPic(this)" href="images/interference.jpg">interference</a><br>'

submenu[3]='<a onclick="return showPic(this)" href="images/archigram.jpg" >archigram poster</a><br> <a onclick="return showPic(this)" href="images/hierarchy.jpg">hierarcy poster</a><br><a onclick="return showPic(this)" href="images/amunicons.jpg">amunicons emoticon set</a><br><a onclick="return showPic(this)" href="images/elegante.jpg">elegante typeface</a>'


var menuobj=document.getElementById? document.getElementById("subs") : document.all


var activeButton = null;

function buttonClick(event, which) {

  var button;

  // Get the target button element.

  if (browser.isIE)
    button = window.event.srcElement;
  else
    button = event.currentTarget;
    
  // Blur focus from the link to remove that annoying outline.

  button.blur();

  // Reset the currently active button, if any.

  if (activeButton != null)
    resetButton(activeButton);

  // Activate this button, unless it was the currently active one

  if (button != activeButton) {
    depressButton(button);
    activeButton = button;
    thecontent=(which==-1)? "" : submenu[which]
  }
  
  else {
    activeButton = null;
    thecontent = ""
  }
    
  menuobj.innerHTML=thecontent

  return false;
}

function depressButton(button) {
button.className += "active";
}

function resetButton(button) {
  removeClassName(button, "active");
}

function resetSub(button) {
  menuobj.innerHTML=""
}

function showPic (whichpic) {
 if (document.getElementById) {
  document.getElementById('placeholder').src = whichpic.href;
  if (whichpic.title) {
   document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
  } else {
   document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
  }
  return false;
 } else {
  return true;
 }
}

I tried using a qtl file to reference to the mov file, but it didn’t really work, and now I’m wondering if I need a iframe to display embedded quicktime files. Any ideas?