SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    May 2010
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Image moving code variable help

    I have been trying to write a java scrip that will move an image (image1) to the pixel location that the user inputs into a text box. here is what i have so far:

    HTML Code:
    <script type="text/javascript"
    language="javascript">
    //I set temporary variables
    
    var tempX = 0
    var tempY = 0
    
    function moveTo(x,y) {
    document.getElementById("image1")
    .style.left=x;
    document.getElementById("image1")
    .style.top=y;
    }
    </script>
    <input type="button" value="Go!"
    onclick="javascript:moveTo(document.getElementById("TempX"),document.getElementById("Tempy"))">
    
    <img id="image1" src="image1.png"
    style="position:absolute;
    left:200px; top:200px;
    width:100px; height:100px;
    z-index:0"
    alt="" title="">
    </script>
    
    <input type="text" id="X" value="0" size="4"> X<br>
    <input type="text" id="Y" value="0" size="4"> Y<br>
    __________________________________________-
    Please help me fix this code. i am not sure if the problem is in the variables or setting the variables based on the numbers in the text box. Please help me fix this scrip.

  2. #2
    SitePoint Addict Zarin Denatrose's Avatar
    Join Date
    Jan 2009
    Location
    Surrey BC, Canada
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your button there is referring to elements that don't exist, and using double quotes inside double quotes. Try this:

    HTML Code:
    <script type="text/javascript" language="javascript">
    //I set temporary variables
     
    var tempX = 0
    var tempY = 0
    
    function moveTo(x,y) {
    document.getElementById("image1").style.left=x;
    document.getElementById("image1").style.top=y;
    }
    </script>
    <input type="button" value="Go!"
    onclick="moveTo(document.getElementById('X').value,document.getElementById('Y').value)">
    
    <img id="image1" src="image1.png"
    style="position:absolute;
    left:200px; top:200px;
    width:100px; height:100px;
    z-index:0"
    alt="" title="">
    </script>
    
    <input type="text" id="X" value="0" size="4"> X<br>
    <input type="text" id="Y" value="0" size="4"> Y<br>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •