Reply To: Create Image Mapper/Hotspot with repeater

• jarvis

• November 12, 2013 at 2:03 am

Sorry to bring this one up again but sadly I still can’t get anywhere with it. I’ve altered my approach but still to no joy.

Ok, for the time being I’ve created a message field with an image in it. The image has an ID of: myImgId

I then created another message field with the following:
<p>X:<span id="x"></span></p>
And a Y message field:
<p>Y:<span id="y"></span></p>

I then have a repeater setup which has the following:
– X (text field)
– Y (text field)
– Get Co-ords (message field)

The Get Co-ords messgae field then contains:

<script type="text/javascript">
<!--
function FindPosition(oElement)
{
  if(typeof( oElement.offsetParent ) != "undefined")
  {
    for(var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent)
    {
      posX += oElement.offsetLeft;
      posY += oElement.offsetTop;
    }
      return [ posX, posY ];
    }
    else
    {
      return [ oElement.x, oElement.y ];
    }
}
function GetCoordinates(e)
{
  var PosX = 0;
  var PosY = 0;
  var ImgPos;
  ImgPos = FindPosition(myImg);
  if (!e) var e = window.event;
  if (e.pageX || e.pageY)
  {
    PosX = e.pageX;
    PosY = e.pageY;
  }
  else if (e.clientX || e.clientY)
    {
      PosX = e.clientX + document.body.scrollLeft
        + document.documentElement.scrollLeft;
      PosY = e.clientY + document.body.scrollTop
        + document.documentElement.scrollTop;
    }
  PosX = PosX - ImgPos[0];
  PosY = PosY - ImgPos[1];
  document.getElementById("x").innerHTML = PosX;
  document.getElementById("y").innerHTML = PosY;
}
//-->
</script>

<script>
function GetUrlValue(VarSearch){
    var SearchString = window.location.search.substring(1);
    var VariableArray = SearchString.split('&');
    for(var i = 0; i < VariableArray.length; i++){
        var KeyValuePair = VariableArray[i].split('=');
        if(KeyValuePair[0] == VarSearch){
            return KeyValuePair[1];
        }
    }
}
</script>

<script type="text/javascript">
<!--
var myImg = document.getElementById("myImgId");
myImg.onmousedown = GetCoordinates;
//-->
</script>

<script type="text/javascript">
function copy()
{
	var n1 = document.getElementById("x").innerHTML = PosX;
	var n2 = document.getElementById("y").innerHTML = PosY;
	
    field_key-field_526940f87b5b1.value = n1.value;
	field_key-field_526941047b5b2.value = n2.value;
}
</script>

<input type="button" value="copy" onClick="copy();" />

The idea is that whenever you click a point on the image, the X and Y values are shown in the 2 respective message fields. On the repeater, you simply click the Copy button that is now shown and the values are copied into the respective input fields.

Unfortunately, it simply doesn’t do this and I can’t see why.

Any help is much appreciated
Thanks