WN - Få fram pixel (koordinater) av en bild

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - Få fram pixel (koordinater) av en bild (https://www.wn.se/forum/showthread.php?t=16278)

Helix

2006-09-16 15:47

Har letat ihjäl mig. Någon som kanske har en tips eller länk till något sådant:

behöver ha ett litet script som efter musklick på en bild tar fram korrdinater för var man klickade......

Lindahl

2006-09-16 16:05

Serverside eller på klienten?

På servern: Om du gör en <input type='image'> så får du koordinaten på köpet.

Edit: såg att inlägget låg under "klientsidans teknologier" men låter det ändå stå kvar då det kanske kan vara till hjälp för någon annan.

Helix

2006-09-16 16:09

Citat:

Originally posted by Lindahl@Sep 16 2006, 16:05
Serverside eller på klienten? Om du gör en input type=image så får du koordinaten på köpet.

Hänger inte riktigt med. Vill att det skall finnas en bild på sidan. Om jag klickar på den, på valfri plats på den, så skall jag i en ruta (formulär) få fram koordinater var jag klickade på bilden. Där här "<input type='image'>" är väl inte lösningen, eller i alla fall så hänger jag inte med....du får gärna utveckla det lite....

Lindahl

2006-09-16 16:17

Ok, simpelt exempel:

Först html-dokumentet som kommer bestå av en bild:

Kod:

<form action='resultat.php' method='get'>

<input type='image' src='klickbar_karta.jpg'>

</form>

När man klickar på bilden kommer formuläret att "submittas" och sidan resultat.php kommer här anropas som resultat.php?x=12&y=14 (där 12 och 14 är musens koordinater).

Helix

2006-09-16 16:25

Ahhh...det visste jag inte...:) Kan vara till nytta!

Finns det dock möjlighet att få fram det utan att formuläret submittas?

herq	2006-10-09 13:44

Du har säkert löst det så här dags, men jag postar detta ändå. Inte helt clean, men det löser någon säkert.

Kod:

<script language="JavaScript" type="text/JavaScript">

var posx;var posy;

function capmouse(e){

posx = 0; posy = 0;

if (!e){var e = window.event;}

if (e.pageX || e.pageY){

posx = e.pageX;

posy = e.pageY;

}

else if (e.clientX || e.clientY){

posx = e.clientX;

posy = e.clientY;

}

}

function showP(){

        document.write ('X: '+posx+'<br>Y: '+posy)

}

</script>

</head>



<body onmousemove="capmouse(event)">

<img src="klickbar_karta.jpg" onclick="showP()">



</body>

Helix

2006-10-15 21:36

Tack herq. Hittade dock en lösning lite tidigare, så som jag vill eha det. Här kan ni se vad jag menade:
http://www.emanueleferonato.com/category/javascript/

Alla tider är GMT +2. Klockan är nu 16:11.