Imagemenu Script

A Simple Javascript Image Menu with horizontal image navigation. Rollover the mouse on the image, the menu bar image slides open from the left corner of the screen and moving the mouse out will cause the images to slide back automatically. This script is similar to that of a slideshow.

Features

Slides Open the Image Menus automatically Onmouseover.
Simple image rollover menu script with horizontal navigation.
You can set the menu to appear onmouseover or rollover the image by the user.
Easy to use javascript horizontal scrolling image menu script.

Preview

Menu1	Menu2	Menu3	Menu4	Menu5
© hscripts.com

Downloads

<script type="text/javascript" src="himagemenu/imagemenu.js">
</script>
<table width="550px">
<tr>
<td align="center" style="cursor:pointer;float:left;background: url(himagemenu/images/img1.jpg) repeat scroll 0%; width:80px;height: 200px;border-color:white;border-style: solid;border-right-width:2px;border-left-width:0px;border-top-width:0px;border-bottom-width:0px;color:white;" id="img1" onmouseover="enlargeimg(this.id)" onmouseout="actualimg()"><a href='#' style='text-decoration:none;'>Menu1</a></td>
<td align=center style="cursor:pointer;float:left; background: url(himagemenu/images/img2.jpg) repeat scroll 0%; width:80px;height: 200px;border-color:white;border-style: solid;border-right-width:2px;border-left-width:0px;border-top-width:0px;border-bottom-width:0px;color:white;" id="img2" onmouseover="enlargeimg(this.id)" onmouseout="actualimg()"><a href='#' style='text-decoration:none;'>Menu2</a></td>
<td align=center style="cursor:pointer;float:left; background: url(himagemenu/images/img3.jpg) repeat scroll 0%; width:80px;height: 200px;border-color:white;border-style: solid;border-right-width:2px;border-left-width:0px;border-top-width:0px;border-bottom-width:0px;color:white;" id="img3" onmouseover="enlargeimg(this.id)" onmouseout="actualimg()"><a href='#' style='text-decoration:none;'>Menu3</a></td>
<td align=center style="cursor:pointer;float:left; background: url(himagemenu/images/img4.jpg) repeat scroll 0%; width:80px;height: 200px;border-color:white;border-style: solid;border-right-width:2px;border-left-width:0px;border-top-width:0px;border-bottom-width:0px;color:white;" id="img4" onmouseover="enlargeimg(this.id)" onmouseout="actualimg()"><a href='#' style='text-decoration:none;'>Menu4</a></td>
<td align=center style="cursor:pointer;float:left; background: url(himagemenu/images/img5.jpg) repeat scroll 0%; width:80px;height: 200px;border-color:white;border-style: solid;border-right-width:2px;border-left-width:0px;border-top-width:0px;border-bottom-width:0px;color:white;" id="img5" onmouseover="enlargeimg(this.id)" onmouseout="actualimg()"><a href='#' style='text-decoration:none;'>Menu5</a></td>
</tr>
<tr><td colspan=4><div align=center style="font-size: 10px; color: #dadada;" id="dumdiv"><a href="https://www.hscripts.com" id="dum" style="text-decoration:none; color: #3d366f;">©hscripts.com</a></div>
</td></tr>
</table>

Release Date - 16-06-2009
Downloads : Version 1.0 - imagemenu.zip
Get free version without ©copyright link for just $10/-
For customization of this script or any script development, mail to support@hscripts.com

Usage

Download the zip file and Unzip slideshow menus script - imagemenu.zip, you will get himagemenu/imagemenu.js, himagemenu/README.txt and images.
Just Copy and paste the code into your file.
Set the image menus navigation time delay, actual/adjust width, endwidth and array size as per your requirement.

 i.e.,  var delay=100;
var actualwidth=80;
var adjustwidth=60; 
var endwidth=320;
var arr=new Array('img1','img2','img3','img4','img5'); 

//Store all image ids to this array.
 
//If you want to add more than 5 images insert image into the table.

// Increase the array size and table width also.