javascript moving image question

Themuppeteer · Aug 7, 2002

hello,
I want to make a class image, and when I make an instance of it, it draws an image on certain coordinates x and y. The image ,x and y value are given as arguments.
This is what I have,but I'm not there yet and I'm stuck.
The images are drawn,but when I go over them with my
mouse,I want them to jump to the left 10 pixels. I cant get this to work. Can NE1 help me pleazze ?

<html>
<head>
<script language="JavaScript">
<!--
function myImage(x,y,image)
{
/*function paint(){
alert("test&quot

; //doesnt work either
}*/
this.x=x;
this.y=y;
this.left=x;this.top=y;

this.p="<div id='gif' style='position:absolute;'> <a href='#' OnMouseOver='this.left+=10;'><img
src='"+image+"'></a></div>";
document.write(this.p);

}
//-->
</script>
</head>

<script>
mm=new myImage(100,100,"monkey.gif&quot

;
b=new myImage(100,200,"foto1.gif&quot

;
</script>

</html> Greetz,

The Muppeteer.
themuppeteer@hotmail.com

http://www.themuppeteer.tk

Don't eat yellow snow...

Tels · Aug 14, 2002

My immediate impression was that you may have problems in the way you have used your onMouseOver ... I like to write everything as a function and call only functions from onMouse.etc.. events. try this

// The following function courtesy of xutopia
//

http://www.xutopia.com)

- Thanx
// This moves a layer to a specific x,y position

function slideObjectTo(id, x, y)
{
var obj = document.getElementById(id);
var objx = parseInt(obj.style.left);
var objy = parseInt(obj.style.top);
in_motion=1;
if (x == objx && y == objy)
{in_motion=0;return;}
if (objx > x)
{obj.style.left = objx - 2;}
else if (objx < x)
{obj.style.left = objx + 2;}
if (objy > y)
{obj.style.top = objy - 2;}
else if (objy < y)
{obj.style.top = objy + 2;}
window.status = document.getElementById(id).style.left + " " + document.getElementById(id).style.top + " " + in_motion
setTimeout("slideObjectTo('" +id + "' ,"+ x +","+ y +&quot

", 5)
}
----------------------------------------
ie. onMouseOver="slideObjectTo('gif',x,y)"

If you want to move a layer RELATIVE to its current position, try adding this:
-----------------------------------------

function relativeShift(layerId,direction,amount){
if (in_motion !=0){return;} //break out if the layer is in motion
var cur_x_pos = document.getElementById(layerId).style.left;
var cur_y_pos = document.getElementById(layerId).style.top;
var dest_x = parseInt(cur_x_pos);
var dest_y = parseInt(cur_y_pos);
if(direction=="up&quot

{dest_y -= amount; slideObjectTo(layerId,dest_x,dest_y);}
if(direction=="down&quot

{dest_y += amount; slideObjectTo(layerId,dest_x,dest_y);}
if(direction=="left&quot

{dest_x -= amount; slideObjectTo(layerId,dest_x,dest_y);}
if(direction=="right&quot

{dest_x += amount; slideObjectTo(layerId,dest_x,dest_y);}
}

and use:

ie. onMouseOver="relativeShift('gif','left',10)"

.... Of course you might have to adapt these functions to do what you want, but I hope this helps. Mixed Linux/Win2000 Network Administrator

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

javascript moving image question

Themuppeteer

Programmer

Tels

IS-IT--Management

Similar threads

Part and Inventory Search

Sponsor