OnMouseOver Image Gallery

Robert Daniel Jan 30, 2008

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

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>

Leave a Response

(31 comments)

This was exactly what I was looking for and have implemented it within my website. Thank you soooo much!

Jake Apr 26, 2012

David,[br /]Your question is beyond the scope of these comments. You will need to post it over on [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]the JavaScript forum[/a]. Thanks!

Lee Nov 6, 2008

Your question is beyond the scope of these comments. You will need to post it over on [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]the JavaScript forum[/a]. Thanks!

Lee Oct 31, 2008

Your question is beyond the scope of these comments. You will need to post it over on [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]the JavaScript forum[/a]. Thanks!

Lee Oct 31, 2008

Your question is beyond the scope of these comments. You will need to post it over on [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]the JavaScript forum[/a]. Thanks!

Lee Oct 31, 2008

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details

OnMouseOver Image Gallery

General

Notes

Source Code

Head

Body

Leave a Response

Attention JavaScript Coders

Go Deeper