Skip to Menu
jQuery » jQIR (jQuery Image Replacement)

Replace headings (or any text) with images.

Parameters

  • format - Image format/file extension (e.g. png, gif, jpg) - ignored if specifying the filename in the class
  • path (optional) - Path to images folder
  • onload (optional) - Function to run when image has loaded

Download source code | Changelog (latest update: 17 Apr 2007)

Example

For example, imagine the following structure:

<h1 id="heading1" class="jqir">Heading 1</h1>
<h2 class="jqir {src:heading2.png}">Heading 2</h2>
<h3 id="heading3" class="jqir"><a href="http://jquery.com">Heading 3</a></h2>

Then in your javascript (extension is ignored if file name is defined in class):

$(".jqir").jQIR("png", "images/");

Would result in:

<h1 id="heading1" class="jqir"><img alt="Heading 1" src="images/heading1.png"></h1>
<h2 class="jqir {src:heading2.png}"><img alt="Heading 2" src="images/heading2.png"></h2>
<h3 id="heading3" class="jqir"><a href="http://jquery.com"><img alt="Heading 3" src="images/heading3.png"></a></h2>

Heading 1

Heading 2

Heading 3

Changelog

  • 17 Apr 2007: Hyperlinks are preserved. Now takes a third parameter (a function to run when the image has loaded)
  • 30 Jan 2007: Can specify the file in the class attribute.
  • 10 Jan 2007: Now works with jQuery 1.1.
  • 20 Oct 2006: The second paramater is now optional. e.g. $(".jqir").jQIR("gif");