/    Sign up×
Community /Pin to ProfileBookmark

Event.x Event.y Cross Browser – Need Help

I am looking for some help to get my code IE, NS and FF compatible. This is a basic event.x, event.y code that places an small image on a world map where ever the user clicks on the image. Here is the code that works in IE. If anyone can help me get this working in FF I would apprecited it. I have not tested with NS yet.

As far as FF goes I have read to use innerHTML and not innerText. I have also read you need to pass the event when you call the function. I made these changes but no luck with FF.

Here is the code…

[CODE]
</head>
<script language=”JavaScript”>
<!–
function markit(event) {
document.getElementById(‘xcoord’).innerHTML = event.x;
document.getElementById(‘ycoord’).innerHTML = event.y;
document.getElementById(‘xlayer’).style.left = (event.x-5);
document.getElementById(‘xlayer’).style.top = (event.y-5);
}
–>
</script>
<body>
<div style=”position:relative”>
<div id=”xlayer” style=”position:absolute; left:0px; top:0px; width:13px; height:14px; z-index:1″>
<img src=”x.png” width=”10″ height=”10″> </div>
<img src=”map.jpg” onClick=”markit(event);”> </div>
<br>
X Position: <span id=”xcoord”></span><br>
Y Position: <span id=”ycoord”></span><br>
</body>

[/CODE]

to post a comment
JavaScript

5 Comments(s)

Copy linkTweet thisAlerts:
@ehusarauthorMar 03.2005 — Thanks for that link. Unfortunetly that code is very outdated since it is using the following browser detection. All the currently browser support the getElementById.

/ Detect if the browser is IE or not.

// If it is not IE, we assume that the browser is NS.

var IE = document.all?true:false

// If NS -- that is, !IE -- then set up for mouse capture

if (!IE) document.captureEvents(Event.MOUSEMOVE)


I am not an expert obviously but I am pretty sure that is correct.

On a good note I am making a little progress. I have the x and y showing but the image layer for the X where the user clicks is not working.

Anyone have any other more current example?

Thanks.
Copy linkTweet thisAlerts:
@A1ien51Mar 03.2005 — The code works in IE, Mozilla, Firefox and Netscape!

That s why I posted it!
Copy linkTweet thisAlerts:
@ehusarauthorMar 03.2005 — Okay, here is my solution. This works in both IE 6 and FF 1.0.
[CODE]
<html>
<head>
<title></title>
<script language="JavaScript">
<!--

function markit(event) {
var e = event || window.event;
document.getElementById('xcoord').innerHTML = e.clientX ;
document.getElementById('ycoord').innerHTML = e.clientY;
document.getElementById('xlayer').style.left = (e.clientX);
document.getElementById('xlayer').style.top = (e.clientY);
}
-->
</script>
</head>

<body>
<div style="position:relative">
<div id="xlayer" style="position:absolute; z-index:1">
<img src="x.png" width="10" height="10"> </div>
<img src="map.jpg" onClick="markit(event);"> </div>
<br>
X Position: <span id="xcoord" ></span><br>
Y Position: <span id="ycoord" ></span><br>
</body>
</html>[/CODE]


When the user clicks the map.jpg (a world map) a image is placed on the map to mark the location. The x and y coordinate is also displayed on the page in relation to the image.

Cheers.
Copy linkTweet thisAlerts:
@ehusarauthorMar 03.2005 — Yes, it does and thanks for posting it but no need to detect if the browser is IE of NS if you use getElementById.

I think my code works in all 3 with less code.

But, I have not tested mine in NS yet. ?

Thanks again.
×

Success!

Help @ehusar spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...