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

How to:
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></h3>

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></h3>

Heading 1

Demo: http://dyve.net/jquery/?autohelp

Download:http://www.texotela.co.uk/js/plugins/jquery-jqir.js

Source:http://www.texotela.co.uk/code/jquery/jQIR/

Related Listings:

1. Image zoom with Tabs : Jquery Script Love this jquery image zoom script, the effect is a...
2. Lazy Load -jQuery plugin Lazy loader is a jQuery plugin written in JavaScript. It...
3. iPhoto like Image Resize Upon seeing the Fluxiom intro video, I was compelled to...
4. Create a Thumbnail Gallery with Slick Heading and Caption Effect with jQuery This is a simple jQuery tutorial, but can be extremely...
5. Delayed Image Loader Script for Prototype lazierLoad is Bramus! his take at writing a delayed javascript...

Do you like this post?

Email: