New wiki-page
Jump to navigation Jump to search
No edit summary
No edit summary
 
(15 intermediate revisions by the same user not shown)
Line 1: Line 1:
<style>
#map-container{
    position:relative;
    width:300px;
    height:300px;
}
#map-svg{
    position:absolute;
    left:0px;
    top:0px;
}
#map-catcher{
    position:absolute;
    left:0px;
    top:0px;
    height:100%;
    width:100%;
}
</style>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
RLQ.push(function () {
RLQ.push(function () {
$(document).ready(function () {
$('.clickable').bind('click', function (ev) {
     $("#map-catcher").mousedown(function (e) {
     var pt = svg.createSVGPoint();
        alert(e.offsetX);
    var $div = $(ev.target);
     });
    var $display = $div.find('.display');
    var $marker= $svg.find('#marker');
    var cursorpt =  pt.matrixTransform(svg.getScreenCTM().inverse());
   
    var offset = $div.offset();
    var x = ev.clientX - offset.left;
    var y = ev.clientY - offset.top;
 
    var x2 = document.getElementById('marker').getAttribute('cx');
    var y2 = document.getElementById('marker').getAttribute('cy');
      
    $display.text('x: ' + x + ', y: ' + y2 + x2);
   
    $marker.attr('cx', '800')
});
});
});
});
</script>
</script>
<h1 id="coord">asdf</h1>
<div id="map-container">
    <object id="map-svg" type="image/svg+xml" data="http://upload.wikimedia.org/wikipedia/en/9/9a/Nickelodeon_logo.svg" style="width: 300px; height: 300px; border:1px solid black; ">Your browser does not support SVG</object>
    <div id="map-catcher"></div>
</div>

Latest revision as of 19:34, 9 August 2017

<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"> RLQ.push(function () { $('.clickable').bind('click', function (ev) {

   var pt = svg.createSVGPoint(); 
   var $div = $(ev.target);
   var $display = $div.find('.display');
   var $marker= $svg.find('#marker');
   var cursorpt =  pt.matrixTransform(svg.getScreenCTM().inverse());
   
   var offset = $div.offset();
   var x = ev.clientX - offset.left;
   var y = ev.clientY - offset.top;
   var x2 = document.getElementById('marker').getAttribute('cx');
   var y2 = document.getElementById('marker').getAttribute('cy');
   
   $display.text('x: ' + x + ', y: ' + y2 + x2);
   
   $marker.attr('cx', '800')

});


}); </script>