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

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" 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!

Thread: Script to move an image when rolled over?

Thread Tools

Search Thread

Script to move an image when rolled over?

The Following User Says Thank You to vwphillips For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions