Ian's question:

Prof. Pensyl - I wanted to make my main menu graphic out of 4 rollover graphics so that when touched they would display the menu information for whatever section it represented. So I made one large graphic, cut it into perfect 4's, and then made 2 "states" for each section. And the top row lined up fine, the bottom row lined up fine, but there was a space of about a line's worth of space between the 2 ROWS. Also - when the page was resized, the images would stack up like I drew in the .JPG. Is there any way around this? I'm thinking probably not. So if not, is there any way I can make the hot spots I have NOW into rollovers? SO that sections of the image can display a rollover image when touched? I like the idea of using an animated .GIF as the mouseover image...this way I can have a sort of "animated" main menu to jazz up the site a bit.

Thx! -Ian

Ok! here is the answer!

these two menu button items are placed in the HTML with the default settings Dreamweaver defaults to put a "space"
between the image horizontally. * read page 115 inthe Visual QuickStart Guide - Towers regarding this.

This is the Properties panel. in the red circle is the vertical and horizontal spacing.

you can force Dreamweaver to push the images together horizontally by changing the horizontal spacing value.
you can also do this by dragging th image in and pushing over to the image placed before, when you first insert.
the hit the "space" & "ENTER" keys simutaneously to put in a "<br>" tag for the vertical.

however you will notice that the images still have a vertical space, leaving a gap between the images when using
a <br> tag. This is vertical gap is due to the way HTML drops image elements and text in. the html code does not
have a way to organize elements to resolve this design problem.

also, if you resize the page, the images no longer line up and they stack up one on top another, thus breaking the
structure of the menu image.

Unfortunately, Towers does not give a solution to this problem. but, of course there is a solution.

I noticed that vertical spacing is not consistent. sometimes it displays with and vertical space in the
<br>tag and at other times the images push together vertically. i faked the space above using the
spacer.gif file.

the solution is to use a table. by creating a table with two or four cells you can set the alignment of the cells to be
bottom left, bottom right, top right, and top left for each cell. then what ever is in the cell will line up to create the
menu items that Ian is attempting to create. also it is a good idea to change the cell padding and cell spacing to
zero. this ensures that the table does not give any additional space around the images.

* do not confuse cell alignment with the table alignment! cell alignment applies to the stuff inside and cell and
table alignment with the entire table.

as for the second part of the question, ian is asking how to take this image apart and use different pieces as menu
items. If you use square sections of the images as the menu items then your image can be organized into using a
table and cells with portions of the menu having rollovers. but these must be in square or rectangular sections



you can do this by creating a table with different size cells to organize the elements to stack up to make the
entire image. this will require some planning and organizarion by using photoshop. you can carve the image up into
rectangular sections that will allow the reconstruction of the image in Dreamweaver. see the table below.

This is actually a common technique!! i have seen this method used in many places in the web.

but, if you want to create the menu items with the rollover sections being round or in some other shape than rectangular,
then this will be very difficult or even impossible. i will need to study the use on round images to see if there is away to
do this in HTML.



if you want the menu buttom items to be round as in the image above, it is best to consider using Flash or fireworks to
create these!


Nest week we will discuss the use of image maps! you can create different areas of image to be a button using the image
map. this deficeand area withinthe image to be live!