Using Images as Hyperlink Backgrounds

Using images as hyperlinks has long been a staple of Web design; the individual images serve as buttons, and combined within a page area, they serve as navigation bars. A designer might use JavaScript to make the images display a roll-over effect. Expression Web’s Interactive Buttons feature makes it easy to create buttons like this by using images and JavaScript.

In this exercise, you will create an alternative to these buttons with nothing more than a regular text-based hyperlink, two images, and a little CSS, with no JavaScript at all.

Note

USE the CH5 sample site you modified in the previous exercise.

OPEN the CH5 site if it isn’t already open, and display the Backgrounds page in Split view.

  1. In the Code pane, click just under the style block describing the .left style.

  2. Paste or type the following code into your page.

    .left a {
   width: 100px;
   height: 30px;
   display: block;
   background-image: url('images/BGlink.jpg'),
   background-repeat: no-repeat;
   text-align: center;
   text-decoration: none;
   color: white;
   font-weight: bolder;
   font-size: 15px;
   padding-top: 5px;
   margin-left: 11px;
}

    Note

    Any code you need to enter in this lesson is available in a .css file that you imported into your site’s images folder earlier in this chapter.

    Note

  3. Save your page and preview it in a browser.

    Note

    Notice that you’ve got a pretty nice arrangement that looks like a button. The only thing you don’t have is the image swap feature common to graphic buttons.

  4. Switch to Expression Web. In Code view, or in the Code pane of Split view, type the following code just below the block you entered in the previous step:

    .left a:hover {
   background-image: url('images/BGlinkOver.jpg'),
}

  5. Save your page and preview it in a browser. Point to the links and notice the image swap effect they now have.

    This is a very flexible technique, and, when compared to a JavaScript-based image button, is much better from the perspective of accessibility and ease of maintenance.

    Note

  6. To wrap up this exercise and see how these style changes appear in Expression Web’s style builder, right-click .left a in the Manage Styles task pane, and then click Modify Style to show the Modify Style dialog box.

    Note

On the left of the dialog box, in the Category list heading, every category that has a modification made to it will be in bold. You can click each of these modified category entries to see how these changes you entered directly into the page code are represented within the dialog box.

Note

CLOSE the CH5 sample site and any open Internet Explorer windows. If you are not continuing directly to the next chapter, exit Expression Web.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.17.174.239