Image<replacement>

Create Semantic Markup Using Graphical Headers

Image replacement is the latest trick sweeping through CSS-based Web design. There are a number of different methods in use, but they all basically do the same thing: create a header tag like <h1>, <h2>, <h3>, etc., and then use CSS to hide the real tag and replace it with a background image of the tag text.

<H> tags add meaning to your page, because they indicate the relative importance of the various content items (<h1> is the most important, and <h6> is the least). By using these tags carefully, you indicate to readers (and screen-readers and search engines) where the “good stuff” is on your page.

fadehz1

INSTRUCTIONS

Apply the Image Replacement Action to a graphic box, whether it stands alone or is inline within a flow of text. Make sure to apply ALT text to the graphic, as this will become the text of your <h> tag. Select the heading level you wish to use. That’s it!

screenshot

When you publish the page, the ALT text of the graphic will be written out as an <h> tag, like this:

<h3>This is a header</h3>

A new stylesheet entry will be added for each heading you place on the page. The CSS code is written to give predictable results in any 5.0 or greater browser, and falls back to showing the heading as text in older browsers or when you print the page.

download1DOWNLOAD

Beta version 0.1b7
(text format, 8k) 8 Mar 05

fadehz

EXAMPLE

The HTML box below contains a number of <h3> level headers, shown as graphic text.
 

This is a graphic <h3> header.

This is some paragraph text following the header, just to round out the look of the text box and make it more interesting to look at.

This is a graphic <h3> header.

This is some paragraph text following the header, just to round out the look of the text box and make it more interesting to look at.

This is a graphic <h3> header.

This is some paragraph text following the header, just to round out the look of the text box and make it more interesting to look at.

 

Which creates the HTML code below:

 

item14

 

fadehz2a

Send feedback about this Action.