Creating a Rollover with CSS

From Documentation
Jump to: navigation, search

Creating a Rollover with CSS

Technical Information

Using the CSS method for rollover effects requires an image sprite that contains all of your rollover states. The CSS will be used to transition through them. In our tutorial we will be creating a simple two state rollover for a sign up button. Although this tutorial is written using CSS, NetObjects Fusion does have it's own tools for creating a rollover. See Creating a Button Rollover and Adding Pictures that Roll Over.

Image Sprites

The image sprite is an image that combines the different states you will be adding to your rollover effect. Here is the image we will be using (right click to download).

Rollover-sample.jpg

The two buttons in this image are 150px in width, so the combined total width is 300px.

We'll be adding this image to the assets so Fusion can manage it.

  1. Open your site and click to the Asset view.
  2. Click the New file button.

The file dialog window opens.

  1. The Name will be filled in automatically by NetObjects Fusion, let's skip down to the Location field.
  2. Click the Browse... button.

The Windows explorer dialog appears.

  1. Use explorer to browse for the image.
  2. Click Open once you have located the image.

Note: The name has been populated by NetObjects Fusion.

Important: Check the option to Always publish file. This let's Fusion know that even though the image is not placed by it's own tools, we need to publish it along with the rest of the managed assets.

  1. Click OK.

CSS

Now that we have our image sprite in Fusion, let's look at the CSS we'll be using. For more information on CSS syntax, see Explaining CSS Syntax.

a.rollover {
        display: block;
        width: 150px;
        height: 75px;
        text-decoration: none;
        background: url("./rollover-sample.jpg");
        }

a.rollover:hover {
        background-position: -150px 0;
        }

.displace {
        position: absolute;
        left: -5000px;
        }

a.rollover details the display, width, height, decoration and the image location.

  • display: block - A block-level element takes up the entire space of its parent element or container, thus creating a "block."
  • width: 150px - The width of the image that will initially be displayed.
  • height: 75px - The height of the image that will initially be displayed.
  • text-decoration: none - We don't want any decorations (underline, etc) so we've set this to "none".
  • background: url("./rollover-sample.jpg") - This is the location of the image we want to display.

a.rollover:hover details the position of the image on hover (hover is when the mouse is "hovering" over the image).

.displace is used for users with accessibility needs such as those using screen readers. It's best practice to move the object offscreen, this way a screen reader can still pick up the text and read it to the user.

  1. Copy the code above and navigate to the Style view in NetObjects Fusion.
  2. Ensure that the read only option is unchecked in the Style properties palette.
  3. Click to the CSS Code tab. See Working in the CSS Code view.
  4. Paste the code here.
  5. Click back to the Graphic tab, you will be prompted to save your work, do so.

HTML

Now we need to add a small snippet of HTML for this all to work. Let's break this down below:

<a href="#" class="rollover" title="My Rollover"><span class="displace">My Rollover</span></a>

This snippet is a link, with the rollover class applied. The rollover class is what we pasted in the CSS portion above. There is also a class for displace, so the screen reader can still pick up the text even when images aren't being displayed. Replace the # with a link.

  1. Create a text box and make sure it's at least 150px wide (wide enough to fit our 150px image).
  2. Click Ctrl+T to open the HTML insertion point box.
  3. Click OK.
  4. Publish your website and view the rollover.