/    Sign up×
Community /Pin to ProfileBookmark

Please rewrite me this script

Copy linkTweet thisAlerts:
Feb 10.2004

Hello!

This following script is working as standalone but it causes conflict in combination with other script. To avoid this problem i would like to intergreate the output line:
window.status = offsets.x + ‘:’ + offsets.y;
into the inside of <script></script>

For example:
///////////////////
<script>
….
window.status = offsets.x + ‘:’ + offsets.y;
</script>

<image src=”test.jpg” onmousemove=”getOffsets(event, this);”>
///////////////////

How can i do it? sorry for my bad english!!! Thank you!

[code=php]<html>
<head>
<title>
offsetX/offsetY
</title>
<script type=”text/javascript”>
function getPageCoords (element) {
var coords = {x: 0, y: 0};
while (element) {
coords.x += element.offsetLeft;
coords.y += element.offsetTop;
element = element.offsetParent;
}
return coords;
}
function getOffsets (evt) {
if (typeof evt.offsetX != ‘undefined’)
return { x: evt.offsetX, y: evt.offsetY }
else if (evt.target) {
if (window.opera)
var element = evt.target;
else
var element = evt.target.nodeType == 1 ? evt.target :
evt.target.parentNode;
var eventCoords = {
x: evt.clientX + window.pageXOffset,
y: evt.clientY + window.pageYOffset
};
var elCoords = getPageCoords(element);
return {x: eventCoords.x – elCoords.x, y: eventCoords.y –
elCoords.y};
}
}
</script>
</head>
<body>

<image src=”test.jpg” onmousemove=”var offsets = getOffsets(event);
window.status = offsets.x + ‘:’ + offsets.y;”>

</body>
</html>[/code]

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@guestauthorFeb 11.2004 — one day later but nobody want to help me...

Please help me!!!
Copy linkTweet thisAlerts:
@TheBearMayFeb 11.2004 — It seems to work if you place the onmousemove in the body tag, i.e:
[code=php]
<body onmousemove="var offsets = getOffsets(event); window.status = offsets.x + ':' + offsets.y;">[/code]
Copy linkTweet thisAlerts:
@guestauthorFeb 11.2004 — Hello TheBearMay!

Thank you for the reply!

No, it does not work.

i would like to show the coordinates when the mouse runs over the picture, but your code shows the coordinates everywhere on the screen.

and that lines

window.status = offsets.x + ':' + offsets.y;

should be in the <script></script>

If it is outside, it causes conlict with other scripts.
Copy linkTweet thisAlerts:
@rhsundergroundFeb 11.2004 — try putting the image within a div, like such:
[code=php]
<div onmousemove="var offsets = getOffsets(event); window.status = offsets.x + ':' + offsets.y;">
<img src="test.jpg">
</div>
[/code]
Copy linkTweet thisAlerts:
@guestauthorFeb 11.2004 — Hello rhsunderground!

Thank you for your response!

Your code has the same effect with the original code. The only thing i would like to change is that line:

window.status = offsets.x + ':' + offsets.y;

must be build in the <script></script> routine.
Copy linkTweet thisAlerts:
@rhsundergroundFeb 11.2004 — maybe this will help.
[code=php]<script>
function coOrds() {
var offsets = getOffsets(event);
window.status = offsets.x + ':' + offsets.y;"
</script>
[/code]
[code=php]
<div onmousemove="coOrds()">
<img src="test.jpg">
</div>
[/code]
Copy linkTweet thisAlerts:
@guestauthorFeb 11.2004 — Thank you! your code works very well unter IE

but does not work unter Firebird browser. Do you have a idea why?

[code=php]<html>
<head>
<title>
offsetX/offsetY
</title>
<script type="text/javascript">
function getPageCoords (element) {
var coords = {x: 0, y: 0};
while (element) {
coords.x += element.offsetLeft;
coords.y += element.offsetTop;
element = element.offsetParent;
}
return coords;
}
function getOffsets (evt) {
if (typeof evt.offsetX != 'undefined')
return { x: evt.offsetX, y: evt.offsetY }
else if (evt.target) {
if (window.opera)
var element = evt.target;
else
var element = evt.target.nodeType == 1 ? evt.target :
evt.target.parentNode;
var eventCoords = {
x: evt.clientX + window.pageXOffset,
y: evt.clientY + window.pageYOffset
};
var elCoords = getPageCoords(element);
return {x: eventCoords.x - elCoords.x, y: eventCoords.y -
elCoords.y};
}
}
</script>

<script>
function coOrds() {
var offsets = getOffsets(event);
document.coordinates.xx.value = offsets.x;
document.coordinates.yy.value = offsets.y;
}
</script>

</head>
<body>

<img src="test.jpg" onmousemove="coOrds()">
<form name="coordinates">
<input type="text" name="xx" value="">
<input type="text" name="yy" value="">
</form>

</body>
</html>[/code]
Copy linkTweet thisAlerts:
@guestauthorFeb 11.2004 — is there anyone willing to help me to bringt this script to the happy end?

Why this works under FireBird:
[code=php]<script>
function coOrds() {
var offsets = getOffsets(event);
document.coordinates.xx.value = offsets.x;
document.coordinates.yy.value = offsets.y;
}
</script>

<img src="test.jpg" onmousemove="coOrds()">
<form name="coordinates">
<input type="text" name="xx" value="">
<input type="text" name="yy" value="">
</form>
[/code]

But this same one does not work unter Firebird:
[code=php]

<img src="test.jpg" onmousemove="var offsets = getOffsets(event); document.coordinates.xx.value = offsets.x; document.coordinates.yy.value = offsets.y;">

<form name="coordinates">
<input type="text" name="xx" value="">
<input type="text" name="yy" value="">
</form>
[/code]
×

Success!

Help @guest 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.4,
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: @Yussuf4331,
tipped: article
amount: 1000 SATS,

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

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...