Autor Zpráva
pepan6
Profil *
Ahoj, nasel sem na netu kód ktery zobrazí koordináty kdyz se prejede pres text "the lazy dog". Zkousel sem to opravit tak aby se kordináty zobrazili kdyz prejedu mysi pres cely ten cerveny div ale nemuzu prijit na to jak to udelat.

* mam na mysli takove to oznaceni jak kdyz v nejakem obrazkovem editoru oznacite na obrazku oblast ktera se ma vyriznout ven,.. tak pro tuto oblast se snazim dostat ven souradnice v zavislosti k parent divu tzn. ne offset k oknu prohlizece.

Nasel sem taky uz hotovy jquery plugin ktery to umi, ale nemeri souradnice v zavislosti na parent divu ale k oknu prohlizece a taky nefunguje na obrazky ktere jsou do stranky vkladany dynamicky:
http://deepliquid.com/projects/Jcrop/demos.php?demo=handler

Diky

<html><head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
var $div;
var last;
function find() {
    var selection = window.getSelection();
    var text = selection.toString();
    if (last==text) return; else last=text; // prevent needless computations if no changes to selection
    if (selection.rangeCount==0) return;

    var range = selection.getRangeAt(0);
    var $span= $("<span/>");

    newRange = document.createRange();
    newRange.setStart(selection.focusNode, range.endOffset);
    newRange.insertNode($span[0]); // using 'range' here instead of newRange unselects or causes flicker on chrome/webkit

    var x = $span.offset().left;
    var y = $span.offset().top;
    $div.text(x+" "+y);
    $div.css({left:x,top:y+($div.height())});
    $span.remove();
}
$(window).load(function() {
    $("body").keydown(function(e) {
        //find();
        setTimeout(find,0);
    });
    $("body").mousemove(function(e) {
        //find();
        setTimeout(find,0);
    });
    $div=$("<div style='border:1px solid red;background:white; position:absolute;'>").appendTo($("body"));
});
</script>
</head>
<body>
<style>
#parent_div {

   width: 80%;
   margin: 0px auto;
  text-align:center;
  border:1px solid black;
  padding-left:100px;
}
</style>
<div id="parent_div">

    <div style="width:500px; height:500px; background-color:#FF0000">the lazy dog</div>

</div>
</body>
</html>
Chamurappi
Profil
Reaguji na pepana6:
Řekl bych, že zde uvedený skript dělá něco dost jiného, než popisuješ v textu. Zjišťuje pozici myší označeného obrázku, tedy celého, označeného třeba i společně s textem. Kdybys chtěl označovat výřez, nepotřebuješ pracovat s Range, ale s pozicí kurzoru myši. Tedy s event.clientX a event.clientY. Souřadnice budou vzhledem k ploše prohlížeče, ale to není zase takový problém, protože od nich můžeš odečíst pozici elementu.

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: