Image Effects : OnMouseOver Image Gallery / The JavaScript Source

Internet.commerce

Internet.com

IT
Developer
Internet News
Small Business
Personal Technology
International

Search internet.com
Advertise
Corporate Info
Newsletters
Tech Jobs
E-mail Offers

Great Sites

DocJavaScript.com
dhtml.com
The Freebie Directory
TheFreeSite.com

Browse Doc JS's Tips!

Promotions

Free Announcements

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...

Do you write JavaScripts?
If you do, why not submit them to us?
We'll give you credit and a link back to your Web site.

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

Head

Body

User Comments

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

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

4. From: Lee (Admin)
05/12/2008 11:37:30

9. From: Michael McNamee
onmouseover image gallery
03/22/2008 03:42:15

16. From: sarah
question
03/11/2008 19:24:27

17. From: Lee (Admin)
06/26/2008 11:25:03

14. From: Dennis H
URL Error
02/10/2008 09:18:30

15. From: Lee (Admin)
06/26/2008 10:54:56

12. From: Dennis
This is not working for me
02/09/2008 21:28:34

13. From: Lee (Admin)
06/26/2008 10:54:22

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

Head

Body

User Comments

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

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

4. From: Lee (Admin)05/12/2008 11:37:30

9. From: Michael McNameeonmouseover image gallery03/22/2008 03:42:15

16. From: sarahquestion03/11/2008 19:24:27

17. From: Lee (Admin)06/26/2008 11:25:03

14. From: Dennis HURL Error02/10/2008 09:18:30

15. From: Lee (Admin)06/26/2008 10:54:56

12. From: DennisThis is not working for me02/09/2008 21:28:34

13. From: Lee (Admin)06/26/2008 10:54:22

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

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

4. From: Lee (Admin)
05/12/2008 11:37:30

9. From: Michael McNamee
onmouseover image gallery
03/22/2008 03:42:15

16. From: sarah
question
03/11/2008 19:24:27

17. From: Lee (Admin)
06/26/2008 11:25:03

14. From: Dennis H
URL Error
02/10/2008 09:18:30

15. From: Lee (Admin)
06/26/2008 10:54:56

12. From: Dennis
This is not working for me
02/09/2008 21:28:34

13. From: Lee (Admin)
06/26/2008 10:54:22