打造属于自己的可视Web HTML编辑器

能在自己的Web页面中实现可视HTML编辑器，是一件让人心动的事情。如果您使用了IE5.0 Brower, 不防看看下面的实现方法。

一、基础工作

首先当然是收集常见的一些Button图片，比如Cut(

)，居中(

)，加粗(

)等，这不是一件难事，打开FrontPage 2000, 按下Print(屏蔽Copy)键，然后到Photoshop中Paste,将选择区域设置为固定大小(16*16),然后一个一个选择Cut,Ctrl+N(新建),Paste,Save optimizied即可，当然如果您找到直接的Gif文件，就不需要这样做。

只有字体色彩选择图片(

)和画笔的色彩选择图片(

)有一点技巧，为了能让用户选择了不同色彩时，相应的字体色彩(或者画笔色彩)的下方能出现相关的色彩，您可以将图片下方一小片区域Delete掉，这样下方即可形成透明色，然后将图片的背景色设置为需要的色彩即可，比如红色的字体色彩为

，蓝色的即就为

。而在Javascript则可用：图片的ID号.style.backgroundColor=Color 来实现。

另一个技巧便是怎样在Web中形成动态鼠标效果，如下：

Mouse 不在对象上时：

Mouse 移到对象上时：

Mouse 在对象上压下时：

在Intranet中实现这样的方法非常多，有的采用捕获Mouse方法，有的采用多图片方法等等。在此，笔者则采用动态Css方法来实现，这样不仅简单，而且非常容易编写程序。

我们首先定义一组能产生Up,Dwon和正常效果的样式，如下：（以下的效果是在背景色为d0d0c8上产生的，若您的背景色不是，请修改rgb值即可)

<style>

.Up

{border-left: 1Px solid rgb(233,244,249);

border-right: 1px solid rgb(12,12,12);

border-bottom: 1px solid rgb(12,12,12);

border-top: 1px solid rgb(233,244,249);

cursor:hand;

}

.Down

{border-right: 1Px solid rgb(233,244,249);

border-left: 1px solid rgb(12,12,12);

border-top: 1px solid rgb(12,12,12);

border-bottom: 1px solid rgb(233,244,249);

cursor:hand;

}

.None

{border-top: 1Px solid rgb(208,208,200);

border-left: 1px solid rgb(208,208,200);

border-bottom: 1px solid rgb(208,208,200);

border-right: 1px solid rgb(208,208,200);

cursor:hand;}

</style>

再编写一个小函数，如下：（t表示某个td对象，n表示显示的效果，1=Up ,2=Down;其它表示正常)

function Check(t,n)

{

if(n==1) t.className ="Up"

else if(n==2) t.className ="Down" else t.className ="None"

}

那么在HTML中加入如下代码：<td class=None onmousedown=Check(this,2) onmouseover="Check(this,1)" onmouseout="Check(this,0)" onmouseup="Check(this,1)"></td>即可大功告成。