[JavaScript] offset van <img> - Softwareontwikkeling

dinsdag 31 mei 2005 15:19

Acties:

Topicstarter

Ok vraagje,

Ik heb een plaatje op mijn website staan. Uit dit plaatje wil ik een gebied selecteren wat daarna eruit gekopieerd en vergroot wordt. Met javascript en php is goed gelukt.
Er komt alleen een probleem als ik in een browser aan de linkerkant bijvoorbeeld favorieten open heb staan.
De coordinaten kloppen dan niet meer.
Ik heb dus een javascript functie nodig die het linkerboven nulpunt van het plaatje kan berekenen ofzo. zodat ik de waardes krijg waarmee ik de coordinaten van de muis moet verrekenen.
Ik hoop dat iemand me hiermee kan helpen.

dinsdag 31 mei 2005 15:28

Acties:

André

Analytics dude

event.clientX bedoel je?

Zonder relevante code kunnen we je niet echt helpen.

[ Voor 54% gewijzigd door André op 31-05-2005 15:28 ]

dinsdag 31 mei 2005 15:31

Acties:

NMe

Quia Ego Sic Dico.

Javascript moet in Webdesign & Graphics. Zie ook P&W FAQ - HTML / javascript /css, etc....

PW>>WG

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

dinsdag 31 mei 2005 15:31

Acties:

.oisyn

Moderator Devschuur®

Demotivational Speaker

Lastig he, lezen: HTML, JavaScript, Flash en Director topics *12-05*

Programming & Webscripting -> Webdesign & Graphics

Give a man a game and he'll have fun for a day. Teach a man to make games and he'll never have fun again.

dinsdag 31 mei 2005 15:33

Acties:

hornage

Topicstarter

ok, dan zet ik er ff wat code bij:

code:

var gXoffset = (offset waarde dus) + gOsOfst; // #absarea left + border
var gYoffset = (offset waarde dus) + gOsOfst; // #absarea top + border
var gaPos = new Array(4);
var Selecting = 0;

//onmousemove event die aan de image zit
function update(event) {
    if(Selecting == 0)
        return;
    var x,y;
    var pos = new eventDocPos(event);
    x = pos.x - gXoffset;
    y = pos.y - gYoffset;
    if(Selecting == 2){
        var d = document.getElementById("p");
        gaPos[2] = x;
        gaPos[3] = y;
        var w = gaPos[2]  - gaPos[0];
        var h = gaPos[3]  - gaPos[1];
        d.style.width = (w > 0 ? w  + "px": "0px");
        d.style.height = (h > 0 ? h  + "px": "0px");
        notify(gaPos[0]+","+gaPos[1]+" - "+gaPos[2]+","+gaPos[3]);
    }
    else{
        notify(x+","+y);
    }
}

//onmousedown event die aan de hele pagina hangt
function start_select(event) {
    if(event.srcElement.className != 'box')
        return;
    var doc = document.getElementById("image");

    if (Selecting == 3) {
        Selecting = 0;
        var d = document.getElementById("p");
        d.style.left = "0px";
        d.style.top = "0px";
        d.style.width = "0px";
        d.style.height = "0px";         
    }

    if (Selecting == 2) {
        Selecting = 3;
        doc.style.cursor = "default";
        setPosition();
    }
    if (Selecting == 0) {
        Selecting = 1;
        doc.style.cursor = "crosshair";
    }

    if (Selecting == 1) {
        var o = document.getElementById("imgdesc");
        o.innerHTML += "<div id='p' class='box' style='display:none'><span></span></div>";
        var d = document.getElementById("p");
        var pos = new eventDocPos(event);
        gaPos[0] = pos.x - gXoffset; 
        gaPos[1] = pos.y - gYoffset;
        d.style.left = pos.x + "px";
        d.style.top = pos.y + "px";
        d.style.width = "0px";
        d.style.height = "0px";
        d.style.display = "block";
        Selecting = 2;
    }
}

dinsdag 31 mei 2005 15:44

Acties:

André

Analytics dude

Als jij zoiets doet zou het gewoon moeten werken:

code:

<html>
  <head>
    <title>Test</title>
    <script type="text/javascript">
      function doe(evt)
      {
        if (!evt) { evt = event; }
        
        plaatje = evt.target ? evt.target : evt.srcElement;

        alert(plaatje.offsetLeft)
        alert(evt.clientX)
        
      }
    </script>
  </head>
  <body>
    <img id="bla" src="eva_msn.jpg" onclick="doe(event)">
  </body>
</html>

Dan werk je gewoon relatief aan de linkerbovenhoek van je document en niet van je scherm

dinsdag 31 mei 2005 16:26

Acties:

hornage

Topicstarter

ah kijk, via die offsets kan je de positie krijgen. Ik had hier al mee geklooid maar toen pakte ik het plaatje via document.getElementById en dat werkt blijkbaar dan niet ofzo.
bedankt andre.