How it works

The script looks for the latest object element in the DOM tree and adds a new div element over it.
The script assigns a unique random identifier to the div element.
The action of zooming in and out is handled by a function associated to the onclick events of the clickable images.
The unique random identifier is used as a parameter of the function, which looks for the first object element after the div element that contains the identifier.

MediaWrap Mozilla add-on issue

If the MediaWrap Mozilla add-on is installed and enabled, it will modify the DOM tree of the web page, turning the object elements into embed elements.
To fix this issue, if the script cannot find an object element in the DOM tree, it then looks for the latest embed element.

Javascript code

/* jsZoom.js
*  version 1.0
*  written by Donato Furlani - 2008
*
*  no parameters needed
*  just include the script after an OBJECT element in the document
*/

// JSZOOMDIR: directory containing images for the controls 
// (declare JSZOOMDIR="" if images are stored
// in the same directory as the script)
var JSZOOMDIR = "../css/img/";

// DELTAZOOM : the number of pixels that will be added
// or subtracted to the new size
var DELTAZOOM = 40;

initJsZoom();

function jsZoom(whichone,what,eType) {
 var divid = document.getElementById(whichone);

 var found = false;
 var walk = divid;
 var a = "";
 while (walk && !found) {
  if (walk.nodeName == eType) { 
   found = true; 
   var oheight = parseInt(walk.getAttribute("height")); 
   var owidth = parseInt(walk.getAttribute("width")); 
   if (what == "in") {
    oheight = oheight + DELTAZOOM;
    owidth = owidth + DELTAZOOM;
   } else {
    oheight = oheight - DELTAZOOM;
    owidth = owidth - DELTAZOOM;
   }
   walk.setAttribute("height", oheight); 
   walk.setAttribute("width", owidth);

   //embed element inside object element (old HTML)
   var emb = walk.getElementsByTagName("embed");
   if (emb.length > 0) {
    emb[0].setAttribute("height", oheight);
    emb[0].setAttribute("width", owidth);
   }
  }
  walk = walk.nextSibling;
 }
}

function initJsZoom() {
 var objs = document.getElementsByTagName("object");
 var eleType = "OBJECT";
 if (objs.length == 0) {
  //Mozilla  MediaWrap add-on is enabled, there are no OBJECT elements!
  //switch to EMBED elements
  objs = document.getElementsByTagName("embed");
  var eleType = "EMBED";
  if (objs.length == 0) return false; //give up
 }

 var lasto = objs[objs.length-1];
 var zdiv = document.createElement("div");
 zdiv.style.margin = "0";
 zdiv.style.padding = "3px";
 zdiv.style.fontSize = "12px";
 var randon = Math.round(Math.random()*1234);
 var ul = document.createElement("ul");
 ul.style.padding = "0";
 ul.style.margin = "0";
 var li1 = document.createElement("li");
 li1.style.listStyleType = "none";
 li1.style.display = "inline";
 li1.style.marginRight = "4px";
 li1.style.padding = "0";

 var li2 = document.createElement("li");
 li2.style.listStyleType = "none";
 li2.style.display =  "inline";
 li2.style.padding = "0";
 li2.style.marginRight = "4px";
 zdiv.appendChild(ul);
 ul.appendChild(li1);
 ul.appendChild(li2);
 var a1 = document.createElement("a");
 var a2 = document.createElement("a");
 var i1 = document.createElement("img");
 var i2 = document.createElement("img");
 i1.src = JSZOOMDIR + "zoomin.png";
 i2.src = JSZOOMDIR + "zoomout.png";
 i1.alt = "Zoom IN";
 i1.height = "30";
 i2.height = "30"; 
 i2.alt = "Zoom OUT";
 i1.style.border = "none";
 i2.style.border = "none";
 a1.href = "javascript:jsZoom('id" + randon + "','in', '"  + eleType + "');";
 a1.appendChild(i1);
 a2.href ="javascript:jsZoom('id" + randon + "','out', '" + eleType + "');";
 a2.appendChild(i2);
 li1.appendChild(a1);
 li2.appendChild(a2);
 zdiv.id = "id" + randon;
 lasto.parentNode.insertBefore(zdiv,lasto);
}