Yes, “YAIRM” (“Yet Another Image Replacement Method”) is a crappy acronym. Anyhow….

There have been several image replacement suggestions made over the past 5 years. Semantically, some just don’t make sense. Of course, the accessibility of your image replacement method and the semantic “correctness” has to do with how you code your HTML.

Pros

• This method works for both in-line and block style elements.
• Accessible to screen readers and non-image/non-screen media.
• Does not add extra elements only for styling (no extra span).
• Works cross browser

Cons

• Using images for text does not allow for text resizing (like all IR methods).
• Does not handle “images off/CSS on” scenario; but neither do most layouts with background images, such as the sidebar on this blog.

When I need to replace a header or some other text with an image, I simply give the element my image replacement class (<h1 class="imgreplacement">), and declare the background image, height and width I want to use either by providing an ID and defining the background image in the #id selector, or by targeting the element through specific/unique cascade. I place all of my image replacement css in a media=”screen”. Even though the media attribute is not heeded by all browsers, it is heeded by devices that are not screens. If your user than prints your webpage, the text that was replaced by an image in the browser will print as it semantically should.
button.imgreplacement { display:-moz-inline-box; display:inline-block; background:transparent none 0 0 no-repeat; text-indent:-3000px; font:0/0 Arial; overflow:hidden; color:rgba(255,255,255,0); vertical-align:bottom; background-image:url(http://www.evotech.net/articles/images/redx.gif); width: 18px; height: 18px; border:none; cursor: pointer, hand; }

The CSS for the Image Replacement class:

.imgreplacement {
  display:-moz-inline-box;
  display:inline-block;
  background:transparent none 0 0 no-repeat;
  text-indent:-3000px;
  font:0/0 Arial;
  overflow:hidden;
  color:rgba(255,255,255,0);
  vertical-align:bottom;
}

XHTML markup and CSS Overrides:

With my image replacement class, the image replacement method is reusable.

<h1 class="imgreplacment" title="Tool Tip Text here">Semantic Text</h1>
<a href="link.html" class="imgreplacement">Text that makes sense for this link</a>
<button class="imgreplacement" title="Close">Close Module</button>

h1.imgreplacement {
  background-image: url(path/headerimage.jpg);
  height: 60px;
  width: 540px;
	 background-position: 20px 10px;
}

a.imgreplacement {
  background-image: url(path/linkimage.jpg);
  width: 120px;
  height: 60px;
}

button {
  background-image:url(images/redx.gif);
  width: 18px;
  height: 18px;
  border: none; // overwrite default border
  cursor: pointer;
}

This is the button: Close Module. Note that is has layout, but it’s inline, and it has a tool-tip

Explanation of the Image Replacement Class:

The imgreplacement class does the following:

• display:-moz-inline-box;
  and display:inline-block; displays the element as an inline block. inline-block is not part of the CSS specifications, but it is supported by IE and all other grade-A browsers other than Firefox. This enables the image replacement to work on inline elements by enabling them to have width and height. The first line, -moz-inline-box, is for mozilla based browsers that don’t render inline-block. The second line is for IE, Safari 3 and Opera, though IE does not render inline-block truly inline.
• background: transparent none 0 0 no-repeat; sets a default to non-repeated background image placed at the top-left of the element block, but does not declare a background image, enabling you to overwrite the none with an image via a second, more precise, CSS declaration
• text-indent:-3000px; Text indent only applies to block elements. text-indent, when implemented, moves the start of the first line of text to the left or right depending on whether the property is assigned a negative or positive value. The text-indent is applied to inline-block elements, but not to -moz-inline-box. Note that IE does not render text-indent correctly, so generally I override the text-indent property for IE, but in this case the disappearing text quirk is to our benefit.
• font:0/0 Arial; Makes the font tiny or invisible for browsers. There are a few quirks: Opera doesn’t render this shorthand, and renders font-size: 0; at about 7px; IE6 and IE7 both render the font at about 1px and Safari doesn’t render font at size 0, but does intermittently underline the non-visible character at about 1px width per character.
• overflow:hidden hides anything that might be wider than the space provided. IE6 has the bad habit of deciding to grow elements to fit the content even if the size of the element is defined.
• color:rgba(255,255,255,0); Makes the font color transparent (opacity of 0) for those browsers that understand opacity via RGBA, which is a feature of CSS3 (Safari 3 and pre-alpha version of Firefox 3, but not IE6, IE7 or Firefox 2 for Windows).
• vertical-align:bottom; is required for the inline elements – it places them at the same level vertically with respect to the text around it across all grade-A browsers.

Additional tidbits

• You have to define the width, height and background image of your element.
• If needed, you can set the background position of the replacement image. It causes fewer cross browser issues to place the background image rather than setting margins due to differences in browsers interpretations of the box-model.
• Remember to use sematic markup. If the image is an area header, use h1-h6. If it’s a link going somewhere, use <a>. If it isn’t linking anywhere, it’s not a link!
• You can enhance the image replacement with a title. The title will display in some browsers as a tool tip. This may enhance the accessibility for those who use tooltips regularly.
• You can declare a different background image using the :hover pseudoclass, so when the user hovers over the element with the mouse pointer, the image changes.

While I just showed you a method of doing image replacement, I must caution against it. Using images for text is not optimum for accessibility. This method enables assistive devices to read your text with the semantic meaning defined by the encompassing element(s). This method enables users of alternative devices, such as cell phones, and text-only browsers to read your content. It also meets web standards in terms of separating content from presentation. However, when you use images to render text, your visitor is unable to control the font-size; which makes your site less than accessible. If you are required to use images instead of text to render content, and you can’t convince your client (boss, designer or contractee, or even yourself) of the stupidity (there, i said it) of using images for text, then this is the best method of making your inaccessible page accessible to the most people. Just try to make the text in your image large enough to be read by a user.(Via evotech.net)

The drag-and-drop operation has three main stages: initiation, dragging, and dropping:

Initiation A user initiates a drag-and-drop operation by using the mouse to select a Flex component, or an item in a Flex component, and then moving the component or item while holding down the mouse button. For example, a user selects an item in a List control with the mouse and, while holding down the mouse button, moves the mouse several pixels. The selected component, the List control in this example, is the drag initiator.

Dragging While still holding down the mouse button, the user moves the mouse around the Flex application. Flex displays an image during the drag, called the drag proxy. A drag source object (an object of type DragSource) contains the data being dragged.

Dropping When the user moves the drag proxy over another Flex component, that component becomes a possible drop target. The drop target inspects the drag source object to determine whether the data is in a format that the target accepts and, if so, allows the user drop the data onto it. If the drop target determines that the data is not in an acceptable format, the drop target disallows the drop.

A drag-and-drop operation either copies or moves data from the drag initiator to the drop target. Upon a successful drop, Flex adds the data to the drop target and, optionally, deletes it from the drag initiator in the case of a move.

The following figure shows one List control functioning as the drag initiator and a second List control functioning as the drop target. In this example, you use drag and drop to move the ’Television’ list item from the drag initiator to the drop target:

A single Flex component can function as both the drag initiator and the drop target. This lets you move the data within the component. The following example shows a List control functioning as both the drag initiator and the drop target:

After a while of this you might find yourself coding up toggle functions, which find elements and toggle their visibility. togglePair, toggleVisibilityById, there are lots of these types of functions in javascript apps today.

I’ve been trying out a different way of dealing with the need to change the UI based on user inputs or asynchronous data events: CSS.

With CSS, you can use the DOM as a data model and then use declarative rules to establish the display. It’s cleaner, because you limit your javascript code to changing the DOM’s data instead of it’s UI, and then you use the extensive abilities of CSS to handle the visual representation of that data.

Here’s an example. A common thing to do with javascript seems to be expanding out a form to fill out. Livejournal does this with their login form, or 37Signal’s tadalist uses this when you want to add an item to your todo list.

here’s the just javascript way to do this:

<div>
  <span onClick='document.getElementById("form1").style.display="block";'>click me to add a comment</span>
</div>
 ...
<form id='form1'>
<textarea>add your comment</textarea>
</form>

But here’s the CSS + Javascript way to do it.
CSS Rules

form#addComment {

display:none;

}

form#addComment.editing {
  display:block;
}

Javascript + HTML

<div>
  <span onClick='document.getElementById("addComment").setAttribute("class","editing");'>click me to show form</span>
</div>
 ...
<form id='addComment'>
<textarea>fill in some data here</textarea>
</form>

This can prove really advantageous when you are radically changing the visual presentation of the page. Instead of finding and changing the style of tons of elements by id, you can change 1 element’s class and then use the inheritance of CSS to style all the sub-elements.