Dezinerfolio

PHP + Javascript Image Replacement

Your rating: None Average: 4.3 (40 votes)

Some of you would have already used this but we thought to review this for those who haven't put their hands on it. This method is basically to get smooth font over your headings/titles. The package comes with a PHP and a Javascript file which replaces all the specified tags with images (dynamic). This can be applied to IDs/Classes/Tags on your site.

A few options over this:

  • Line Breaks (enable/disable)
  • Custom Fonts
  • Font Size / Color
  • Transparency
  • Image flickering (enable/disable)
  • more...

Customization

ifr.js

replaceSelector(" h2 "," ifr.php ",false); var testURL = " test.png " ;

  • h2 - Tag to be replaced with the image
  • ifr.php - the URL of the PHP file which generates the images.
  • false - Enable/Disable line breaks (splits each word into an image so it floats below and goes on)
  • test.png - the test image which loads to check if images are enabled on the browser (if not... the php will not generate the images)

.

ifr.php

$font_file = 'futura.ttf' ; $font_size = 30 ; $font_color = '#000000' ; $background_color = '#ffffff' ; $transparent_background = true ; $cache_images = true ; $cache_folder = 'cache' ; The above is very much self explanatory...

.

Here is a working demo for download: [download#26#image] All the files from the download has to be placed in the PHP server (localhost of your system). After you make the above changes you will look at index.php from your localhost for your new image replaced titles...

The final output:

This is a smooth font title generated over this method.

Another popular method would be sIFR where the titles are replaced with an SWF object.

<!-- WP Theme Credits -->

Find more about movie downloads.

Trackback URL for this post:

http://www.dezinerfolio.com/trackback/150

Comments

Anonymous's picture

I can not find download for script. Can you place download link for this script?

chicago escort (not verified)
Sat, 12/10/2011 - 06:10
Anonymous's picture

I'm working on a project that requires image replacement. I am currently working in DreamWeaver and whenever I upload the images to my file server, my system crashes. I am eventually able to get it to work but I lose most of the data and information that I have entered and have to recreate it. Should I be using FIR instead or should I just put disaster recovery software on my pc and hope for the best?

Billy (not verified)
Sat, 03/19/2011 - 19:36
Anonymous's picture

I'm working on a project that requires image replacement. Ios On Android Phone I am currently working in DreamWeaver and whenever I upload the images to my file server, my system crashes.

Rick (not verified)
Tue, 01/17/2012 - 18:56
Anonymous's picture

In my opinion it would be wise to continue to use Dreamweaver & FIR when uploading via FTP. If your system is crashing it could be due to a virus or spy-ware that is negatively affecting the upload process. I would suggest calling a local repair company such as, san diego computer repair, or one in your city. It sounds like a simple fix.

Nate Mygart (not verified)
Wed, 03/30/2011 - 03:10
Anonymous's picture

Image replacement is arguably one of the most important CSS-based techniques available to a web designer. While some people view image replacement as merely a way to use fonts absent from the client computer, I believe that’s simply untrue. Image replacement has a place on nearly every web site—it can be useful in displaying a variety of page elements: company logos, attractive navigation bars, and fancy paragraph headings.
Tom - Writes about mature dating

alexander945 (not verified)
Tue, 11/02/2010 - 15:34
Anonymous's picture

For letters like y, the bottom of the image is cut out. Any way to fix this?

Michael Carronton (not verified)
Sun, 01/24/2010 - 19:14
Anonymous's picture

Facelift Image Replacement (or FLIR, pronounced fleer) is an image replacement script that dynamically generates image representations of text on your web page in fonts that otherwise might not be visible to your visitors. It is similar to sIFR which accomplishes this by using a combination of javascript, CSS, and Flash. FLIR generated image will be automatically inserted into your web page via Javascript and visible to all modern browsers. Any element with text can be replaced: from headers (

,

, etc.) to elements and everything in between.

ZK@Web Marketing Blog (not verified)
Tue, 06/09/2009 - 09:59
Anonymous's picture

man this website looks awesome... i mean the looks...
Content is cool too.

rolf (not verified)
Sat, 01/17/2009 - 05:34
Anonymous's picture

im bookmarkingyours :D

laina (not verified)
Tue, 01/13/2009 - 08:54
Anonymous's picture

This website is useful for individuals who are searching prayers and novenas and all.o

Vince (not verified)
Sat, 12/13/2008 - 01:40

Post new comment

The content of this field is kept private and will not be shown publicly.