How to move/slide an image from left to right by 10px. Create an HTML page and insert an image and button in the page when a click a button Move the Image From Left to Right Javascript with a 10px value. This is a simple javascript code that allows shifting the image by some particular pixel in this case we are shifting an image by 10px. Now come to the logic for solving this problem in javascript. Follow the given steps.
Moving Images in Javascript
- Step 1: First create a simple form in an HTML and add an image with some height and width in my case I choose 400px height and 600px width, Here px means pixel.
- Step 2: Now add a button, this is the most important part of our program cause without a button we can not perform a specific part of our program.
- Step 3: This is a part where we are adding the functionality of the task that we have to perform, So add a javascript code to shift an image by 10px.
- Step 4: Define a function in the button we added in step 2 so that when we click on the image the image will shift in the right direction with some or specific pixels in our case 10px.
- Step 5: Till now we added all the functionality of a program, now time to perform a task we did so click on the image if it's moving or shifting in the right direction as we choose then our program is working fine without any doubt. Now you can modify the problem for other directions, for example, Left, Up, and Down.
Task: You have to change the direction of a program for all 4 directions, Right, left, Up, and Down, You can use 4 buttons for each direction.
Code starts here, and save the program as a suggested name for remembering easily.
Moving Image Across Screen from Left to Right
<!DOCTYPE >
<head>
<title>JavaScript Animation</title>
<script type="text/javascript">
<!--
var imgObj = null;
function init(){
imgObj = document.getElementById('myImage');
imgObj.style.position= 'relative';
imgObj.style.left = '0px';
}
function moveRight(){
imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
}
window.onload =init;
//-->
</script>
</head>
<body>
<form>
<img id="myImage" src="Desert.jpg" height="400" width="600" />
<p>Click button below to move the image to right</p>
<input type="button" value="Click Me" onclick="moveRight();" />
</form>
</body>
</html>The Output of Move Image From Left to Right Javascript
0 Comments: