Home › Forums › Add-ons › Repeater Field › Create Image Mapper/Hotspot with repeater › Reply To: Create Image Mapper/Hotspot with repeater
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
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.