Velocity Reviews > minimum x-coord of an image when clicked

# minimum x-coord of an image when clicked

optimistx
Guest
Posts: n/a

 02-01-2005
When we click an image, we get the coordinates x and y in the event
handler, like this

<script type="text/javascript">
function fun2(evnt){
var e=evnt;
if (e==undefined){e=event;}
var x=e.x || e.layerX;
var y=e.y || e.layerY;
return true;
}
</script>

....

<img src="test.jpg" onclick="fun2(event)" />

How to determine minimum x and minimum y in my script?

Fred Oz
Guest
Posts: n/a

 02-01-2005
optimistx wrote:
> When we click an image, we get the coordinates x and y in the event
> handler, like this
>
> <script type="text/javascript">
> function fun2(evnt){
> var e=evnt;
> if (e==undefined){e=event;}
> var x=e.x || e.layerX;
> var y=e.y || e.layerY;
> return true;
> }
> </script>

Is this OK? Works in IE, Safari and Firefox:

<script type="text/javascript">
function fun2(evnt){
var e = evnt || window.event;

// I think the following line should be
// var ele = e.target || e.srcElement;
// for older IE but I can't test it right now
var ele = e.target;
var x = e.x || e.layerX;
var y = e.y || e.layerY;

var msg = [' Element clicked on: ' + ele.nodeName ,
' ' + ele ,
'\n Click location (x,y) = ' ,
'(' + x + ',' + y + ')',
'\n offsetWidth = ' + ele.offsetWidth ,
'\n offsetHeight = ' + ele.offsetHeight ,
'\n offsetTop = ' + ele.offsetTop ,
'\n offsetLeft = ' + ele.offsetLeft ,
'\n offsetParent = ' + ele.offsetParent ,
'\n offsetParent offsetTop = ',
ele.offsetParent.offsetTop ,
'\n offsetParent offsetLeft = ' ,
ele.offsetParent.offsetLeft ];

}
</script>

[...]
> How to determine minimum x and minimum y in my script?

Exactly what do you mean by "minimum x and minium y"? If you
mean the position of the top left corner of the element clicked
on, then its position must be calculated carefully as each
browser handles it differently. Search through this newsgroup
for offsetParent.

There is a good discussion of the viewport, its properties and
browser support here:

<URL:http://www.quirksmode.org/js/>

Click on the viewport link - hope that helps.

--
Fred

optimistx
Guest
Posts: n/a

 02-01-2005
Fred Oz wrote:

>
> There is a good discussion of the viewport, its properties and
> browser support here:
>
> <URL:http://www.quirksmode.org/js/>
>
> Click on the viewport link - hope that helps.
>

Thanks Fred,

that was exactly what was needed. A marvellous, useful site. You guessed
the top/left corner thingy right, too.