This is an imagemap menu.
Example:
temp.topmenu = HMENU
temp.topmenu.1.target = _top
temp.topmenu.maxItems = 6
temp.topmenu.entryLevel = 0
temp.topmenu.1 = IMGMENU
temp.topmenu.1.imgMapExtras = <AREA SHAPE="rect" alt="Frontpage" COORDS="5,5,69,70" href="http://www.typo3.com" target="_top">
temp.topmenu.1 {wrap = |<BR>
main.XY = [10.w] , [10.h]
main.10 = IMAGE
main.10.file = fileadmin/tsbyex/imglogo.gif
main.reduceColors = 16
dWorkArea = 77,68
NO.distrib = textX+10, 0
NO.10 = TEXT
NO.10 {text.field = title
fontSize = 11
fontColor = black
niceText = 1
offset = 0,0
imgMap.explode = 3,2
}
NO.20 = || BOX
NO.20 {dimensions = -5,-9,1,11
color = white
}
}
page.10 < temp.topmenu
Result:
Comments:
main.
This sets up the basic image of the imagemap. .reduceColors is a general GIFBUILDER-property which you should use widely in order to keep your filesizes down. The less colors the less filesize
dWorkArea = 77,68
This defines the offset of the menu-items from upper left corner
NO.
In general main. describes the imagemap background and NO. describes each item on the image map.
NO.distrib = textX+10,0
This defines that every item should be offset from each other with the width of the previous item plus another 10 pixels
imgMap.explode
Defines how much the iamgemap polygon around every item is "expanded" in order to cover an area a little larger (or smaller with neg. numbers) than the textlabels themselves.
temp.topmenu.1.imgMapExtras = <AREA SHAPE="rect" alt="Frontpage" COORDS="5,5,69,70" href="http://www.typo3.com" target="_top">
This adds an area-definitions to the imagemap. The area covered in this case is the square to the left on the background image. This area links to http://www.typo3.com.
NO.20 = || BOX
The "operator" "||" (double-vertical line) is a part of a very complex concept called "optionSplit". The concept is more confusing than a missing file on a Windows-installation so be careful if you start playing with it. Personally I always refer to the examples in the TSref. See the discussion below.
Challenge (IMGMENU/1)
Can you rearrange the elements so they appear almost like this:
