Now that we've seen how we can generate images, we should look at using external images as well. It's going to happen quite often in the real world that a designer is going to already have icons or images designed for our menu that can't possibly be replicated dynamically with GIFBUILDER. In our case, we'll imagine that our boss wants to use some special graphics for each main menu item. We want the editors to be able to update these images in the future without breaking our template or bother us, and it's probably a good idea to make sure that we fall back to a GIFBUILDER image if somebody forgets to assign an image to a menu item in the page properties.

The first thing we can do is adding an alternate image property to our menu items with the altImgResource property. The altImgResource property takes some of the same file parameters as the beforeImg functions we saw earlier:

altImgResource.import = uploads/media/
altImgResource.import.field = media
altImgResource.import.listNum = 0

Using these parameters, our menu can import images associated with our pages through the resources tab in page setup. By assigning the listNum to 0, we will pull the first image from the list. We can also assign higher numbers in the list to use different images for rollover and active states as well. It's easier to understand if we see this in action, so we can add the altImgResource code highlighted below to our main menu code. Like earlier, we have comments added for information on each function:

## Main Menu [Begin]
lib.mainMenu = HMENU
lib.mainMenu.entryLevel = 0
lib.mainMenu.wrap = <ul id="menu-area">|</ul>
lib.mainMenu.1 = GMENU
lib.mainMenu.1.useLargestItemY = 1
lib.mainMenu.1 {
NO {
allWrap = <li class="menu-item">|</li>
ATagParams = class="menu-link"
## Add an image resource to load up if available
altImgResource.import = uploads/media/
## Use the media field of the page setup for images
altImgResource.import.field = media
## Import the first image listed in the page setup
altImgResource.import.listNum = 0
## If no images in the page properties, create
## GIFBUILDER image
backColor = #ffffff
XY = [10.w],[10.h]+5
10 = TEXT
10 {
text.field = title
fontFile = fileadmin/templates/deftone.ttf
fontSize = 36
fontColor = #000000
align = left
offset = 0,50
angle = 3
}
}
RO < .NO
RO = 1
RO {
## For rollover, import the second image listed in
## the page properties
altImgResource.import.listNum = 1
10.fontColor = #990000
10.shadow.offset = 1,1
}
ACT < .NO
ACT = 1
ACT {
## For now, the active state will use the same
## altImgResource as the normal state
10.fontColor = #999999
10.shadow.offset = 1,1
}
}
## Main Menu [End]

The new menus will use the resources from the page setup to show items. After we've updated the menu, we'll notice that nothing may have changed initially because we haven't added files to the page resources. This is okay, because it just means that the menu is falling back to GIFBUILDER correctly. To show our images, we can add files to the resources tab of the page properties. Remember, we can access the page properties by right-clicking on our page in the page tree and selecting Edit:

According to our code, the menu should try to load the first image for a normal state, and it will display the second file in the list for when the mouse rolls over it. If we add these resources to our Products page, we will see an image replace the text for that menu item:

On rollover, the Products menu item will show the second image in the list:

As you can see, the altImgResource can be a very helpful and powerful way to use more complex images designed in Photoshop or Illustrator inside our own templates. It even keeps the HTML tags that we wrapped around our menu items and the link tag parameters. If we use altImgResource and an image returns from the page properties, than it will simply override any GIFBUILDER configuration. This is why we can use GIFBUILDER as a seamless backup menu procedure for when an image is not set in the page properties. So, if it's overriding the GIFBUILDER configuration, why is it considered an alternate image resource? I don't know, but according to the TSref "this is how it irreversibly is and has been for a long time."