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

(30 comments)

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

I've tried to implement this scrip twice in the same page but the two scripts conflict.[br /][br /]I changed the second display window's name to ['PhotoBig1'] but the photos all show in the original window regardless unless I change the order of the <head> java snippits. I don't know anything about JS so I'm stuck.[br /][br /]I suppose I could use a floating window that works throughout the length of the page, or just a popup window if no other solutions exists.[br /]Thank in advance.

David Oct 5, 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

Whitepapers and More