Home/ Questions/Q 6344767
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T20:42:16+00:00

I’ve built a small Javascript application which can move an SVG element, i’ve now

  • 0

I’ve built a small Javascript application which can move an SVG element, i’ve now tried to rebuild it using image elements for the controls rather than SVG shapes.

Javascript + jQuery

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">         
    $(document).ready(function(){
        var panning = false;
        var direction;

        function startPan(dir){
            panning = true;
            direction = dir;
        }  

        function stopPan(){
            panning = false;
        }

        function pan(){  
            var item = $("#moveme"); 
            var x = item.position().left; 
            var y = item.position().top;            
            var amount = 1;
            if(direction == "left"){
                x -= amount;
            } else if (direction == "right"){
                x += amount ;
            } else if (direction == "up"){
                y -= amount;
            } else if (direction == "down"){
                y += amount;
            }

            item.css("left", x);
            item.css("top", y);
        }

        function panLoop(){          
            if(panning == true){      
                pan();
            }
        }
        setInterval(panLoop,100);
    });
</script>

<style>
    .button:hover{
        opacity: 0.5;
    }

    .button{
        position: absolute;
    }

    .compass{
        position: absolute;
    }

    div.pan{
        position: absolute;
        width: 90px;
        height: 90px;
    }

    #moveme{
        position: absolute;
        top: 200px;
        left: 200px;
    }
</style>

<div class="pan">
    <img class="button"
         style="top: 0px; left: 30px;"
         src="images/tu.png"
         onmouseover="startPan('up')"
         onmouseout="stopPan()" />
    <img class="button" 
         style="top: 30px; right: 0px;"         
         src="images/tr.png"
         onmouseover="startPan('right')"
         onmouseout="stopPan()" />     

    <img class="button" 
         style="bottom: 0px; left: 30px;"         
         src="images/td.png"
         onmouseover="startPan('down')"
         onmouseout="stopPan()" />       

    <img class="button" 
         style="top: 30px; left: 0px;"         
         src="images/tl.png"
         onmouseover="startPan('left')"
         onmouseout="stopPan()" />

    <img class="compass"
         style="top: 21px; left: 21px;"
         src="images/c.png"/>

</div>

<div id="moveme">
    HELLo
</div>

However it’s not calling the mouseover event, and I can’t figure out why….

Here is the version using SVG:

Working version using Javascript + SVG

Working version:
Working without SVG

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    See here http://jsbin.com/ecihij/edit#source

    When you write your functions you do not need to put them inside the jQuery document Ready section

    Jarred is right you should also be using jQuery event handers see updated example here
    http://jsbin.com/ecihij/2/edit.

    And code below

    HTML

    <!DOCTYPE html>
<html>
<head>


<style>
    .button:hover{
        opacity: 0.5;
    }

    .button{
        position: absolute;
    }

    .compass{
        position: absolute;
    }

    div.pan{
        position: absolute;
        width: 90px;
        height: 90px;
    }

    #moveme{
        position: absolute;
        top: 200px;
        left: 200px;
    }
</style>

<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>
<div class="pan">


    <p class="button bup" style="top: 0px; left: 30px;" > up</p>

    <p  class="button bright" syle="top: 30px; right: 0px;" >right </p>  


    <p  class="button bdown" style="bottom: 0px; left: 30px;">down </p>     

    <p class="button bleft" style="top: 30px; left: 0px;" >left </p>

    <p  class="compass" style="top: 21px; left: 21px;">compass </p>

</div>

<div id="moveme">
    HELLo
</div>
</body>
</html>

    JAVASCRIPT

             var panning = false;
        var direction;

function startPan(dir){
            panning = true;
            direction = dir;
        }  

        function stopPan(){
            panning = false;
        }

        function pan(){  
            var item = $("#moveme"); 
            var x = item.position().left; 
            var y = item.position().top;            
            var amount = 1;
            if(direction == "left"){
                x -= amount;
            } else if (direction == "right"){
                x += amount ;
            } else if (direction == "up"){
                y -= amount;
            } else if (direction == "down"){
                y += amount;
            }

            item.css("left", x);
            item.css("top", y);
        }

        function panLoop(){          
            if(panning === true){      
                pan();
            }
        }

     setInterval(panLoop,100);

$(document).ready(function(){


  $('.bup').mouseover(function(){  startPan('up');  }).mouseout(stopPan); 
  $('.bright').mouseover(function(){  startPan('right');  }).mouseout(stopPan); 
  $('.bleft').mouseover(function(){  startPan('left');  }).mouseout(stopPan); 
  $('.bdown').mouseover(function(){  startPan('down');  }).mouseout(stopPan); 



    });
    • 0