Results 1 to 3 of 3

Thread: Script to move an image when rolled over?

  1. #1
    Join Date
    Apr 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Script to move an image when rolled over?

    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!

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

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

    GDufour (04-14-2011)

  4. #3
    Join Date
    Apr 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thanks so much!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •