|
JavaScript - Moving An Image Error
My code is:
Code: <html>
<head>
<script type='text/javascript'>
winx=220
winy=176
self.resizeTo(winx,winy);
</script>
<img id="default"
style="z-index: 0;left: 0; position: absolute; top: 0px"
height=32 width=32 align=baseline border=0 hspace=0 src='save.gif'></p>
<script type="text/javascript">
document.getElementById("default".style.top = '0px';
document.getElementById("default".style.left = '0px';
</script>
The image shows up, but it doesn't move. I can't seem to find out what I'm doing wrong. Edit: Finally spotted it, I was missing a ")" ._. Similar TutorialsHello, I'm newbie in javascript, but i want to make an moving image. In time it should change to other image with other button. Also it could be changed by user. The change should be dynamic like moving from left to right. ^^ Any advices, tutorial links or smthing.. Thx Hi there folks. I am a bit stuck with a little code. I am making a online yearbook entry and I wanted an image of myself animate/move from the top left hand to the bottom right of the screen. I also wanted to allow people reading it the option to change bg colour and text size - but I have managed to do those. The difficulty I am having is with moving the image, could anybody suggest any simple codes because I am new to this and don't want my head spinning before I go any further! Any help is greatly appreciated. Hi, I'm noob , but i have nice idea i want to do it but i can't .. i tried many ways to do it .. but didn't work any of them .. the idea is move the foot to room no.1 .. but i want to see the foot moving on the red line to the room like this pic : Hey guys, I was trying to make a Javascript game that moves an image across the screen randomly. Instead of executing properly, it just shows the image's starting point, and stops. No movement. Is there anyway I could fix this? Thanks, Fizz. Code: <html>
<head>
<title>Image Mover</title>
<style>
DIV.movable { position:absolute; }
</style>
</head>
<script language="javascript">
function Start() {
var x = 5; //Starting Location - left
var y = 5; //Starting Location - top
var dest_x = Math.floor(Math.random()*650); //Ending Location - left
var dest_y = 500; //Ending Location - top
var interval = 10; //Move 10px every initialization
moveImage();
}
function NewDest() {
var x = 5; //Starting Location - left
var y = 5; //Starting Location - top
var dest_x = Math.floor(Math.random()*650); //Ending Location - left
var dest_y = 500; //Ending Location - top
var interval = 10; //Move 10px every initialization
moveImage();
}
function moveImage() {
//Keep on moving the image till the target is achieved
if(x < dest_x) x = x + interval;
if(y < dest_y) y = y + interval;
//Move the image to the new location
document.getElementById("ufo").style.top = y+'px';
document.getElementById("ufo").style.left = x+'px';
if ((x+interval < dest_x) && (y+interval < dest_y)) {
//Keep on calling this function every 100 microsecond
// till the target location is reached
window.setTimeout('moveImage()',30);
if (x == dest_x) && (y == dest_y) {
NewDest();
}
}
}
</script>
<body onload="Start()">
<div id="ufo" class="movable">
<img src="Mouse.jpg" alt="mouse" WIDTH = 30/>
</div>
</body>
</html>
Hello, I am trying to move an image down 20px each time the button is clicked, but I can only get it to move down once. I see what I am doing wrong, but I'm not sure how to fix it. I don't know how to store the updated position of the image in a variable. Code: <center>
<input type="button" value="Click" onClick="moveDown()"/>
</center>
<img id="Ball" src="ball.jpg" style="position:absolute; top:100; left:100;"/>
<script language="JavaScript">
var Image = document.getElementById("Ball");
var Position = 100;
function moveDown()
{
Image.style.top = Position + 20
}
</script>
Thanks, Celia Hello everyone. I want to move my image through table cells by using arrow buttons. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Move</title>
<style type="text/css" >
table
{
background-color:#FFCC00;
margin-top: 100px;
margin-bottom: 100px;
}
</style>
</head>
<body onload="setup()">
<script type="text/JavaScript" onkeydown="handleKey(event)">
document.write('<table border="1" cellspacing="0" cellpadding="10">');
var count =0
for (var row=0; row<20; row++) {
document.write('<tr>');
for (var col=0; col<20; col++) {
idnmr = count
count++
document.write('<td style="border:0"; id="idnmr";>');
document.write('</td>');
}
document.write('</tr>');
}
function setup() {
row=0;
col=0;
insertKnight(row,col);
}
function handleKey(e) {
if (typeof e !='object') e=window.event;
if (e.type == 'keydown' && (e.keyCode ==27 || (e.keyCode >= 37 && e.keyCode <=40))) {
switch (e.keycode) {
case 37:
dC= -1;
dR = 0;
break;
case 38:
dC= +1;
dR=0;
break;
case 39:
dC = 0;
dR = +1;
break;
case 40:
dC= 0;
dR=-1;
break;
}
emptyCell(row,col);
function emptyCell(row,col)
{
var id = 'r' + row + 'c' + col;
var cell= document.getElementById(id);
if(cell) cell,innerHTML='';
}
row +=dR;
col +=dC;
//insert image
insertKnight(row,col);
return false;
function insertKnight(row,col) {
var id = 'r' + row + 'c' + col;
var cell = document.getElementById(id);
var colour = cell.className;
if (colour != 'white') {
var knight='cherry.png';
}
else {
var knight= 'cherry.png';
function eraseImage(row,col) {
var id = 'r' + row + 'c' + col;
document.getElementById(id).innerHTML = '';
}
cell.innerHTML = '<img src=" ' + knight + ' " alt="' + colour + 'knight" />';
}
document.getElementById('debug').innerHTML = 'r='+row+' c='+col;
function drawImage(row,col) {
var id = 'r' + row + 'c' + col;
document.getElementById(id).innerHTML = '<img src="cherry.png"/>';
}
</script>
</body>
</html>
This is my code. Now i have problems with the eraseImage and drawImage functions. They just don't work. Any help will be appreciated. Thank you I've put together a couple of scripts, in order that I can make an image move left or right on the x-axis, depending on the LR (left/right) read-out from the accelerometer of an iPhone. However, it's not working at the moment, so could anyone possibly see what I've missed out - I've worked on it that long, that I think I'm missing something obvious!! THANKS!! Code: <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onlywebpro.com</title>
</head>
<body>
<h2>Device Orientation with HTML5 | onlywebpro.com</h2>
<img src="Car4.png" id="car" style="position:relative;top:200px;left:200px; "><br>
<script type="text/javascript">
if (window.DeviceOrientationEvent) {
console.log("DeviceOrientation is supported");
window.addEventListener('deviceorientation', function(eventData) {
var LR = eventData.gamma;
deviceOrientationHandler(LR);
var userWidth = window.screen.width;
function moveRight() {
var pp = document.getElementById("car");
var lft = parseInt(pp.style.left);
var tim = setTimeout("moveRight()",50); // 50 controls the speed
lft = lft+LR; // move by 50 pixels
pp.style.left = lft+"px";
if (lft > userWidth + 439) { // left edge of image past the right edge of screen
pp.style.left = -400; // back to the left
clearTimeout(tim);
}
}
}, false);
} else {
alert("Not supported on your device or browser. Sorry.");
}
var userWidth = window.screen.width;
function moveRight() {
var pp = document.getElementById("car");
var lft = parseInt(pp.style.left);
var tim = setTimeout("moveRight()",50); // 50 controls the speed
lft = lft+LR; // move by 50 pixels
pp.style.left = lft+"px";
if (lft > userWidth + 439) { // left edge of image past the right edge of screen
pp.style.left = -878; // back to the left
clearTimeout(tim);
}
}
</script>
</body>
</html>
hi all, I want to be able to move an image from a left or right when tilting my ipad. when tilted the the right the image moves to the right according to the angel tilted and do the same to the other direction. the image is doubled (or more) the size of the stage (1024x768). I can't use Flash for obvious reasons so looking at other options. thanks Hello all! I am fairly experienced in HTML but javascript I am useless with. My website can be found here; http://mgwalker.site90.com/index.html If you would be as kind as to load it in Chrome and in firefox, in firefox the changing image pops up on the top right of the screen. In Chrome it is centered in the div, as it should be... Please help I have no idea why this would happen! Code: function move_user_img(str) {
var step = 25;
// change this to different step value
switch(str) {
case "down":
var x = document.getElementById('imageUser').offsetTop;
x = x + step;
document.getElementById('imageUser').style.top = x + "px";
break;
case "up":
var x = document.getElementById('imageUser').offsetTop;
x = x - step;
document.getElementById('imageUser').style.top = x + "px";
break;
case "left":
var y = document.getElementById('imageUser').offsetLeft;
y = y - step;
document.getElementById('imageUser').style.left = y + "px";
break;
case "right":
var y = document.getElementById('imageUser').offsetLeft;
y = y + step;
document.getElementById('imageUser').style.left = y + "px";
break;
}
}
function move_report_img(str) {
var step = 25;
// change this to different step value
switch(str) {
case "down":
var x = document.getElementById('imageReport').offsetTop;
x = x + step;
document.getElementById('imageReport').style.top = x + "px";
break;
case "up":
var x = document.getElementById('imageReport').offsetTop;
x = x - step;
document.getElementById('imageReport').style.top = x + "px";
break;
case "left":
var y = document.getElementById('imageReport').offsetLeft;
y = y - step;
document.getElementById('imageReport').style.left = y + "px";
break;
case "right":
var y = document.getElementById('imageReport').offsetLeft;
y = y + step;
document.getElementById('imageReport').style.left = y + "px";
break;
}
}
Code: <div id ="display" style="width:640px; height:480px; overflow:hidden;">
<div>
<img src ="
<?php
echo UPLOADPATH . $userImage;
?>
" style = "position:absolute;" id="imageUser"/>
</div>
<div id ="imageReport">
<img src = "
<?php
echo $reportImage;
?>
" style = "opacity:0.25;height:700px; width:450px;" />
</div>
</div>
<div style="position:absolute; top:550px; left:100px;">
<p>Control User Image</p>
<input type=button onClick=move_user_img('up') value='Up'>
<input type=button onClick=move_user_img('left') value='Left'>
<input type=button onClick=move_user_img('right') value='right'>
<input type=button onClick=move_user_img('down') value='down'>
</div>
<div style="position:absolute; top:650px; left:100px;">
<p>Control Report Image</p>
<input type=button onClick=move_report_img('up') value='Up'>
<input type=button onClick=move_report_img('left') value='Left'>
<input type=button onClick=move_report_img('right') value='right'>
<input type=button onClick=move_report_img('down') value='down'>
</div>
Hi, I have a problem when my mouse point to specific element on image, my image is gone. It happened on IE 8. When I tried on Firefox, Safari and other browser, it is working ok. Could you guy help me to find out what went wrong? See bellow for the code. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="http://plutoville.staging.elevatedrails.com/javascripts/prototype.js" type="text/javascript"></script>
</head>
<body>
<div>
<div><img alt="World" id="question_image" src="http://plutoville.staging.elevatedrails.com/question_images/0000/1278/World.gif" usemap="#question_map" /></div>
<map id="question_map" name="question_map"><area shape="rect" alt="Indonesia" title="Indonesia" coords="262,104,364,127" onmouseout="mouseOutOfShape(0);" onmouseover="mouseOverShape(0);" onclick="clickShape(0);" href="javascript:registerClick();" rel="nofollow" target="_self" /><area shape="rect" alt="Canada" title="Canada" coords="36,15,99,44" onmouseout="mouseOutOfShape(1);" onmouseover="mouseOverShape(1);" onclick="clickShape(1);" href="javascript:registerClick();" rel="nofollow" target="_self" /></map>
</div>
<script src="http://plutoville.staging.elevatedrails.com/javascripts/drawing.js" type="text/javascript"></script>
<!--[if gte IE 8]>
<script src="http://plutoville.staging.elevatedrails.com/javascripts/excanvas.js" type="text/javascript"></script>
<![endif]-->
<script type="text/javascript">
question_image_1 = $('question_image');
shapes = new Array();
border_shapes = new Array();
selected_shape_index = null;
border_style = {stroke:"rgb(255,128,0)", fill:"rgba(255,128,0,0.0)"};
neutral_style = {stroke:"rgb(255,128,0)", fill:"rgba(255,128,0,0.2)"};
shapes.push(new StyledShape(neutral_style, new Rectangle(262,104,364,127)));
border_shapes.push(new StyledShape(border_style, new Rectangle(262,104,364,127)));
shapes.push(new StyledShape(neutral_style, new Rectangle(36,15,99,44)));
border_shapes.push(new StyledShape(border_style, new Rectangle(36,15,99,44)));
draw = function() {
question_image_1.onload = function() {
if(!this.complete) {return;}
drawing_context = drawingContextOfImage(this);
drawBorders(drawing_context);
}
question_image_1.onload();
}
clickShape = function(index) {
selected_shape_index = index;
$('answer_map_area_index').value = index;
drawing_context = drawingContextOfImage(question_image_1);
drawBorders(drawing_context);
}
drawBorders = function(drawing_context) {
border_shapes.each(function(shape, index) {
shape.draw(drawing_context)
});
if(selected_shape_index != null) {
shapes[selected_shape_index].draw(drawing_context);
}
}
mouseOverShape = function(index) {
drawing_context = drawingContextOfImage(question_image_1);
drawBorders(drawing_context);
if(selected_shape_index != index) {
shapes[index].draw(drawing_context);
}
}
mouseOutOfShape = function(index) {
drawing_context = drawingContextOfImage(question_image_1);
drawBorders(drawing_context);
}
draw();
</script>
</body>
</html>
I'm trying to add an image rollover effect, but when I put it into play, the first image slowly fades into the second image and stays at the second image before I even hover my mouse over it. I've tried multiple scripts and it still seems to be happening www.alternativeland.com Does anyone have an idea as to why? Hello there. I'm using Joomla 1.5 and VirtueMart for my e-shop. I've also installed a virtuemart template which loads mootools. Well in my virtuemart product detail pages, if you click the main image to make it enlarged using IE8 it will not open and return a JS error instead (found it using Firebug): http://goo.gl/6lQCV Code: Message: 'closeButton' is null or not an object Line: 21 Char: 63 Code: 0 URI: http://www.xxxxx.xxx/media/system/js/mootools.js I'm not sure but I think that if I fix the JS errors on these pages the problem will be solved and the images will open normally. Note that on all other browsers it works fine (Firefox, Chrome, Safari, IE9). The page returns some other errors too but they're the whole time there. I think there's a conflict caused by all the JS libraries loaded by my Plugins (System - RokBox & YOOeffects), Joomla template, VirtueMart & VirtueMart template (jquery and mootools are both loaded). Thanks in advance What is wrong with my code? I am trying to move a div and it wont work at all. Also my little <a> fix is really sloppy. Could I have some help with how I should fix that too? Thanks! Code: <html>
<head>
<script type="text/javascript">
var obj = document.getElementById("object");
var x = parseInt(obj.style.left);
var y = parseInt(obj.style.top);
function right(){
obj.style.left = "" + (x + 1) + "";
}
function left(){
}
</script>
</head>
<body>
<a href="" onclick="right();">
<div id="container" style="position:absolute; top:100px; left:50%; margin-left:-400px; width:800px; height:600px; border:3px solid #808080;">
<div id="object" style="position:relative; top:559; left:379; background-color:#CCCCCC; width:40px; height:40px; border:1px solid #696969;">
</div>
</div>
</a>
</body>
</html>
I already looked at this http://codingforums.com/showthread.p...ht=moving+text thread and I know it's similar. I just don't know what I am doing wrong. My css puts the text where it needs to go, then the script is supposed to alter it's pixel position and so it should move, right? Code: <html>
<head>
<style>
item1 {position: absolute; left:20px; top:280px;}
item2 {position: absolute; right:20px; top:280px;}
</style>
</head>
<body>
<item1 id="item1" >item1</item1>
<item2 id="item2" >item2</item2>
<script type="text/javascript">
var i=0; var j=0;
var obj1=document.getElementById(item1);
var obj2=document.getElementById(item2);
obj1.style.visibility="visible";
obj2.style.visibility="visible";
//if (typeof obj1.style.left!="undefined" && obj2.style.right!="undefined")
//{
//loop from ParseInt to coordinates in center of screen
for (i=0;i<100;i++)
{
obj1.style.left=parseInt(obj.style.left) + i + "px";
document.write("<item1 id="item1">item1</item1>");
document.close();
}
//for (j=0;j<100;j++)
// {
// obj2.style.right=parseInt(obj2.style.right) + j + "px";
// document.write("<item2 id="item2" >item2</item2>");
// }
alert(i);
//}
</script>
</body>
</html>
Am I anywhere close? I am trying this on IE6 (I only have Windows 2000) and on Firefox 3.5.3. I'm trying to create something like: http://www.deliciouslysortedibiza.com/ But I want the links to move like it does in there. Does anyone know the easiest way I could achieve this? Since I'm fairly new to Javascript and all. Thanks ! Hello everyone. I am trying to make a flag with css and then move it with javascript. Code: <html>
<head>
<title>Flag</title>
<link rel="stylesheet" type="text/css" href="flag3.css" />
<script language="javascript">
Hmove=-100;
function moveObjRight(obj)
{
obj.style.left=Hmove;
Hmove+=4;
if(Hmove<900)
window.setTimeout("moveObjRight(" +obj.id+ ");", 0);
}
</script>
</head>
<body>
<h1>The flag of ___ by www</h1>
<div id="bar3">
<div id="bar2">
<div id="bar1">
</div>
<br />
<br />
<br />
<br />
</div>
<br />
<br />
<br />
<br />
</div>
<script language="JavaScript">
moveObjRight(bar3);
</script>
</body>
</html>
This is my code. The image is moving to the right, but i want it bounce from side-to-side in the browser window. Any help will be appreciated. Thank you. I am trying to find some examples of something I know I have seen in the past, but I am unable to put together a search that is coming up with anything. What I have is a div of content that I need to always be visible on the screen. The page needs to be scrolled to read through it all so I need a way for the div to move down the page as I scroll. Can anyone point me in the right direction? Hello ! I'm searching help regarding a script, function, or w/e that could enable me to move a DIV with acceleration & deceleration. Note: the DIV has a setTimeout on it to change sprites (I'm basically moving a little character) More details for what the script/function has to do - One function to start - It's accelerating from 1px/X to 5px/X (where X is in millisecond) in Y millisecond - One function to stop (which is obviously decelerating from 5px/X to a fixed position in Y millisecond (same as acceleration) Currently I have a stupid script whe First occurence of key pressing starts the move, and the continuous keypress occurence makes my object move 5px. I'm pretty sure it takes hugue amount of time for the browser to do it, so I'm trying to improve. My ideas: - Improve this method, obviously not a good solution in my opinion - Using a while loop that will trigger moving every Y millisecond (But that might kill the sprites's setTimeout) - Massive setTimeout every Y millisecond (Would that be good ?) - Using somehow a sleep() php-like function (It doesn't exist in JS ?) I hope I can improve my system quickly Thanks for helping, nico Hi Guys, seen some pages who give alerts or Warnings mentioning that i'm moving away from my webpage. Best example is hotmail when you are on the compose mail screen and when click another link it is asking for confirmation. Can you one please shed some light on how to do this. Your help is greatly appreciated. Cheers Dileep |
|||||||