Notifikationer

Markér alle som læst Log ud

Slettet bruger

17. marts 2001 - 17:05 Der er 16 kommentarer og
2 løsninger

Javascript <img> x, y koordinater.

Hey.

Hvordan får jeg fat i (x,y) koordinaterne (hvor på billedet der er klikket), når en bruger klikker på et almindeligt <img src=\"whatever.jpg\" ...> ?!

Jeg vil ikke bruge <input type=\"image\"...>.

Mvh. Martin.

Synes godt om

engrob Nybegynder

17. marts 2001 - 20:06 #1

Tvivler på det virker i netscape. Jeg fandt det på microsofts hjemmeside, men prøv at se om ikke det virker.

<html>
<head>
<script type=\"text/javascript\" language=\"javascript\">
function visKo() {
var koordinatInfo = \"\"
koordinatInfo = \"X-koordinaten er: \" + window.event.offsetX + \"\\r\"
koordinatInfo += \"Y-koordinaten er: \" + window.event.offsetY + \"\\r\"
alert(koordinatInfo);
}
</script>
</head>
<body>
<a href=\"#\" onClick=\"visKo()\"><img src=\"billede.gif\" height=\"300\" width=\"175\"></a>
</body>
</html>

Synes godt om

jakoba Nybegynder

17. marts 2001 - 20:22 #2

I NS skal du specifikt fortælle at du ønsker at holde øje med musens position.
i head:

<script language=\'javascript\'>  </script>

Så kan du aflæse musens position (sålænge den er over browservinduet) i variablene Xmouse og Ymouse .

mvh JakobA

Synes godt om

jakoba Nybegynder

17. marts 2001 - 20:25 #3

men det er musens position i browserrammen du får. for at relatere den position til billedet må du vide hvor i rammen billedet er. Det ved jeg ikke hvordan. Engrob?

Synes godt om

engrob Nybegynder

17. marts 2001 - 20:30 #4

Hmm, jeg vidste heller ikke hvordan man gjorde i IE for en halv time siden, men jeg kan nok ikke få det til at virke i NS...

Synes godt om

jakoba Nybegynder

17. marts 2001 - 21:14 #5

i netscape kan du aflæse billedets position:
iPosX = document.images.billednavn.x;
iPosY = document.images.billednavn.y;

i IE aflæser du: // bvadr. det ser ud til du rekursivt skal lægge offsetLeft i billedet sammen med offsetLeft i billedets offsetParent osv.
og på den måde arbejde dig ud igennem tabeller, div\'s og lignende.

document.images.pulpit.offsetLeft = \'222\'
document.images.pulpit.offsetParent = \'[object]\'
document.images.pulpit.offsetTop = \'9\'

document.images.pulpit.offsetParent.offsetLeft = \'0\'
document.images.pulpit.offsetParent.offsetParent = \'[object]\'
document.images.pulpit.offsetParent.offsetTop = \'0\'

document.images.pulpit.offsetParent.offsetParent.offsetLeft = \'2\'
document.images.pulpit.offsetParent.offsetParent.offsetParent = \'[object]\'
document.images.pulpit.offsetParent.offsetParent.offsetTop = \'2\'

document.images.pulpit.offsetParent.offsetParent.offsetParent.offsetLeft = \'10\'
document.images.pulpit.offsetParent.offsetParent.offsetParent.offsetParent = \'[object]\'
document.images.pulpit.offsetParent.offsetParent.offsetParent.offsetTop = \'105\'

</script>

hvor billedet har en name=\"billednavn\" parameter.
eg:
<img src=\"et_billede.jpg\" name=\"billednavn\">

Synes godt om

engrob Nybegynder

17. marts 2001 - 21:41 #6

Man kan også bruge \"mit\" script til at finde koordinaterne til billedet. Altså stadigvæk i IE...

Synes godt om

jakoba Nybegynder

17. marts 2001 - 22:03 #7

Ja det er da ulig nemmere end det jeg ku hitte i retning af IE.

<script type=\"text/javascript\" language=\"javascript\">

var Ymouse = Xmouse = 0;
var ns = (document.layers)?true:false;

function Mouse( evnt ) {
Ymouse=(ns)?evnt.pageY:event.y;
Xmouse=(ns)?evnt.pageX:event.x;
}; //end Mouse( event object )

if (ns) {
window.captureEvents(Event.MOUSEMOVE);
window.onMouseMove=Mouse; // catch mouse movement (NS)
};

function visKo( nvn ) {
var koordinatInfo = \"\";
if (ns) {
koordinatInfo = \"X-koordinaten er: \" + (Xmouse-document.images[nvn].x) + \"\\r\"
koordinatInfo += \"Y-koordinaten er: \" + (Ymouse-document.images[nvn].y) + \"\\r\"
alert(koordinatInfo);
} else {
koordinatInfo = \"X-koordinaten er: \" + window.event.offsetX + \"\\r\"
koordinatInfo += \"Y-koordinaten er: \" + window.event.offsetY + \"\\r\"
alert(koordinatInfo);
}
};

</script>
</head>
<body>
<a href=\"#\" onClick=\"visKo(\"Ko\")\"><img src=\"billede.gif\" name=\"Ko\" height=\"300\" width=\"175\"></a>
</body>
</html>

burde vist virke.

Synes godt om

jakoba Nybegynder

17. marts 2001 - 22:09 #8

ihvetfald hvis man giver rigtige citationstegn i onclick strengen onClick=\"visKo(\'Ko\')\"

Synes godt om

jakoba Nybegynder

18. marts 2001 - 00:36 #9

Det spørgsmål kommer ofte op så jeg har gjort en side der kombinerer engrobs svar og mit så det bliver kompatibelt med både NS og IE.
http://hjem.get2net.dk/Jakob.Aggernaes/temp/exp57415.html

Synes godt om

engrob Nybegynder

18. marts 2001 - 09:25 #10

Sådan skal det gøre!!!

Synes godt om

engrob Nybegynder

18. marts 2001 - 09:27 #11

Men forresten. Virker det også til NS6?

Synes godt om

jakoba Nybegynder

18. marts 2001 - 13:21 #12

Nej desværre :( vi må have en NS6 ekspert med også.

Synes godt om

engrob Nybegynder

18. marts 2001 - 19:17 #13

Jaah, det er der ikke noget at gøre ved.

Gider du egentlig at forklare mig hvordan
Ymouse=(ns)?evnt.pageY:event.y;
virker. Er det ikke noget med at hvis det er netscape så skal Ymouse være evnt.pageY og hvis ie så er det event.y
Men hvad betyder det med ?-tegnet og i hvilke andre sammenhænge kan det bruges.
Måske skulle jeg oprette et ny spørgsmål(?)

Synes godt om

jakoba Nybegynder

18. marts 2001 - 23:28 #14

nej det er OK.
Det er en struktur javascript har arvet fra sproget C og nyttig når man vil have \"en if sætning der ikke er en if sætning\".
Formen er:
betingelse ? værdi_hvis_true : værdi_hvis_false
den kan bruges midt inde i en udregning til at bruge den ene eller den anden værdi altefter betingelsen.

fx:
count = (count>=maxCount) ? 0 : count+1; // cyklisk tæller i een linie

giver \"grøn salat\" hvis du vejer over 85kg og \"rigtig mad\" hvis du er under eller ligmed 85kg :)

et er ofte en god ide at komme parenteser rundt om det hele:
( betingelse ? værdi_hvis_true : værdi_hvis_false )

leg lidt med den. Den er faktisk nyttig nu og da

mvh JakobA

Synes godt om

jakoba Nybegynder

18. marts 2001 - 23:30 #15

linien on \"grøn salat\" hører til et tidligere eksempel der var for fjollet.

Synes godt om

engrob Nybegynder

26. marts 2001 - 15:11 #16

Okay, tak. Jeg tror jeg har forstået det meste. Bare ikke lige helt det med count...

Synes godt om

jakoba Nybegynder

27. marts 2001 - 00:59 #17

ved indgangen til linien har vi 2 variable. en fast værdi i maxCount der er den største værdi den anden variabel count nogensinde må have.

testen count>=maxCount bestemmer så om den ny værdi i count skal være nul (start forfra) eller om count blot skal incrementeres med en.

Synes godt om

engrob Nybegynder

27. marts 2001 - 19:39 #18

Nåå, tak tak :)

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript	5	27/04/202620:09	21/08/202610:41
Validering af filnavn i formular Af Strawberry i JavaScript	8	14/04/202610:11	20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript	2	03/02/202614:19	04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript	9	18/04/202516:52	22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript	2	14/02/202511:47	27/06/202514:34

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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS