mscir wrote:[color=blue]
> Tony Gahlinger wrote:
>[color=green]
>> mscir wrote:
>>[color=darkred]
>>> DU wrote:[/color][/color]
>
> <snip>
>[color=green]
>> Hmm .. you guys are leaving me in the dust. Do I replace mscir's first
>> code set entirely with DU's, or do I still need pieces of it? In
>> particular, what would come after DU's '...'[/color]
>
> <snip>
>
> Here's one way to use his code, but you still have the problem of
> storing the data in a file. Will the web page you want to save the file
> from be loaded from a local hard drive, network, or a web site?
>
> Mike
>
> //global variables
> var Coordinate_X_InImage;
> var Coordinate_Y_InImage;
>
> function init(){
> if(document.addEventListener) {
> document.getElementById("idImageToMonitor").addEve ntListener("mousemove",
> TrackCoordinatesInImage, false);
> } else if(window.event && document.getElementById) {
> document.getElementById("idImageToMonitor").onmous emove =
> TrackCoordinatesInImage;
> }
> }
>
> function TrackCoordinatesInImage(evt){
> Coordinate_X_InImage = Coordinate_Y_InImage = 0;
> if(window.event && !window.opera && typeof event.offsetX == "number") {
> // IE 5+
> Coordinate_X_InImage = event.offsetX;
> Coordinate_Y_InImage = event.offsetY;
> } else if(document.addEventListener && evt && typeof evt.pageX ==
> "number"){
> // Mozilla-based browsers
> var Element = evt.target;
> var CalculatedTotalOffsetLeft, CalculatedTotalOffsetTop;
> CalculatedTotalOffsetLeft = CalculatedTotalOffsetTop = 0;
> while (Element.offsetParent) {
> CalculatedTotalOffsetLeft += Element.offsetLeft ;
> CalculatedTotalOffsetTop += Element.offsetTop ;
> Element = Element.offsetParent ;
> }
> Coordinate_X_InImage = evt.pageX - CalculatedTotalOffsetLeft ;
> Coordinate_Y_InImage = evt.pageY - CalculatedTotalOffsetTop ;
> }
> document.getElementById('div1').innerHTML = "X:
> "+Coordinate_X_InImage+" Y: "+Coordinate_Y_InImage;[/color]
If we knew how Tony's HTML code is, then I would suggest to use input
type="text" for these coordinate values. The problem with Mozilla-based
browsers is that you need to do quite a lot of calculations for
determining the offsetTop and offsetLeft values within the containment
hierarchy and since this is a mousemove event, then there is some real
chances of making users with modest system resources crash because of
this. That's why I commented out this code in the NS6.html page. But no
problem like that with Opera 7 and MSIE 6 pages since offsetX and
offsetY can be accessed directly.
Note that I personally don't like innerHTML when entirely W3C compliant
alternatives are available... and in fact more performant too.
[color=blue]
> }
>
> // array to store mouse click coordinates
> var coords=new Array();
>
> function storepoint(x,y){
> //uncomment the next line to see each image click's coordinates
> //alert(x+', '+y);
> coords[coords.length]=[x,y];
> }
>
> function showarr(){
> var s1='';
> for (var i=0; i<coords.length; i++)
> s1+='\n'+coords[i][0]+', '+coords[i][1];
> alert(s1);
> }
>
> <body onload="init()" bgcolor="#000000">
>
> <img name="idImageToMonitor" id="idImageToMonitor" src="logo.gif"
> width="543" height="113" onmousedown="storepoint(Coordinate_X_InImage,
> Coordinate_Y_InImage)">
>[/color]
There is a significant difference (performance and stability
consequences) if the code should work on a mousedown instead of a
mousemove event. This is important to understand. Right now, poorly
coded and non-optimized DHTML mouse trail effects will make NS 6.x, NS
7.x and Mozilla-based browser users more prone to application crashes.
DU
[color=blue]
> <input type="button" value="Show Contents of Array" onclick="showarr()">
>[/color]
