最终效果：

使用图片的提交按钮，并且该图片按钮具备鼠标动作——当鼠标移动到图片按钮上时，图片改变——一种视觉上的动态效果。

硬件道具：

两张 .gif 格式的图片，其中一个命名为: searchButton.gif，另一个命名为: searchButton.gif_hover.gif 。 这两张图片保存在：<Joomla! 1.5安装路径>\images\M_images\ 文件夹下。该文件夹下已有一张名为 searchButton.gif 的原始图片，选择覆盖。

后台操作：

Extensions -> Module Manager， 选择 mod_search 类型的的搜索模块，进入编辑 Edit。右边的参数设置 Parameters 关于按钮部分设置如下:

• Search button -> Yes
• Button Position -> Top/Bottom/Left/Right
• Search button as image -> Yes —— 这里的注释解释了上一步硬件道具的名字和位置的限制原因，显然不是我BT (Note: Use an image as button. This image has bo be named searchButton.gif and must be located in \images\M_images\ )
• Button Text -> 输入 & nbsp; ——中间没有空格，这样是为了解除必需有值的限制，不过如果你本意就是在图片上显示文字，则输入相应文字。

代码修改：

这里是根据 Joomla! 1.5版本自带的一个模版 beez （不是默认模版）修改而来，目前还没有check是否和默认模版里的代码雷同。

文件路径：<Joomla! 1.5安装路径>\templates\<所选择的模版>\html\mod_search\default.php

首先删除7-9行的关于label的那段代码，多了个label严重破坏整个网站的美观性。舍不得删除的就用注释符注释掉好了。

其次在原15行的地方，将原代码：

$button = '<input type="image" value="'.$button_text.'" class="button'.$moduleclass_sfx.'" src="'.$img.'" mce_src="'.$img.'"/>';

改为：

$button = '<input type="image" value="'.$button_text.'" class="button'.$moduleclass_sfx.'" src="'.$img.'" mce_src="'.$img.'" onmouseover="this.src=".$img.'_hover.gif\';" onmouseout="this.src=".$img.'\';" />'; 

千万注意单引号双引号的对称性，已经正反斜杠的作用。

保存一下该文件就成了。进行本地 localhost 转移到 live server 上时，只需要复制你使用的template以及位于 \images\M_images\ 下的两张按钮效果图片。

========

昨天把所有modules, components, plugins, templates几个文件夹的关于search的代码全读了。开始没看到关于图片的特别说明，一直试图hacker人家图片名字来着，走错了路子，后来终于灵光一现的救俺自己于水火/年角尖中。其实hacker完了之后发现巨巨巨简单。

今天往live server上搬，结果又找不到昨儿改的哪个文件，又是一通瞎执腾，结果是图片没上传上去=_=

痛定思痛，于是决定一定一定一定得记下来，以备我100%的下次再忘的毛病。