Image Effects : OnMouseOver Image Gallery / The JavaScript Source

General

When the mouse moves over one of the thumbnails, the larger-sized picture area changes to the larger-sized picture that corresponds to that thumbnail. Easy to implement.


Move the cursor over the images/picture you wish to preview.

Notes

Created by: Robert Daniel Jr.
Web Site: http://javascript.slirple.com
Posted: January 30, 2008

Source Code

Paste this source code into the designated areas.

Head

Paste this code into the HEAD section of your HTML document.


function update(url,index,isSuper) {
 	document['PhotoBig'].src=url;
}

Body

Paste this code into the BODY section of your HTML document


<div style="margin-left: 30%;">

 	<img src="images/pic1.gif" name="PhotoBig" style="border:1px solid black">

<table>
	 <tr>
	   <td>
		    <a onMouseOver="update('images/pic1.gif', 0, false); return false;">
			   <img src="images/pic1-sm.gif" style="border:1px solid black">
			   </a>
    </td><td>
		    <a onMouseOver="update('images/pic2.gif', 1, true); return false;">
			   <img src="images/pic2-sm.gif" style="border:1px solid black">
		    </a>
    </td><td>
		    <a onMouseOver="update('images/pic3.gif', 2, true); return false;">
			   <img src="images/pic3-sm.gif" style="border:1px solid black">
		    </a>
	   </td><td>
		    <a onMouseOver="update('images/pic4.gif', 3, true); return false;">
			   <img src="images/pic4-sm.gif" style="border:1px solid black">
		    </a>
    </td></tr>
  <tr>
    <td colspan="4" style="text-align: center; font: .8em 'Comic Sans MS', Arial;">
   			Move the cursor over the images/picture you wish to preview.
    </td>
  </tr><tr>
    <td>
		    <a onMouseOver="update('images/pic5.gif', 4, true); return false;">
		    <img src="images/pic5-sm.gif" style="border:1px solid black">
		    </a>
    </td><td>
		    <a onMouseOver="update('images/pic6.gif', 5, true); return false;">
			   <img src="images/pic6-sm.gif" style="border:1px solid black">
		    </a>
    </td>
    <td>
    		<a onMouseOver="update('images/pic7.gif', 6, true); return false;">
			   <img src="images/pic7-sm.gif" style="border:1px solid black">
		    </a>
    </td><td>
		    <a onMouseOver="update('images/pic8.gif', 7, true); return false;">
			   <img src="images/pic8-sm.gif" style="border:1px solid black">
		    </a>
    </td>
		</tr>
</table>

</div>

User Comments

Add a comment, suggestion, or correction

Comments feed

next comments...

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

Head

Body

User Comments

29. From: David
Implementing this script more than once in a page
10/05/2008 17:16:37

30. From: Lee (Admin)
11/06/2008 11:18:35

28. From: John Burke
Thanks for the code!
10/01/2008 03:31:53

27. From: John C. Allen
Onmouseover script
09/03/2008 12:05:14

24. From: jon
function tag
08/09/2008 20:36:33

25. From: Lee (Admin)
10/31/2008 15:07:33

19. From: Arun Kumar Jha
07/30/2008 06:18:29

22. From: Mark
07/03/2008 18:44:21

23. From: Lee (Admin)
10/31/2008 15:01:42

3. From: julia
this code doesn't work
05/02/2008 15:38:20

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

Head

Body

User Comments

29. From: DavidImplementing this script more than once in a page10/05/2008 17:16:37

30. From: Lee (Admin)11/06/2008 11:18:35

28. From: John BurkeThanks for the code!10/01/2008 03:31:53

27. From: John C. AllenOnmouseover script09/03/2008 12:05:14

24. From: jonfunction tag08/09/2008 20:36:33

25. From: Lee (Admin)10/31/2008 15:07:33

19. From: Arun Kumar Jha07/30/2008 06:18:29

22. From: Mark07/03/2008 18:44:21

23. From: Lee (Admin)10/31/2008 15:01:42

3. From: juliathis code doesn't work05/02/2008 15:38:20

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

29. From: David
Implementing this script more than once in a page
10/05/2008 17:16:37

30. From: Lee (Admin)
11/06/2008 11:18:35

28. From: John Burke
Thanks for the code!
10/01/2008 03:31:53

27. From: John C. Allen
Onmouseover script
09/03/2008 12:05:14

24. From: jon
function tag
08/09/2008 20:36:33

25. From: Lee (Admin)
10/31/2008 15:07:33

19. From: Arun Kumar Jha
07/30/2008 06:18:29

22. From: Mark
07/03/2008 18:44:21

23. From: Lee (Admin)
10/31/2008 15:01:42

3. From: julia
this code doesn't work
05/02/2008 15:38:20