Søg
Avatar billede funkyloonie Nybegynder
20. februar 2005 - 23:25 Der er 10 kommentarer og
1 løsning

Koordinat ved museklik

Hej!

Er det muligt af få x og y koordinatet på musens position ved klik? onclick virker jo fint på <body> men findes der noget dhtml/javascript til at læse koordinatet?

Evt. andre løsninger på et koordinat/position?
Avatar billede backside Nybegynder
21. februar 2005 - 00:45 #1
Faldt lige over dette:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Javascript Stuff</title>
<script type='text/javascript'>
if(navigator.appName.toLowerCase().indexOf("microsoft")!=-1) document.onclick = function () {popMessage(event)};
function popMessage(e)
{   
xPos=0;yPos=0;
xPos = (e.pageX) ? e.pageX : e.clientX+document.body.scrollLeft;
yPos = (e.pageY) ? e.pageY : e.clientY+document.body.scrollTop;
dBody = document.getElementsByTagName("BODY")[0];
nDiv = document.createElement("DIV");
nDiv.appendChild(document.createTextNode("Pos. "+xPos+","+yPos));
nDiv.style.position = "absolute";
nDiv.style.left = xPos+"px";
nDiv.style.top = yPos+"px";
nDiv.style.zIndex = 99;
dBody.appendChild(nDiv);
}
</script>
<body onClick="popMessage(event)">
<div>Klik et sted</div>
</body>
</html>

Ved ikke om det er noget du kan bruge til noget.
Avatar billede olebole Juniormester
21. februar 2005 - 00:46 #2
<ole>

Er det body-elementet, der skal klikkes på - eller et andet?
Hvad skal koordinaterne angives udfra? Body-elementet eller det evt. andet element, der klikkes på?

/mvh
</bole>
Avatar billede funkyloonie Nybegynder
21. februar 2005 - 08:39 #3
Det er for så vidt både på body og andre tags. Jeg tester eksemplet for oven lidt senere :-)
Avatar billede olebole Juniormester
21. februar 2005 - 22:05 #4
Hvad skal du bruge det til - og hvordan?  :)
Avatar billede funkyloonie Nybegynder
22. februar 2005 - 00:04 #5
Sorry for min lange svartid.

Jeg vil bruge det til at klikke på et div, table eller lignende hvor der ligger et billede som baggrund. Jeg vil gemme koordinaterne for at klippe et brugerdefineret område af billedet ud når siden submittes til serveren.
Avatar billede funkyloonie Nybegynder
22. februar 2005 - 00:16 #6
scriptet foroven ser ud til at virke upåklageligt. Så vil jeg lige prøve at bruge det på et div :-)
Avatar billede funkyloonie Nybegynder
22. februar 2005 - 23:40 #7
Jeg sidder og leger lidt med følgende i IE og firefox. I ie giver den 2 pixels for meget hver gang. Ved I om der er nogle muligheder for at løse det. test evt scriptet. Er der evt en måde at læse x og y fra kanten af div end fra body?

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da">
           
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>

<script type='text/javascript'>
function popMessage(e)
{   
alert( e.clientX + " " + e.clientY);
}
</script>
</head>

<body style="margin: 0px 0px 0px 0px;">
        <div onClick="popMessage(event);" style="border: 0px; position:absolute; left: 500px; top: 500px; width: 100px; height: 100px; background-color:rgb(123,0,0);">
        </div>       
</body>
</html>
Avatar billede olebole Juniormester
23. februar 2005 - 02:06 #8
Prøv med :
  alert(document.compatMode)
- hvis dit dokument overholdt CSS-standarden, ville den returnere 'CSS1Compat' - men den returnerer formodentlig 'BackCompat' ... hvilket betyder, du har disabled CSS i dokumentet.
Det gør du ved at have noget før DTD'en (din komplet overflødige XML-prolog). Har du det, går IE i quirks-mode og overholder ikke CSS-standarden.

I øvrigt er det guddommeligt overflødigt - og direkte noget skidt - at skrive i XHTML. Dine dokumenter parses alligevel som HTML4 - og hvis du forsøger at få din kode til at validere som XHTML, parses dokumenterne endda som fejlfyldt HTML4.
Det er langt bedre for alle, hvis du skriver HTML4.01-Strict, indtil XHTML kan bruges på WWW - og det kommer nok til at vare endnu et par år  ;o)

Det var et par generelle (men vigtige) betragtninger - og nu til selve dit problem:
IE's indre border ligger faktisk i body-elementet - og den er 2px bred. Sætter du dette i din CSS:

body {
    border: 0px none;
}

- så er du ude over koordinat-problemet - men din side ser anderledes ud.
En bedre løsning ville nok være at sikre sig, det er en IE - og så korrigere for border'en på body'en.

Du kan i øvrigt checke, om/at jeg har ret med:

<style type="text/css">
html {
    overflow-y: hidden; /* Fjern lodret default-scrollbar i IE */
}
</style>

<script type="text/JavaScript">
window.onload = function() {
    alert("BODY: "+document.body.offsetWidth +"\nHTML: "+ document.documentElement.offsetWidth);
}
</script>

- så kan du se, der er 4px forskel på HTML-elementets og BODY-elementets bredder.

Måske kunne en mere realistisk løsning være at se, om - og i givet fald, hvormeget - der skal korrigeres med:

<script type="text/JavaScript">
var ieOffset = 0;
window.onload = function() {
    var d = document;
    d.documentElement.style.overflow = "hidden";
    if (d.documentElement.offsetWidth-d.body.offsetWidth>1) ieOffset = (d.documentElement.offsetWidth-d.body.offsetWidth)/2;
    d.documentElement.style.overflow = "";
}
</script>

<button onclick="alert(ieOffset)">TEST</button>

Knappen er blot til at teste med - men meningen er jo naturligvis, du skal bruge 'ieOffset' på f.eks. denne måde:

function popMessage(e)
{   
alert( (e.clientX-ieOffset) + " " + (e.clientY-ieOffset));
}
Avatar billede funkyloonie Nybegynder
24. februar 2005 - 18:11 #9
At sætte border på body'en løser problemet. Sjovt at man kan fjerne den kant i IE. Troede det var standard for applikationen.

Umiddelbart kan jeg ikke se hvorfor jeg skal bruge den mere avancerede måde du kommer med, da jeg ikke kan se nogen visuel forskel og da jeg får de rigtige koordinater.

Efter din artikler kan jeg se du er meget stærk i HTML, så jeg vil lige stille dig to spørgsmål i forlængelse af ovenstående.
1. Hvordan vil et dokument med 'CSS1Compat' = document.compatMode se ud, altså html'en som ikke disabler css ?
2. Hvor kan jeg finde documentation på mulighederne i javascript, her mener jeg document.compatMode og alle de andre dot-notationer som findes så jeg kan se hvad der er af objekter og funktioner i javascript?
Avatar billede funkyloonie Nybegynder
27. februar 2005 - 16:14 #10
I må gerne give et svar begge to, så kan I dele points da I begge er kommet med god hjælp.
Avatar billede backside Nybegynder
27. februar 2005 - 16:44 #11
Svar.  ;)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 11:56 Er det muligt at lave sin egen webserver i boligforening? Af Strawberry i Cloudtjenester
14/0810:21 Ny printer, men hvilken Af mort1 i Printere
13/0819:41 USB på Linux Af Uvanga i Linux
12/0818:26 Hvilken type mus Af mort1 i PC
11/0813:21 ms Forms Af leahcim i Andet software
White papers
Flere white papers »