Avatar billede hoppe11 Nybegynder
31. juli 2009 - 17:19 Der er 14 kommentarer og
1 løsning

x,y ved onclick på billede

jeg skal bruge et script som returnerer x og y når man klikker på et billede... det skal selvfølgelig være x og y koorinaterne på billedet :)
Avatar billede hmanback Nybegynder
31. juli 2009 - 18:12 #1
Nå...har du prøvet at google dit problem - der findes masser af eksempler...
Avatar billede olebole Juniormester
31. juli 2009 - 20:18 #3
<ole>

Det kommer anpå, hvordan du skal bruge det. F.eks. giver:
    <form action="" method="post">
        <input type="image" src="kort.gif" name="kort">
    </form>

- dig koordinaterne direkte på serveren. Prøv med:

<?php
var_dump($_POST);
?>

Skal du ikke sende resultatet til serveren, men arbejde videre med koordinaterne i JS, kan du dog ikke bruge denne metode

/mvh
</bole>
Avatar billede hoppe11 Nybegynder
01. august 2009 - 22:41 #4
er det muligt også at lave en ramme omkring musens position?

f.eks. en div på 50*100px som følger musen når musen er over billedet?
Avatar billede hoppe11 Nybegynder
01. august 2009 - 22:43 #5
@ splazz

ja, noget i den stil

@ ole

jeg ved ikke helt endnu om jeg direkte skal sende koordinaterne eller de bare skal returneres i noget JS!?
Avatar billede mbm2016 Nybegynder
03. august 2009 - 20:48 #6
Hvad med dette script:

<script>
function Kordinater(e)
{
    var ramt = event.srcElement ? event.srcElement : e.target;
   
    var musKordinater = new Object();
    musKordinater[0] = event.clientX ? event.clientX : e.pageX;
    musKordinater[1] = event.clientY ? event.clientY : e.pageY;
   
    var offsetKordinater = new Object();
    offsetKordinater[0] = musKordinater[0] - ramt.offsetLeft;
    offsetKordinater[1] = musKordinater[1] - ramt.offsetTop;
   
    document.title = ramt.tagName + " | " + offsetKordinater[0] + ":" +offsetKordinater[1];
   
    /*
    Gør noget med kordinaterne her :)
    */
   
    return offsetKordinater;
}
document.onclick = Kordinater
</script>
<img style="margin-left:100px;" id="detteimg" src="lillekunst.jpg" width="200" height="200">
Avatar billede mbm2016 Nybegynder
03. august 2009 - 21:07 #7
Hej jeg har lige rettet mit ovenstående script så det virker i Internet Explorer, Firefox, Apple Safari og Opera.

O.B.S Husk du selv lige kan definerer o du vil have kordinaterne når det klikkes eller når musen flyttes ved at bruge enten "onclick" eller "onmouseover".

<html>
<head>
<title>Få kordinater kun fra billede - Af Magnusbm</title>
<script>
function Kordinater(e)
{
    var ramt = (typeof event != 'undefined') ? event.srcElement : e.target;

    var musKordinater = new Object();
    musKordinater[0] = (typeof event != 'undefined') ? event.clientX : e.pageX;
    musKordinater[1] = (typeof event != 'undefined') ? event.clientY : e.pageY;
   
    var offsetKordinater = new Object();
    offsetKordinater[0] = musKordinater[0] - ramt.offsetLeft;
    offsetKordinater[1] = musKordinater[1] - ramt.offsetTop;
   
    if(ramt.tagName == "IMG" && ramt.id == "detteimg")
    {
        document.getElementById('hvor').innerHTML = offsetKordinater[0] + ":" + offsetKordinater[1];
       
        /*
                Gør noget med kordinaterne her: X = offsetKordinater[0] | Y = offsetKordinater[1]
                */

    }
    return true;
}
window.onload = function()
                {
                    if (window.captureEvents)
                    {
                        window.captureEvents(Event.CLICK);
                        window.onclick=Kordinater;
                    }
                    else
                    {
                        document.onclick=Kordinater;
                    }

                }
</script>
</head>

<body>
    <img id="detteimg" src="lillekunst.jpg" width="200" height="200">
    <div id="hvor">...</div>
</body>

</html>
Avatar billede olebole Juniormester
03. august 2009 - 21:18 #8
mbm2007 >> Prøv med denne kode:

<body>
    <p>En paragraf</p>
    <p>... og én mere</p>
    <p>... og så en sidste</p>
    <p>Her kommer så et billede: <img id="detteimg" src="lillekunst.jpg" width="200" height="200"></p>
    <div id="hvor">...</div>
</body>

Dit script tager ikke hensyn til, at offsetTop giver y-afstanden til det omkransende element. Derfor virker dit script kun, når billedet ligger 'løst' i body'en - hvad der i øvrigt ikke er validt i forhold til HTML 4.01.

Derudover er din tilføjelse vist kun nødvendig i gamle Netscape 4.X browsere
Avatar billede mbm2016 Nybegynder
03. august 2009 - 21:24 #9
okidoki... prøver lige at lave det om.. og nej min tilføjelse lavede jeg for at det ville virke i Firefox! ;)
Avatar billede mbm2016 Nybegynder
03. august 2009 - 21:25 #10
og mester :) den kode du gav mig virker altså stadig
Avatar billede mbm2016 Nybegynder
03. august 2009 - 21:28 #11
Min tilføjelse er også: (typeof event != 'undefined')
Avatar billede olebole Juniormester
03. august 2009 - 21:38 #12
og lærling :) nej det gør den ikke. Den giver en forkert y-værdi.

Vedr. tilføjelsen: Hvilken browser siden Netscape 4.X har brugt window.captureEvents?
Avatar billede olebole Juniormester
03. august 2009 - 21:45 #13
Prøv også gerne med denne kode:

<body>
    <table>
    <tbody>
    <tr>
        <td>Blablabla</td>
        <td>Blablabla</td>
        <td>Blablabla</td>
        <td>Blablabla</td>
    </tr>
    <tr>
        <td>Blablabla</td>
        <td>Blablabla</td>
        <td>Blablabla</td>
        <td>Blablabla</td>
    </tr>
    <tr>
        <td>Blablabla</td>
        <td>Blablabla</td>
        <td>Blablabla</td>
        <td>Blablabla</td>
    </tr>
    <tr>
        <td>Blablabla</td>
        <td>Blablabla</td>
        <td>Blablabla</td>
        <td><p>En paragraf</p>
            <p>... og én mere</p>
            <p>... og så en sidste</p>
            <p>Her kommer så et billede: <img id="detteimg" src="lillekunst.jpg" width="200" height="200"></p>
        </td>
    </tr>
    </tbody>
    </table>
    <div id="hvor">...</div>
</body>
Avatar billede hoppe11 Nybegynder
03. august 2009 - 21:58 #14
jeg har ikke glemt spørgsmålet, men vender tilbage lidt senere :)
Avatar billede mbm2016 Nybegynder
03. august 2009 - 23:46 #15
Okay kløgtige mester. Jeg adlyder dig med glæde ;) Tak for fejlfindingen... Jeg laver lige en klasse/Object der kan gøre det ordenligt.. *Arbejder*.... *Færdig* :)

Kig her: http://magnusbm.dk/Eksperten/OleBole.htm

Og så lige et virkende eksempel til "hoppe11" i stedet for det lorte kode jeg skrev før (Jeg håber du kan bruge det og hvis du ikke forstår det, vil jeg gerne forklare):
<html>
<head>
<title>Få kordinater kun fra billede - Af Magnusbm</title>

<script>
function Event(e)
{
    this.e = e;
   
    this.X =    function()
                {
                        return (typeof event != 'undefined') ? event.clientX : this.e.pageX;
                }
               
    this.Y =    function()
                {
                    return (typeof event != 'undefined') ? event.clientY : this.e.pageY;
                }
               
    this.ObjektOffsetX =    function()
                            {
                                var x = (typeof event != 'undefined') ? event.clientX : this.e.pageX;
                                return x - this.ObjektPos(this.Objekt())[0];
                            }
    this.ObjektOffsetY =      function()
                            {
                                var y = (typeof event != 'undefined') ? event.clientY : this.e.pageY;
                                return y - this.ObjektPos(this.Objekt())[1];
                            }
               
    this.ObjektX =  function()
                    {
                        return this.ObjektPos(this.Objekt())[0];
                    }

    this.ObjektY =  function()
                    {
                        return this.ObjektPos(this.Objekt())[1];
                    }
                   
    this.Objekt =  function()
                    {
                        return (typeof event != 'undefined') ? event.srcElement : this.e.target;
                    }
                   
    this.ObjektPos =     function(objekt)
                        {
                            var højre = 0;
                            var venstre = 0;
                                if (objekt.offsetParent)
                                {
                                    do
                                    {
                                        højre += objekt.offsetTop;
                                        venstre += objekt.offsetLeft;
                                    }
                                    while (objekt = objekt.offsetParent);
                                }
                            return [venstre,højre];
                        }
    this.Knap = function()
                {
                    var selv = this;
                    var keyCode = 4;
                    if(typeof event != 'undefined'){keyCode = event.keyCode;}else if(keyCode == 4){keyCode = selv.e.which}
                    return String.fromCharCode(keyCode);
                }
    this.KnapKode = function()
                    {
                   
                        var selv = this;
                        var keyCode = 4;
                        if(typeof event != 'undefined'){keyCode = event.keyCode;}else if(keyCode == 4){keyCode = selv.e.which}
                        return keyCode;
                    }
}



function Kordinater(event)
{
    var event = new Event(event);
    document.getElementById('hvor').innerHTML = event.ObjektOffsetX()+":"+event.ObjektOffsetY();
    /*
    Gør noget med X og Y kordinaterne her som selvfølgelig kun er for billedet:
    Du får adgang til X kordinatet ved at skrive: event.ObjektOffsetX()
    Du får adgang til Y kordinatet ved at skrive: event.ObjektOffsetY()
    */
   
}
window.onload = function()
                {
                    document.onclick = Kordinater
                }
</script>
</head>

<body>
    <img id="detteimg" src="lillekunst.jpg" width="200" height="200">
    <div id="hvor">...</div>
</body>


</html>
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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