[LON-CAPA-cvs] cvs: modules /faziophi image_1.jpg image_2.gif multiClickOnImageTest.html

Thu, 20 Mar 2008 03:27:39 -0000

faziophi		Wed Mar 19 23:27:39 2008 EDT

  Added files:                 
    /modules/faziophi	image_1.jpg image_2.gif 
                     	multiClickOnImageTest.html 
  Log:
  - Multiple click on image proof-of-concept
  
  

Index: modules/faziophi/multiClickOnImageTest.html
+++ modules/faziophi/multiClickOnImageTest.html
<html><head><script type="text/javascript">
var pointArrays = {};

function initializeClickHandler(id) {
  if (document.getElementById(id)) { // if element exists, give it an array
    pointArrays[id] = new Array();
  }
}

function clickHandler(id, event) {
  var element = document.getElementById(id);
  // for Internet Explorer
  if (window.ActiveXObject) {
     xPos = window.event.offsetX;
     yPos = window.event.offsetY;
  }
  // for others
  else {
     var top = left = 0;
     var obj = element;
     // scale parents, getting offsets along the way
     if (obj.offsetParent) {
       do {
            left += obj.offsetLeft;
            top  += obj.offsetTop;
          }  while (obj = obj.offsetParent);
     }
  xPos = event.pageX - left;
  yPos = event.pageY - top;
  }

  pointArrays[id].push([xPos, yPos]);
  alert("You clicked on element " + id + " at x=" + xPos + ", y=" + yPos +"!");
}

function clearArray(id) {
  if (pointArrays[id]) {
    pointArrays[id] = [];
    alert("Previously clicked points cleared.");
  }
  else { alert("Element not initialized or does not exist."); }
}
  
function testArray(id) {
  // check for existance of array
  if (pointArrays[id]) {
    alert(pointArrays[id]);
  }
  else { if (document.getElementById('id')) { // check for element
           alert("Element not initialized.");
         }
         else { alert("Element does not exist."); } 
       }
}

</script></head>
<body>
<p><img src="./image_1.jpg" id="test" 
        onload ="initializeClickHandler('test');"
        onclick="clickHandler('test', event);"   />
</p>
<p><a href="#" onclick="testArray('test')">Show my Points!</a></p>
<p><a href="#" onclick="clearArray('test')">Clear previously clicked points</a></p>
<p><img src="./image_2.gif" id="test2"
        onload ="initializeClickHandler('test2');"
        onclick="clickHandler('test2', event);"  />
</p>
<p><a href="#" onclick="testArray('test2')">Show my Points!</a></p>
<p><a href="#" onclick="clearArray('test2')">Clear previously clicked points</a></p>
</body></head>