![]() View Source: Advanced CSS Rollovers. To make a Web page more visually exciting, Web designers often use images that change appearance when a mouse is moved over it. You can use rollover images to spice up a navigation bar by making graphical buttons highlight when moused over. Or, for a simple visual effect, you could have a black and white photo change to a color image when a visitor mouses over the picture. Traditionally, Web designers have relied on Java. Script programming to make this kind of magic happen. By writing a Java. Script program you can swap one image for another; many Web design programs, such as Dreamweaver, include menu commands to simplify the process of adding the necessary Java. Script. Fortunately, there’s an even easier method of creating rollover images — one that doesn’t require any Java. ![]() Script to work. Cascading Style Sheets, a Web designer’s most powerful design tool, provide a very simple method for creating a rollover image effect. In a nutshell, CSS lets you place an image in the background of any HTML element. In this case, you add a background image (a graphical button, for example) to a link. CSS also lets you style the appearance of a link when the mouse hovers over the link. ![]() ![]() Interactive Rollovers in Adobe ImageReady. ImageReady is an awfully underutilized program for developing. How to create faster CSS rollovers without any image preload. Fast Rollovers Without Preload. This useful feature of CSS means you can change a link’s background image when the mouse rolls over the link (Figure 1). Figure 1. Forget Java. Script — you can create dynamic rollover images using just CSS. Click here to see a live demo. The exact process of creating CSS rollovers is a little more involved than that, so I’ll teach you step- by- step how to create them. In addition, you’ll learn a nifty technique for avoiding one problem often associated with CSS rollovers: the delayed appearance of the rollover image. First, A Little Background. To create a CSS rollover, you need to understand the CSS properties that control the background. CSS lets you control the color of the background, add an image to the background, specify how or whether the background image repeats, and dictate a precise position for the image. To add an image to the background of a CSS rule, use the background- image property. This property requires a path to the particular image you wish to use. Say you’re creating a style for a particular link; you’ve added an ID name to the link so you might have HTML like this: < a href=”homepage. Home< /a>. To add an image to the background of that link, you’d create a CSS rule like this: Note for Dreamweaver users: you can set all of the CSS background properties when you create a style in Dreamweaver. Just select the “Background” category in the “CSS Rule Definition” window. Because background images will tile left to right and top to bottom, you can make the image appear only a single time (a good idea if the background image is a single button with obvious edges): Finally, you can control the placement of the image within the background of the HTML element you’re styling by using the background- position property. So to place the image in the top left corner of the element, you’d write this: The first number of the background position represents where the left edge of the image is placed in relation to the left edge of the element. The second number identifies the position of the top edge of the image in relation to the top edge of the element. Getting Started. Now that you understand the basics of the CSS background properties, it’s time to put this knowledge to work and create a navigation bar with CSS rollovers. ![]() To follow along with these instructions, click on the bolded phrase below to download the folder, then double- click on the folder to uncompress its files. For a refresher on the process of defining a site see last month’s View Source. In a Web browser, open the file start. This Web page contains the navigation bar you will be adding rollover images to. Basically, the nav bar is a bulleted list of links. Rollover Buttons with JavaScript. Tutorial by Matt Doyle. The actual image in the HTML page. You can make as many rollovers as you like in one page. How to Make a JavaScript Image Rollover. Save your HTML document more often during your work. JavaScript is the programming language of HTML and the Web. Programming makes computers do what you want them to do. JavaScript is easy to learn. Rollovers: The BEST Prepaid Plan is a 529 Plan. Customers may rollover funds from another 529 Plan into the BEST Prepaid Plan. Alternatively, customers may rollover. Basic online html image mapper tool. No software to download. Use images from the web or your PC. Load the image, map out your links and get the code! A few basic styles have already been applied to the page and the navbar: For example, the bullets before each list item are gone and underlines below each link have been removed. Before you add any background images, you’ll turn this vertical nav bar into a horizontal nav bar with links placed side by side. Just a few CSS properties are enough to get the job done. In your favorite Web page editing program, open the file styles. Add the following new rule to the file: This style’s name — #navbar li — is called a descendent selector in CSS- speak. That means this style will apply to any list item (the li tag) that’s contained inside another HTML tag that has the ID navbar applied to it. In this case, the bulleted list (the < ul> tag in HTML) has an ID name of navbar, so this style will affect all items inside the bulleted list. The float property makes the bulleted list items line up side- by- side. Next, edit the last style — #navbar a — so that it looks like this: This is another example of a descendent selector. In this case, the style #navbar a applies to any link (the a tag) inside another HTML tag with the ID name navbar — the ID applied to the bulleted list. The display: block property treats each link as its own block of content. Normally, links are treated as elements inside some other block of content — for example, a linked word can sit on the same line as other text inside a paragraph. The main benefit of setting the link’s display property to block is that it lets you control the height and width of each link accurately. Adding a Background Image. The files accompanying this tutorial include graphical buttons for each link. Each button has the text of the link on it, so you need to specify different background images for each link. The best way to do this is to add a little identifying information to each link’s HTML. Open the file start. Web editing program. Locate the following line of HTML: Add id=”home” to the opening < a> tag so that the HTML looks like this: This step provides a unique name for that link, so that you can write a CSS rule that will specifically control the look of that one link. Now you’ll create a CSS rule that adds the background image to the link. Open the file styles. You’ll notice a couple of peculiar things (circled in Figure 2). First, only a small portion of the button is visible; and second, the text “Home” sits on top of the text of the button. Figure 2. To fully display a background image, the styled element must provide a large enough space to display the entire image. In this case, the entire “Home” button isn’t visible because the area of the screen dedicated to the “Home” link isn’t large enough. Background images only fill as much space as is available. In this case, the link (the text “Home”) takes up only a small space on the page. Since the button is larger than that space, it isn’t entirely visible. To fix this, you simply set the link’s width and height to match the width and height of the graphical button. In the styles. css file, edit the #navbar #home style so that it looks like this: In this case, the graphic used is 3. For your own rollovers, you’ll specify a height and width that matches the graphic you create. If you create a navigation bar composed of several buttons you’ll most likely find that each button has a different width depending on each button’s text. Hiding the Link’s Text. At this point, the entire width and height of the button is visible. Unfortunately, the text “Home” is still floating on top of the button. You’ll learn how to hide that text in a moment, but you may be wondering why that text is there in the first place. When using images for navigation, it’s a good idea to also include some straightforward HTML text. This is the purpose of the < img> tag’s alt attribute — it provides a text description of an image so that search engines and screen readers (software that reads Web pages out loud to those with vision impairments) can decipher an image’s purpose. In this case, the HTML text for this link “Home” will come in handy when Web search engines crawl the site — since search engines ignore CSS, the only way they can know the purpose of each link is by scanning the HTML. Likewise, Web surfers using screen readers will still be able to navigate the site. Fortunately, CSS provides an easy way to hide the link text and display just the graphical button. Open the styles. css file and edit the #navbar a style so that it looks like this: The line you just added moves the text of each link 5. In other words, this tricky little maneuver moves the text so far to the left that it’s no longer visible on the screen. The CSS text- indent property controls where the first line of a paragraph of text is positioned. Since the property has no control over the actual position of the link, the button graphic doesn’t move. This is an example of a CSS technique known as “image replacement” and is commonly used to replace a text headline with a graphic that uses more elegant typography. Rollover Magic. Finally, you’ve arrived at the rollover part of this tutorial. CSS lets you control the look of a link based on how a user interacts with the link. There are four states, called pseudo- classes, that you can control: a: linka: visiteda: hovera: active. A: link refers to the look of a plain, unvisited link. A: visited is the look of a link after the user has already been to the linked page; in this way you can make a link change appearance (for example, grey out the link) to indicate that the user has been there. A: active refers to the time when the user presses the mouse button down on the link. The one we’re interested in is a: hover. This pseudo- class lets you define the look of a link as the mouse hovers over it. Say, for example, you wish to make all links on a page turn purple when moused over. You could then add this style to your site’s style sheet: That CSS rule will affect all links on a page. If you want to be more selective and control the look of a single link, you could apply an ID to the HTML for that link, then create a style that refers to that ID.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
December 2016
Categories |