Stewart Rosenberger文本替换方法
这种方法使用JavaScript将页面标题替换成图像。图像是实时地由PHP脚本产生的,所以无需事先创建图像。其他方面非常类似于sIFR。
这种方法的两个先决条件如下:
(1)PHP服务器必须安装有GD2库。它是PHP的图像处理库,可以登录网站http://www.php.net/images/学到更多关于它的知识。
(2)需要具有想要使用的字体,因为需要将它复制到网站文件夹中。
假设这两个条件都具备了,就可以继续并且修改在之前的章节中创建的popup.php脚本,并且当页面装裁时用图形修饰文本来替换标题。
用图像来替换文字
(1)首先启动GD2PHP库,PHP需要调用它产生图片。如果机器的设置前面所述,那么GD2已安装好了,但是可能还不能使用。打开php.ini配置文件编辑。在典型的XAMPP配置下,这个文件位于\xampp\apache\bin文件夹。在其他情况下,它在windows文件夹下。
(2)打开php.ini文件,删除前面的分号。如果没有分号,说明GD2已经在机器上运行了。
extension=php_gd2.dll
(3)重启apache服务器以使得新的配置生效。
(4)将想要使用的文字文件复制到dynatext文件夹中。在windows机器上,可以在隐藏的\windows\Fonts 文件夹下找到字体文件,或通过控制面板的[字体]来找到字体文件夹。对此次的练习,只需要复制trebuc.ttf文件到dynatext文件夹。
(5)下载http://www.alistapart.com/d/dynatext/heading.php.txt,并以heading.php的名字保存到dynatext文件夹。
(6)修改heading.php文件,将&font_file参数值设置为刚才复制到dynatext文件夹的字体文件名,然后将&font_size设置为23。
<?php
$font_file='trebuc.ttf';
$font_size=23;
$font_color='#000000';
$background_color='#ffffff';
$transparent_background=true;
$cache_images=true;
$cache_folder='cache';
?>
(7)下载http://www.alistapar.com/d/dynatext/replacement.js,并将它保存到dynatext文件夹。
(8)修改replaceSelector函数调用,在replacement.js的开始将h2修改为h1,将hideFlickerTimeout的值修改为一个非常小的值,如100。同样,改变heading.php和test.png的参数,以反映它们在dynatext文件夹中的位置。代码如下所示:
<?php
function com_stewartspeak_replacement(){
replaceSelector("h1","dynatext/heading.php",true);
var testURL="dynatext/test.png";
var doNotPrintImages=false;
var printerCSS="replacement-print.css";
var hideFlicker=false;
var hideFlickerCSS="replacement-screen.css";
var hideFlickerTimeout=100;
}
?>
(9)在seophp创建PNG图像文件,命名为test.png。图像内容可任意设定,但文件最好尽可能地小——如制作成1*1像素的图像。脚本使用该文件来测试浏览器功能,如果网页中没有出现test.png,则文本未被成功替换。读者可以下载本章代码,并复制使用该图像文件。