Adding Rollovers to Your Pages in Java
Adding Rollovers to Your Pages Painting PDF417 In Java Using Barcode encoder for Java Control to generate, create PDF417 image in Java applications. If you re new to HTML, a rollover probably sounds like a pet trick In actuality, though, a rollover is perhaps the most common use of DHTML on the Web It s an instruction that brings your Web page to life when a mouse Printing Bar Code In Java Using Barcode drawer for Java Control to generate, create bar code image in Java applications. Part IV: Scripting and (X)HTML
Read Barcode In Java Using Barcode reader for Java Control to read, scan read, scan image in Java applications. pointer hovers over an image or text In the past, it was common to address rollovers with JavaScript/HTML/CSS solutions, but now all you really need is CSS With that observation in mind, it s time to start the fun! Generate PDF417 In C# Using Barcode printer for .NET framework Control to generate, create PDF-417 2d barcode image in VS .NET applications. Text rollovers with CSS
PDF417 Printer In Visual Studio .NET Using Barcode creator for .NET framework Control to generate, create PDF-417 2d barcode image in .NET framework applications. For years, the only option available for creating a rollover was to create button images and then activate them with JavaScript However, now that CSS has gained acceptance in newer browser versions, here s an alternative way to create rollovers without using images at all Text rollovers have advantages and disadvantages when compared with JavaScript image rollovers: Good news: Text is faster and more meaningful to search engines, and it s always easier to add plain text to a page than it is to create two images and add them both to a page, with an image rollover Plus, you don t need to worry about preloading, tracking, and maintaining images Bad news: Although you can control the text font, style, and border for your image using CSS, you currently can t do all the nifty visual tricks that you can do to images using a program like Adobe Photoshop (or some reasonable facsimile thereof) These tricks include visual effects such as anti-aliasing, drop shadows, and animation (You can, however, apply such visual effects using HTML 5 and CSS3, which we discuss in s 19 and 20, respectively) In addition, this method works only in reasonably current browsers If your target viewing audience uses a browser released in this century, that should be fine Figure 16-1 shows a plain-Jane Web page with two rollover text links: Home and About Me Moving the cursor over one of the images, as shown in Figure 16-2, causes the rolled-over version of the text to display white text on a black background, instead of teal-on-white for unvisited links and gray-onwhite for visited links Listing 16-1 displays the HTML and CSS required for this rollover effect PDF417 Generator In VB.NET Using Barcode drawer for .NET Control to generate, create PDF 417 image in Visual Studio .NET applications. Figure 16-1: A page with text rollovers handled with CSS
EAN128 Generation In Java Using Barcode creation for Java Control to generate, create GS1-128 image in Java applications. 16: Fun with Client-Side Scripts
Printing Code 39 Full ASCII In Java Using Barcode generation for Java Control to generate, create Code 39 Extended image in Java applications. Figure 16-2: Moving the cursor over the link text changes the text and background colors
Code 128 Code Set B Maker In Java Using Barcode maker for Java Control to generate, create Code 128 Code Set C image in Java applications. The link text still shows up onscreen regardless of whether you visited the linked page Figure 16-3 shows how the page appears after you visit this site s home page Although that text is grayed out, it s still a link, so rolling over it still produces the same effect shown in Figure 16-2 Draw Data Matrix 2d Barcode In Java Using Barcode encoder for Java Control to generate, create DataMatrix image in Java applications. Listing 16-1: Barcode Creator In Java Using Barcode printer for Java Control to generate, create bar code image in Java applications. A Text Rollover with CSS
USS-93 Maker In Java Using Barcode creation for Java Control to generate, create USD-3 image in Java applications. <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 10 Transitional//EN http://wwww3org/TR/xhtml1/DTD/xhtml1-transitionaldtd > <html xmlns= http://wwww3org/1999/xhtml > <head> <title>CSS Text Rollover</title> <meta http-equiv= Content-Type content= text/html; charset=ISO-8859-1 /> <style type= text/css > h4 {font: 18pt geneva, sans-serif; margin: 0; color: teal; background: white;} a {text-decoration: none;} div#navbar {width: 200px;} div#navbar a {display: block; margin: 0; padding: 03em;} div#navbar a:link {color: #008080; background-color: transparent;} div#navbar a:visited {color: #C0C0C0; background-color: transparent;} div#navbar a:hover {background: black; color: white;} </style> </head> <body> <div id= navbar > <h4><a href= indexhtml >Home</a></h4> <h4><a href= aboutMehtml >About Me</a></h4> </div> </body> </html> Data Matrix 2d Barcode Printer In VB.NET Using Barcode generator for .NET Control to generate, create ECC200 image in VS .NET applications. In this example, we change the text from teal-on-white to white-on-black when the cursor hovers over the link; that way, it s easy for you to see what s going on in the screenshots You may want to use a different approach on your site (or a different color scheme) The link goes gray after being visited UPC Code Generation In VS .NET Using Barcode creator for .NET Control to generate, create Universal Product Code version A image in Visual Studio .NET applications. Part IV: Scripting and (X)HTML
Generating ECC200 In .NET Using Barcode generator for Visual Studio .NET Control to generate, create Data Matrix 2d barcode image in .NET applications. Figure 16-3: After you visit a page, the link text color shows that the page was visited
Making Barcode In Visual Studio .NET Using Barcode generator for .NET Control to generate, create barcode image in Visual Studio .NET applications. Adding this type of navigation to your site couldn t be simpler: 1 Within the <head> tags, add the preceding code (from Listing 16-1) inside and including the <style> and </style> tags 2 Add links inside individual <h4> tags 3 Make sure that the entire menu is inside a <div> tag with an id attribute of navbar If you add the CSS to your site via a link to a site-wide external style sheet (see s 9 and 10 for more information on style sheets), you can add, change, or delete menu-bar links on your site at any time without having to touch a single line of CSS or JavaScript You simply add or modify your <a href> tags Slick, huh Code 128 Printer In Visual Studio .NET Using Barcode generation for Visual Studio .NET Control to generate, create Code 128A image in .NET framework applications. Create EAN 13 In C# Using Barcode printer for VS .NET Control to generate, create EAN / UCC - 13 image in .NET framework applications. EAN-13 Encoder In VB.NET Using Barcode creation for .NET framework Control to generate, create GS1 - 13 image in VS .NET applications. |
|
|
|
| ALL RIGHTS RESERVED. Business Refinery (c) 2006 - 2010. | Terms of Use | Privacy Policy |