FORM HELP -> HotSpot

[ame1011]

Hey there, There is a javascript function on a webpage that I visit for school that requires you to click on a certain picture. It then records the exact coords that you clicked within that picture (which resides in a div tag).

Here is a portion of the code for this page:

expandcollapse popup

<tr>                                                                                   
  <td valign="middle" align="center" rowspan="2">&nbsp;</td>             
  <td colspan=2 valign="top" width="100%">                                       
<label for="Hot Spot-_2393054_1">Click on the line that shows the use of a member initializer.</label>

  </td>                                                                              
</tr>                                                                                  
<tr>                                                                                    
  <td colspan=2 valign="top">                                                        
        <a name="question_2_answers"><img                         
        src="/images/spacer.gif" width=1 height=1                                    
        alt="Question 2 answers" border="0"></a>                  







<script type="text/javascript" src="/webapps/assessment/hotspot-question.js"></script>
<script type="text/javascript" language="javascript">
<!--
formCheckList.addElement(new Check_Answer({ref_label:"2",name:"hs-ans-_4836999_1"}));

isNS = navigator.appName.indexOf("Netscape")  != -1
isIE = navigator.appName.indexOf("Microsoft") != -1

document.onmousedown = getClickCoords;


function getClickCoords(evt) 
{

  var x, y;
  var coords;
  evt = (evt) ? evt : event;
  
  var clickType=1;
  
  if (isNS)
  {
    clickType =  (evt.button == 0) ? 1 : evt.button;
  }
  else
    clickType=evt.button;
   
   if(clickType != 1)
     return; 
 
  var target = (evt.target) ? evt.target : evt.srcElement;
  var field = (target.name && target.src) ? target.name : "";
  if (field)
  {
    var questionId = field.substr(6);
      var inputId = "hs-ans-" + questionId;
      var divId = "hspot" + questionId;
      var parentDivId = "hspotwrapper"+questionId;
      var spanId = "span" + questionId;
      var targetId = "hstarget" + questionId;
      
    if (isLayerVisible(divId))
        {
          alert(document.getElementById("clearHSMessage").innerHTML);
          selectedObj = null;
          return;
        }
        
      parentDiv = document.getElementById(parentDivId);
      //netscape
      if (evt.pageX)
      {
        
          /*******/
            // workaround: set parent div static position temporarily, so we get the 
            // position relative to the page instead of top left of the wrapper div 
            // (which would always be 0, 0), then calculate the relative loc of the
            // target to the underlying image and covert parentdiv back to relative 
            // positioning
          parentDiv.style.position = "static";
          x = evt.pageX - target.x;
          y = evt.pageY - target.y;
          parentDiv.style.position = "relative";
          /*******/
      }
      //Internet Explorer
      else if (evt.offsetX || evt.offsetY)
      {
        x = evt.offsetX;
        y = evt.offsetY;
        
      }
      coords = x + ", " + y;
      
       
      if (document.getElementById)
      {
        div = document.getElementById(divId);
        if (div)
        {
          var answer = document.getElementById(inputId);           
            answer.value = coords;
            var answer2 = document.getElementById(spanId);
            answer2.innerHTML = coords;
            div.style.display = "block";
            
            var imageOffsetLeft;
            var imageOffsetTop;
            
            var hsImage = document.getElementById(targetId);
            
            //position center of image on hotspot
            if (hsImage)
            {
                imageOffsetLeft = Math.ceil(hsImage.width/2);
                imageOffsetTop = Math.ceil(hsImage.height/2);
            } 

            /*******/
            // we've got the relative location of x and y to the parent wrapper div, 
            // so don't need browser testing here
            div.style.left = x  - imageOffsetLeft;
            div.style.top = y  - imageOffsetTop;
            /*******/
            
          }
      }
      
    }
   
}

function clearSelection(clearId)
{
  
  var questionId = clearId.substr(5);
    var inputId = "hs-ans-" + questionId;
    var divId = "hspot" + questionId;
    var spanId = "span" + questionId;
    
  if (document.getElementById)
  {
    var div = document.getElementById(divId);
      div.style.display = "none";
 
    var answer = document.getElementById(inputId);         
            answer.value = "";
            
         var answer2 = document.getElementById(spanId);        
           answer2.innerHTML = "";    
   }  
}

    function redisplayTarget(imageId, divId, answerGiven)
    {
      if (answerGiven)
      {
        
        var imageOffsetLeft;
          var imageOffsetTop;
          var div = document.getElementById(divId);
          
          //display block to get image height and width
          div.style.display = "block";
          
        var hsImage = document.getElementById("hs" + imageId);
        
          //position center of image on hotspot
          if (hsImage)
          {
              imageOffsetLeft = Math.ceil(hsImage.width/2);
            imageOffsetTop = Math.ceil(hsImage.height/2);
          }
          
        var stringArray = answerGiven.split(",");
        var left = parseInt(stringArray[0]) - imageOffsetLeft;
        var top = parseInt(stringArray[1]) - imageOffsetTop;
        relativePositionLayer(imageId, divId, left, top, null, null);
      }
    }
//-->
</script>
<table>
<tr>
<td><div id="hspotwrapper_4836999_1" style="position:relative;display:block; "><div 
id="hspot_4836999_1" style="display:none; position:absolute; z-index:99; left:0; top:0;"><img 
id="hstarget_4836999_1" src="/images/ci/misc/hs_marker.gif" HEIGHT="15" WIDTH="15"></div><img id="target_4836999_1" src="/courses/1/COMP2006-06F-11864/assessment/6C946A905FEF11DBCA09822D2A09A148/ch8-03.png" name="target_4836999_1" onload="redisplayTarget('target_4836999_1', 'hspot_4836999_1', '')"/></div>

is there any way to automate the clicking of coords on this certain pic? I have the x and y values stored on a database.

An image of the question is attached.

Edited October 19, 2006 by ame1011

[NELyon]

MouseClick("left", x, y)

[ame1011]

MouseClick("left", x, y)

If I could somehow get the coords of the left corner of the pic (which can be anywhere on the page), that would help, otherwise

its a bit too unreliable for what I'm trying to accomplish. Any other suggestions? Somehow call that javascript function recording the coords?

Edited October 19, 2006 by ame1011

[ddeerr]

maybe you can try functions in this library #include <IE.au3>

I never used it but it can be helpful

[DaleHohm]

This should help thanks to lod3n

Please report your results.

Dale

[ame1011]

This should help thanks to lod3n

Please report your results.

Dale

will do when I get home, also, in response to deerr, 90% of my script consists of using Dale's IE Functions and manipulating the IE objects

[NELyon]

If it's any different color, PixelSearch might help.

[ame1011]

If it's any different color, PixelSearch might help.

pixelsearch is evil