Javascript Image Menu - Horizontal Navigation, Rollover / Scrolling Images Menus, Onmouseover Slideshow Script

About

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

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

Downloads

Version 1.0 - imagemenu.zip
Release Date - 16-06-2009

Related Scripts

Javascript Slideshow - Javascript Slideshow
Image change onmouseOver - Image change onmouseOver

Preview

Menu1	Menu2	Menu3	Menu4	Menu5
© hscripts.com

Code

<!-- Script by hscripts.com -->
<!-- Copyright of HIOXINDIA -->
<!-- More scripts @www.hscripts.com -->
<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="http://www.hscripts.com" id="dum" style="text-decoration:none; color: #3d366f;">&copy;hscripts.com</a>
  </div>
</td></tr>
</table>
<!-- Script by hscripts.com -->

Get free version without ©copyright link for just 5

For customization of this script or any script development, contact us at support@hscripts.com

Usage

a) Download the zip file and Unzip slideshow menus script - imagemenu.zip, you will get himagemenu/imagemenu.js, himagemenu/README.txt and images.
b) Just Copy and paste the code into your file.
c) 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.
d) Set your links instead of '#' symbol in href tag.
e) Simple and easy to use Javascript Scrolling / Onmouseover Horizontal navigation Image Menu Script.

License

- The javascript (misspelled as java script) is given under GPL License
- i.e. Free use for those who use the codes as it is.
- Free, if your modification does not remove our copyright information and links.
- Click Here for detailed license information.
- You can purchase the script if your requirements does not meet our GPL License terms.

Javascript Image Menu - Rollover Menus