jQuery phImage Plugin Examples

Example #1:

Single field with default options.

HTML:


<input type="text" name="name" class="tb-name" placeholder="Name" data-ph-image="images/person.png">

JavaScript:


$(document).ready(function() {
	$('input.tb-name').phImage();
});

Result:

Note: The background-position CSS property has been set within the CSS for this field.

Example #2:

Multiple fields with default options, images include text.

HTML:


<div class="fields">
	<input type="text" name="name" class="tb-name" placeholder="Name" data-ph-image="images/person-text.png">
	<input type="email" name="email" class="tb-email" placeholder="Email" data-ph-image="images/mail-text.png">
	<input type="text" name="phone" class="tb-phone" placeholder="Phone" data-ph-image="images/phone-text.png">
	<textarea name="msg" class="ta-msg" placeholder="Message" data-ph-image="images/pencil-text.png"></textarea>
</div>

JavaScript:


$('.fields input, .fields textarea').phImage();

Result:

Note: The background-position CSS property has been set within the CSS for these fields.

Example #3:

Multiple fields whilst keeping placeholder text and passing options in, images don't contain the text. Note that this functionality can be accomplished with plain CSS as well.

HTML:


<div class="fields">
	<input type="text" name="name" class="tb-name" placeholder="Name" data-ph-image="images/person.png">
	<input type="email" name="email" class="tb-email" placeholder="Email" data-ph-image="images/mail.png">
	<input type="text" name="phone" class="tb-phone" placeholder="Phone" data-ph-image="images/phone.png">
	<textarea name="msg" class="ta-msg" placeholder="Message" data-ph-image="images/pencil.png"></textarea>
</div>

JavaScript:


$('.fields input, .fields textarea').phImage({
	remove_current: false,
	padding: '0 0 0 40px'
});

Result:

Note: The background-position CSS property has been set within the CSS for these fields.

Icons made by SimpleIcon from www.flaticon.com and are licensed under CC BY 3.0.