
our images. [View full size image] 4. As you can see from Figure 3.40, the dialog allows you to insert an image name, two image states (typically these two images will have the same size and text but differ in color), alternate text, and a hyperlink. The dialog also allows you to check functionality that forces the browser to preload both images before the original is loaded. When you've formatted the properties, click OK. The rollover image appears on the page. Now try viewing your page in the browser by choosing the Preview In Browser option from the Document bar or by pressing F12 (see Figure 3.41). In the browser, move your cursor over the new image. Notice that the original image (button_rollover1.gif) changes color to its rollover state (button_rollover2.gif). Figure 3.41. The original image appears just above the horizontal rule. [View full size image] Working with Hyperlinks One of the basic premises behind working with the web is that we can create pages that link between each other. This concept, known as hyperlinking, is the foundation behind the HyperText Markup Language (HTML). By simply adding some text to the page and then associating a link with that text, we can allow our users to interact with multiple pages within a website as opposed to being confined to a single page. Of course, like other web features, Dreamweaver has excellent support for creating and working with the following types of links: Text links Image links Imagemaps Named anchors Navigation bars Before we jump directly into linking however, it's important to discuss the concept of paths and targets. Creating a hyperlink is merely the process of assigning a path to the hyperlink reference (href) of text, images, hotspots within imagemaps, or anchors. When you assign a path to one of these elements, you are making a link available from your linked element to the endpoint via the path. When it comes to paths, developers have three to work with: Document Relative: Possibly the easiest type of path to work with, document relative paths require little more than the path from the current file to the target file. For instance, if I were working with a file located in the folder Dorknozzle\Departments\Marketing\Press Releases\ and I needed to link to a file called marketing.htm within the Marketing folder, I would simply use ../../marketing.htm as my path. The ../ essentially forces the browser to back out of the current folder. The same holds true if I were working with a file within the same Press Releases folder and I needed to reference an image within the Images folder located within the Press Releases folder. In that case, my path would resemble Images/file.gif. Simple enough right? The downside to working with document relative paths is that you can only back out of two