Script to move an image when rolled over? [Archive]

View Full Version : Script to move an image when rolled over?

GDufour

04-13-2011, 06:28 PM

Hi,

I volunteer for our city library and one of our programs we run is basic computer training for seniors. I am trying to develop some web tutorials to assist patrons with the basic skills of using a computer.

Excuse my ignorance, I have little experience with this kind of stuff, but I can do basic HTML. What I'm looking for is a script that when a user places their mouse over an image, the image moves to a location across the page. When they do this again, the image moves somewhere else, and so on. This is to get the patron used to moving the mouse around on screen. I'm looking to do this exact thing on this website:

http://mouseprogram.com/move-game.html

Also, is there a way to do it so that when a user moves the mouse over the image, it doesn't move, but when clicked once (or twice only) it moves and so on?

If anyone could help me out with this it would be greatly appreciated. Thanks so much!

vwphillips

04-14-2011, 08:37 AM

<!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" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/

#Squrirel {
position:absolute;z-Index:101;left:200px;top:200px;
}

/*]]>*/
</style></head>

<body>
<img id="Squrirel" src="http://mouseprogram.com/squrirel4.jpg" alt="squrirel" onmouseup="SqurirelMove()"/>

<script type="text/javascript">
/*<![CDATA[*/

function Squrirel(o){
Squrirel.img=document.getElementById(o.ID);
Squrirel.ary=o.PositionArray
Squrirel.lst=Squrirel.ary[0];
}

function SqurirelMove(){
var nxt=Squrirel.ary[Math.floor(Math.random()*Squrirel.ary.length)];
if (nxt==Squrirel.lst){
return SqurirelMove();
}
Squrirel.lst=nxt
Squrirel.img.style.left=nxt[0]+'px';
Squrirel.img.style.top=nxt[1]+'px';
}

Squrirel({
ID:'Squrirel',
PositionArray:[
[200,200],
[800,600],
[10,600],
[400,300]
]
})
/*]]>*/
</script>
</body>

</html>

GDufour

04-14-2011, 12:54 PM

Thanks so much!