打造属于自己的可视Web HTML编辑器-程序开发-3P代码网
繁体中文
设为首页
加入收藏
当前位置:程序开发首页 >> Perl >> 打造属于自己的可视Web HTML编辑器

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

2005-01-09 20:45:24  作者:forrester  来源:互联网  浏览次数:60  文字大小:【】【】【
简介:能在自己的Web页面中实现可视HTML编辑器,是一件让人心动的事情。如果您使用了IE5.0 Brower, 不防看看下面的实现方法。 一、基础工作   首先当然是收集常见的一些Button图片,比如Cut(),居中(),加粗()等,...

能在自己的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值即可)

  再编写一个小函数,如下:(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中加入如下代码: 即可大功告成。

责任编辑:admin
相关文章