Thread: Javascript image swap on rollover.
View Single Post
•
•
Join Date: Mar 2008
Posts: 78
Reputation: rickya100 is an unknown quantity at this point 
Solved Threads: 1
rickya100 rickya100 is offline Offline
Junior Poster in Training

Javascript image swap on rollover.

 
0
  #1
Apr 6th, 2008
Hi and thanks for looking.

The problem i'm having is simply getting an image to swap on a mouseover. Well I sort of had it working but then I cahnged the function to try and accomodate for more images and it just fell over dead.

Let me show you the function I have for it. Bear in mind I'm used to coding but more PHP and VB rather than JavaScript so the code ain't going to be pretty, sorry.

javascript Syntax (Toggle Plain Text) 
  1.  
  2. <script language="javascript1.5">
  3. Rollimage = new Array()
  4.  
  5. Rollimage[0] = new Image(244,244) 
  6. Rollimage[0].src = "images/personal_up.png" 
  7. Rollimage[1] = new Image(244,244)
  8. Rollimage[1].src = "images/personal_over.png"
  9.  
  10. Rollimage[2] = new Image(244,244) 
  11. Rollimage[2].src = "images/thoughts_up.png" 
  12. Rollimage[3] = new Image(244,244)
  13. Rollimage[3].src = "images/thoughts_over.png"
  14.  
  15. Rollimage[4] = new Image(244,244) 
  16. Rollimage[4].src = "images/work_up.png" 
  17. Rollimage[5] = new Image(244,244)
  18. Rollimage[5].src = "images/work_over.png"
  19.  
  20. function SwapBack(image, number){
  21.   document.[image].src = Rollimage[number].src;
  22.   return true;
  23. }
  24. function SwapOut(image, number) {
  25.   document.[image].src = Rollimage[number].src;
  26.   return true;
  27. } 
  28.  
  29. </script>

Thats my function which i have placed in a PHP file which I then include on everypage.
Now the 3 image links that I am calling the function from.

html Syntax (Toggle Plain Text) 
  1.  
  2. <div class="icons">
  3. <a href="#" onmouseover="SwapOut(personal, 0)" onmouseout="SwapBack(personal, 1)"><img name="personal" alt="logo" src="images/personal_up.png" /></a>
  4. <a href="#" onmouseover="SwapOut(thoughts, 2)" onmouseout="SwapBack(thoughts, 3)"><img name="thoughts" alt="logo" src="images/thoughts_up.png" /></a>
  5. <a href="#" onmouseover="SwapOut(work, 4)" onmouseout="SwapBack(work, 5)"><img name="work" alt="logo" src="images/work_up.png" /></a>
  6. </div>

So that's it. As i say I had it working with only one image but trying to expand upon the example i found hasn't worked.

Any tips or help that you could post would be great.

Thanks for looking.

BTW I have searched google and read many articles on this but still can't get it to work. Also I have searched previous articles on DaniWeb and again none solve the problem.

The address of the page is www.richardjohnashe.com/portfolio.
Last edited by rickya100; Apr 6th, 2008 at 12:10 am.
Reply With Quote