Follow this procedure by example to create complex image roll overs.
(i) Use a graphics package and create a series of two images with one or more mouse roll over hot spots.
In this example the first image in the series below represents three links without mouse over effect.
(ii) Using the horizontal line tool followed by the vertical line tool to create cells around the roll over hot spots.
If you are making a template or want to save the exact same grid for later use you can use the Save Grid option under the File menu to save the grid.
(iii) Now click on the HTML icon or select HTML from the menu and select "Create HTML image table".
(iv) A save dialog will appear. Select a folder and a short filename to use for creating the output files.
Using the filename of "menu" the top five images from left to right will be called menu1-1.jpg, menu1-2.jpg, menu1-3.jpg, menu1-4.jpg and menu1-5.jpg.
(v) Now load the next image that displays what the links will look like when the mouse hovers over the link.
(vi) Use the "Create HTML image table" again to splice the image up exactly as the first image was spliced up.
This time we're only interested in the images that represent the mouse over cells. Using the filename of "menuro"
That would be menuro2-2.jpg, menuro2-3.jpg, menuro2-4.jpg.
(vii) Delete all the other files that were generated.
(viii) edit the menu.html file and un-comment out the script required for roll over by deleting the comment line above and below the script.
(ix) modify the three roll over img tags in the three roll over cells to include an "id" parameter, an onmouseover script command and an onmouseout script command.
The first roll over cell becomes the following with additions highlighted in bold
<TD><IMG src="menu2-2.jpg" border=0 height=36 width=199 id="menu2-2"
onmouseover = "SetImgSrc('menu2-2','menuro2-2.jpg')"
onmouseout = "SetImgSrc('menu2-2','menu2-2.jpg')"></TD>
The id parameter is simply a unique identifier for each image tag you modify. The id is used in the SetImgSrc call so don't forget to change the id and the roll over mouse over file names.
Using the broken vertical line tool instead of the normal vertical line tool you can reduce the number of images in this roll over table. Simply click on each unnecessary vertical line above and below the roll over cells and press the delete key to delete the lines.
