Learn VBA & Macros in 1 Week!

JavaScript - Movement Of Img

Full Excel VBA Course - Beginner to Expert

Movement Of Img	View Content

Hi to all,
I am newbie in JS, and I hope that you can help with one javascript

I am trying to use my function for move of image on menu

the function JS function is
Code:

    var start0l = document.getElementById('arrow1').offsetLeft, maxPoz0, timer0;

    function StartPosun(imgId, maxPoz) {
        clearTimeout(timer0);
        maxPoz0 = maxPoz;
        document.getElementById(imgId).style.left = start0l + 'px';
        timer0 = setTimeout("posun0()", 1);
    }

    function ReturnPosun(imgId) {
        clearTimeout(timer0);
        timer0 = setTimeout("ret0()", 1);
    }

    function ret0() {
        if ((document.getElementById('arrow1').offsetLeft - start0l) > 0) {
            document.getElementById('arrow1').style.left = (parseInt(document.getElementById('arrow1').style.left) - 1) + 'px';
            timer0 = setTimeout("ret0()", 3);
        }
    }

    function posun0() {
        if ((document.getElementById('arrow1').offsetLeft - start0l) <= maxPoz0) {
            document.getElementById('arrow1').style.left = (parseInt(document.getElementById('arrow1').style.left) + 1) + 'px';
            timer0 = setTimeout("posun0()", 3);
        }
    }

and the html is

Code:

<ul><li class="l1">
  <a onmouseout="ReturnPosun('arrow1')" onmouseover="StartPosun('arrow1',15)" title="Aktuality" href="?cz_aktuality,22">
    Aktuality
    <img style="position: absolute; left: 306px;" alt="Aktuality" src="templates/img/menu_arrow.png" id="arrow1">
  </a><ul class="sub1"><li class="l1">
  <a onmouseout="ReturnPosun('arrow1')" onmouseover="StartPosun('arrow1',15)" title="AKCE: Bike Music Fest 2011" href="?cz_akce-bike-music-fest-2011,34">
    AKCE: Bike Music Fest 2011
    <img style="position:absolute;" alt="AKCE: Bike Music Fest 2011" src="templates/img/menu_arrow.png" id="arrow1">
  </a>
</li><li class="l2">
  <a onmouseout="ReturnPosun('arrow2')" onmouseover="StartPosun('arrow2',15)" title="AdventureMenu v prodejně TOURATECH CZ" href="?cz_adventuremenu-v-prodejne-touratech-cz,33">
    AdventureMenu v prodejně TOURATECH CZ
    <img style="position: absolute; left: 306px;" alt="AdventureMenu v prodejně TOURATECH CZ" src="templates/img/menu_arrow.png" id="arrow2">
  </a>
</li><li class="lL">
  <a onmouseout="ReturnPosun('arrowL')" onmouseover="StartPosun('arrowL',15)" title="TOURATECH TravelEvent 2011" href="?cz_touratech-travelevent-2011,32">
    TOURATECH TravelEvent 2011
    <img style="position: absolute; left: 306px;" alt="TOURATECH TravelEvent 2011" src="templates/img/menu_arrow.png" id="arrowL">
  </a>
</li></ul>
</li><li class="l2">
  <a onmouseout="ReturnPosun('arrow2')" onmouseover="StartPosun('arrow2',15)" title="O produktu" href="?cz_o-produktu,31">
    O produktu
    <img style="position:absolute;" alt="O produktu" src="templates/img/menu_arrow.png" id="arrow2">
  </a>
</li><li id="selected" class="l3">
  <a onmouseout="ReturnPosun('arrow3')" onmouseover="StartPosun('arrow3',15)" title="E-shop" href="?cz_e-shop,25">
    E-shop
    <img style="position: absolute; left: 306px;" alt="E-shop" src="templates/img/menu_arrow.png" id="arrow3">
  </a>
</li><li class="l4">
  <a onmouseout="ReturnPosun('arrow4')" onmouseover="StartPosun('arrow4',15)" title="Samoohřev" href="?cz_samoohrev,23">
    Samoohřev
    <img style="position: absolute; left: 306px;" alt="Samoohřev" src="templates/img/menu_arrow.png" id="arrow4">
  </a>
</li><li class="l5">
  <a onmouseout="ReturnPosun('arrow5')" onmouseover="StartPosun('arrow5',15)" title="Partneři" href="?cz_partneri,21">
    Partneři
    <img style="position: absolute; left: 306px;" alt="Partneři" src="templates/img/menu_arrow.png" id="arrow5">
  </a>
</li><li class="lL">
  <a onmouseout="ReturnPosun('arrowL')" onmouseover="StartPosun('arrowL',15)" title="Kontakty" href="?cz_kontakty,24">
    Kontakty
    <img style="position:absolute;" alt="Kontakty" src="templates/img/menu_arrow.png" id="arrowL">
  </a>
</li></ul>

and the problem is, that I can move with the first one, but I don't how I can move with the others like alone function
I thought that I can use somethink like if (onmouseover == true) .... but I failed
can someone hellp with this problem pls?

Full Excel VBA Course - Beginner to Expert

Key To Movement

Similar Tutorials

View Content

Anyone know of a good tutorial for making an object move repeatedly while a key is held down (ie move right 1px every second while right arrow key is held?)

Game Movement Problems.

Similar Tutorials

View Content

Hey guys, I just started to create my first Javascript game. It is a platformer and i just cant figure out how to do the movement. ATM my "character" is just a black rectangle. Here is my code. I have not been able to find the bug.

var c = document.getElementById("mainCanvas");
var ctx = c.getContext("2d");
var level1 = new Image();
level1.src = "Textures/level1.png"
level1.addEventListener("load", function() {ctx.drawImage(level1, 0,0,1024,1024)
ctx.fillRect(playerX, playerY, 55, 118)})
//Charecter Position
var playerX = 512
var playerY = 512
//Render
function playerRender() {ctx.fillRect(playerX, playerY, 55, 118)}
window.addEventListener("keydown", function(evt){
if (evt.keycode == 87) {playerY-=10}
})
var RenderPlayerInterval = setInterval(playerRender() ,10)

Reply With Quote

01-25-2015, 12:34 AM #2
Old Pedant View Profile View Forum Posts

Supreme Master coder! Join Date Feb 2009 Posts 28,310 Thanks 82 Thanked 4,754 Times in 4,716 Posts

Code:

ctx.fillRect(playerX, playerY, 55, 118)})
//Charecter Position
var playerX = 512
var playerY = 512

When you *CALL* that fillRect, neither playerX nor playerY has yet been defined!

SO you are essentially doing Code:

ctx.fillRect( null, null, 55, 118)

And where are the semicolons on the end of EACH LINE. Yes, I know they aren't required. But put them in. It will save you from grief someday.

Basic Game Movement

Similar Tutorials

View Content

How could you say make a x move around a grid using the arrow keys?

Character Movement Script Advice.

Similar Tutorials

View Content

Hello everyone,im new to programming and have been learning a little bit of JavaScript.Im mostly learning it for a program called unity 3d,Its a game engine.And well,im stuck and can't figure this part out.i was wondering if anyone could help me.
the script is to make the character move forward and shoot.but the character jumps instead of moving forward. any advice?
Code:

var speed = 3.0;

var rotateSpeed = 3.0;

var bullitPrefab:Transform;



function Update () 

{

		var controller : CharacterController = GetComponent(CharacterController);

		

		// Rotate around y - axis

		transform.Rotate(0, Input.GetAxis ("Horizontal") * rotateSpeed, 0);

		

		// Move Forward / backward

		var forward = transform.TransformDirection(Vector3.forward);

		var curSpeed = speed * Input.GetAxis ("Vertical");

		controller.SimpleMove(forward * curSpeed);

		

		if(Input.GetButtonDown("Jump"))

		{

			var bullit = Instantiate(bullitPrefab, GameObject.Find("spawnPoint").transform.position,

Quaternion.identity);

		}	

}



@script RequireComponent(CharacterController);

Image Left To Right And Back Movement

Similar Tutorials

View Content

Hi, I want the image in the header of my website to move from left to right and back in an endless loop. The image width is larger than the width of the div which contains the image, so when the image moves to the right, the right end of the image has to disappear. When the image moves back to the left, the left end has to disappear. Now I know I can use the overflow: hidden; element in the CSS file to hide a part of the image.

I found already several javascript scripts to move an image over the screen, but these scripts move the image only in 1 direction. I need it to go in the 2 directions in loop. Also these scripts require a position: relative; element to the image, so the hidden overflow of the div doesn't work.

An example of this kind of script:

Code:

<body onload="moveRight()">
<div id="header" style="width: 1010px;height: 170px;overflow: hidden;">
	<img src="images/header.jpg" id="header" style="position:relative;top:0px;left:0px; ">
</div>
<script type="text/javascript">

var userWidth = window.screen.width;
function moveRight() {
var pp = document.getElementById("header");
var lft = parseInt(pp.style.left);
var tim = setTimeout("moveRight()",100);  // 100 controls the speed
lft = lft+3;  // move by 3 pixels
pp.style.left = lft+"px";
if (lft > 50) {  // left edge of image past the right edge of screen
pp.style.left = 0;  // back to the left
}
}

</script> 
</body>

Is there any way to improve this script to my requirements, or am I completely looking in the wrong direction?

Help Needed On Intervaled Img Movement System

Similar Tutorials

View Content

Heres what I did
Created 4 variables
1 - to get which direction the person is pressing (leftright)
2 - if the person is pressing up
3 - to set a direction when a person is pressing any buttons
4 - for images

I made every .05 seconds there should be a check on the conditions for buttons pressed and where the picture is.

Aptana didn't find any errors and personally, I don't like using the program anyway because it makes me feel overwhelmed

If someone could help me pick out the peice that is wrong, that would be nice

should I use the preload as my image source, or keep it as imgs?

Code:

var yvel, i, imgs, updown, ground, reft, leftright, MAX_X, MAX_Y, MIN_X;
MAX_X = 500 /* parseInt(game.style.width) + parseInt(game.style.left); */
MIN_X = 300 /* parseInt(game.style.left); */
MAX_Y = 900 /* parseInt(game.style.height) + parseInt(game.style.top); */
updown = 0;
leftright = 0;
ground = 0;
reft = 1;
yvel = 0;

function init(){
  var guy = document.getElementById("guy");
  imgs=["stand.png", "standleft.png", "jump.png", "jumpleft.png", "walk.png", "walkleft.png", "finishjump.png", "finishleft.png"];
  var preload = new Array();
  for(i=0; i<imgs.length; i++) {
    preload[i]= new Image();
    preload[i].src = imgs[i];
  }
  i = 0;
  document.onkeydown=keyDown;
  document.onkeyup=keyUp;
  movesprite();
}

function movesprite(hori, vert){
  var game = document.getElementById("game");
  x = parseInt(guy.style.left);
  y = parseInt(guy.style.top);
  if (ground = 0) {
    yvel += 3;
    if (hori == 1) { x += 1; right(1); reft = 1; }
    if (hori == -1) { x += -1; left(1); reft = 0; }
    if (hori == 0) { stand(1); }
  }else {
    if (hori == 1) { x += 3; right(0); reft = 1; }
    if (hori == -1) { x += -3; left(0); reft = 0; }
    if (hori == 0) { stand(0); }
    if (vert == 1) { yvel += -15; jump(); }
  }
  checkBounds();
  guy.style.left = x + "px";
  guy.style.top = y + "px";
  setTimeout("movesprite(updown,leftright)", 50);
}

function checkBounds(){
  if (x >= MAX_X)
    {x = MAX_X;}
  if (x <= MIN_X)
    {x = MIN_X}
  if (y + yvel >= MAX_Y)
    {y = MAX_Y; ground = 1;}
  else {ground = 0; y += yvel;}
}

function jump(){
  if (reft == 1) {guy.src = imgs[2];}
  else {guy.src = imgs[3];}
}

function left(ground){
  if (ground == 1) {
    if (guy.src == imgs[1]) {guy.src = imgs[5];}
    else {guy.src = imgs[1];}
  }else {guy.src = imgs[7];}
}

function right(ground){
  if (ground == 1) {
    if (guy.src == imgs[0]) {guy.src = imgs[4];}
    else {guy.src = imgs[0];}
  }else {guy.src = imgs[6];}
}

function stand(ground){
  if (ground == 1) {
    if (reft == 1) {guy.src = imgs[0];}
    else {guy.src = imgs[1];}
  }else {
    if (reft == 1) {guy.src = imgs[6];}
    else {guy.src = imgs[7];}
  }
}

function keyDown(e){
  if (e.keyCode == 37) {leftright = -1;} /*left*/
  if (e.keyCode == 38) {updown = 1;} /*up*/
  if (e.keyCode == 39) {leftright = 1;} /*right*/
/* if(e.keyCode == 40) is down */
}

function keyUp(e){
  if (e.keyCode == 37) {leftright = 0;}
  if (e.keyCode == 38) {updown = 0;}
  if (e.keyCode == 39) {leftright = 0;}
}

onload=init;

Mouse Movement Affect Div's Rotation?

Similar Tutorials

View Content

Move An Image With Javascript And See The Actual Movement (please Help !)

Similar Tutorials

View Content

Hi, I'm a beginner in web programming so please, don't mind if this might look as a dum request.
I need an image to move from outside the viewed space, from somwhere on the page where users cannot hav acces, let's say from x position of -439px to 0px, so that the image looks like entering the window. And I need to do this after the user clicks a piece of text that is already on the screen. How can I do that ? In what tag should I include the image ? where should I put de event handler/ listener ? I know I need to change the CSS atributes but how.
I tried this and it didn't work in Firefox nor in IE.

Code:

THE HTML FILE

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Greenbrain</title>
<script language="javascript" type="text/javascript" src="greenbrain.js"></script>
<link rel="stylesheet" type="text/css" href="greenbrain.css">
</head>
<body>   
   <div id=int; onClick="intr()"> <h1 class="intrare">INTRARE</h1> </div>
   <div id=img_intrare> <img src="soare.png"; class="soare"> </div>
</body>
</html>


THE .CSS FILE
body {background-image:url(fondhome.png); position:fixed;}
img.soare {position:absolute; left:-459px; top:100px; z-index:1;}
h1.intrare {z-index:2}


THE .JS FILE

function intr()
{
	var x, xi;
	x=0;
	xi=document.getElementById('img_intrare').style.left;
	if(xi!=x) {document.getElementById('img_intrare').style.left = x + "px"}  
}

ps: i've been trying for 4 days now to find out how to do this, the answer might be just under my nose but then, my nose would be to big and pidgeons would come and sit on it...

Animate The Movement Of Cell Content From One Table To Another.

Similar Tutorials

View Content

Hello,
I am trying to move each cell content from one table to another table. I do not want to lose the value of each cells in table1, but just to show how I got table2
from table1. I would like to show/animate the movement. So when the user clicks the button the data from table1 will scroll towards table2.
I am new to HTML/javascript programming I really appreciate your help