如何做网页调色板啊?

html-css09

如何做网页调色板啊?,第1张

那其实是一个拾色器了,很多语言都可以实现,其实原理很简单,点选那个拾色器,可以选择那颜色信息,再把颜色信息换成代码加进去就行了。这个是我用的一个拾色器:代码如下:(直接把它拷贝存成ASP就可以用了。)

<%@ CODEPAGE = "936" %>

<HTML>

<HEAD>

<meta http-equiv=Content-Type content=text/htmlcharset=gb2312>

<title>颜色拾取器</title>

<link rel="stylesheet" type="text/css" href="admin_css.css">

<script language="JavaScript">

function shutwin(){

window.close()

return}

function New(para_URL){var URL=new String(para_URL)

window.open(URL,'','resizable,scrollbars')}

</script></HEAD>

<BODY bgcolor="#ffffff" alink="#333333" vlink="#333333" link="#333333">

<script>

var SelRGB = ''

var DrRGB = ''

var SelGRAY = '120'

var hexch = new Array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F')

function ToHex(n)

{ var h, l

n = Math.round(n)

l = n % 16

h = Math.floor((n / 16)) % 16

return (hexch[h] + hexch[l])

}

function DoColor(c, l)

{ var r, g, b

r = '0x' + c.substring(1, 3)

g = '0x' + c.substring(3, 5)

b = '0x' + c.substring(5, 7)

if(l >120)

{

l = l - 120

r = (r * (120 - l) + 255 * l) / 120

g = (g * (120 - l) + 255 * l) / 120

b = (b * (120 - l) + 255 * l) / 120

}else

{

r = (r * l) / 120

g = (g * l) / 120

b = (b * l) / 120

}

return '#' + ToHex(r) + ToHex(g) + ToHex(b)

}

function EndColor()

{ var i

if(DrRGB != SelRGB)

{

DrRGB = SelRGB

for(i = 0i <= 30i ++)

GrayTable.rows(i).bgColor = DoColor(SelRGB, 240 - i * 8)

}

SelColor.value = DoColor(RGB.innerText, GRAY.innerText)

ShowColor.bgColor = SelColor.value

}

</script>

<SCRIPT event=onclick for=ColorTable language=JavaScript>

SelRGB = event.srcElement.bgColor

EndColor()

</SCRIPT>

<SCRIPT event=onmouseover for=ColorTable language=JavaScript>

RGB.innerText = event.srcElement.bgColor

EndColor()

</SCRIPT>

<SCRIPT event=onmouseout for=ColorTable language=JavaScript>

RGB.innerText = SelRGB

EndColor()

</SCRIPT>

<SCRIPT event=onclick for=GrayTable language=JavaScript>

SelGRAY = event.srcElement.title

EndColor()

</SCRIPT>

<SCRIPT event=onmouseover for=GrayTable language=JavaScript>

GRAY.innerText = event.srcElement.title

EndColor()

</SCRIPT>

<SCRIPT event=onmouseout for=GrayTable language=JavaScript>

GRAY.innerText = SelGRAY

EndColor()

</SCRIPT>

<SCRIPT event=onclick for=Ok language=JavaScript>

window.returnValue = SelColor.value

window.close()

</SCRIPT>

<META content="MSHTML 5.00.2920.0" name=GENERATOR></HEAD>

<DIV align=center>

<CENTER>

<TABLE border=0 cellPadding=0 cellSpacing=10>

<TBODY>

<TR>

<TD>

<TABLE border=0 cellPadding=0 cellSpacing=0 id=ColorTable

style="CURSOR: hand">

<script>

function wc(r, g, b, n)

{

r = ((r * 16 + r) * 3 * (15 - n) + 0x80 * n) / 15

g = ((g * 16 + g) * 3 * (15 - n) + 0x80 * n) / 15

b = ((b * 16 + b) * 3 * (15 - n) + 0x80 * n) / 15

document.write('<TD BGCOLOR=#' + ToHex(r) + ToHex(g) + ToHex(b) + ' height=8 width=8></TD>')

}

var cnum = new Array(1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 1, 1, 0, 0)

for(i = 0i <16i ++)

{

document.write('<TR>')

for(j = 0j <30j ++)

{

n1 = j % 5

n2 = Math.floor(j / 5) * 3

n3 = n2 + 3

wc((cnum[n3] * n1 + cnum[n2] * (5 - n1)),

(cnum[n3 + 1] * n1 + cnum[n2 + 1] * (5 - n1)),

(cnum[n3 + 2] * n1 + cnum[n2 + 2] * (5 - n1)), i)

}

document.writeln('</TR>')

}

</script>

<TBODY></TBODY></TABLE></TD>

<TD>

<TABLE border=0 cellPadding=0 cellSpacing=0 id=GrayTable

style="CURSOR: hand">

<SCRIPT language=JavaScript>

for(i = 255i >= 0i -= 8.5)

document.write('<TR BGCOLOR=#' + ToHex(i) + ToHex(i) + ToHex(i) + '><TD TITLE=' + Math.floor(i * 16 / 17) + ' height=4 width=20></TD></TR>')

</SCRIPT>

<TBODY></TBODY></TABLE></TD></TR></TBODY></TABLE></CENTER></DIV>

<DIV align=center>

<CENTER>

<TABLE border=0 cellPadding=0 cellSpacing=10>

<TBODY>

<TR>

<TD align=middle rowSpan=2>选中色彩

<TABLE border=1 cellPadding=0 cellSpacing=0 height=30 id=ShowColor

width=40>

<TBODY>

<TR>

<TD></TD></TR></TBODY></TABLE></TD>

<TD rowSpan=2>基色: <SPAN id=RGB></SPAN><BR>亮度: <SPAN

id=GRAY>120</SPAN><BR>代码: <INPUT id=SelColor size=9></TD>

<TD></TD></TR>

<TR>

<TD><input type=BUTTON onclick=window.close()value="关闭" class=buttonface>

</TD>

</TR>

</TBODY>

</TABLE>

</CENTER>

</DIV>

</BODY>

</HTML>

最方便的区分方法是:

PNG格式可编辑。如图片中有字体等,可利用PS再做更改

JPG格式不可编辑。

对于两种格式的解析度,PNG高于JPG。

PNG不适用任何场合,因为它的体积很大,不利用显示,完全用于编辑者作为以后更改图片时做的备份之用。

JPG格式用于很多场合。

PNG是20世纪90年代中期开始开发的图像文件存储格式,其目的是企图替代GIF和TIFF文件格式,同时增加一些GIF文件格式所不具备的特性。流式网络图形格式(Portable Network Graphic Format,PNG)名称来源于非官方的“PNG's Not GIF”,是一种位图文件(bitmap file)存储格式,读成“ping”。PNG用来存储灰度图像时,灰度图像的深度可多到16位,存储彩色图像时,彩色图像的深度可多到48位,并且还可存储多到16位的α通道数据。PNG使用从LZ77派生的无损数据压缩算法。

PNG图片文件一般应用于JAVA程序中,或网页或S60程序中是因为它压缩比高,生成文件容量小。

PNG文件格式保留GIF文件格式的下列特性:

使用彩色查找表或者叫做调色板可支持256种颜色的彩色图像。

流式读/写性能(streamability):图像文件格式允许连续读出和写入图像数据,这个特性很适合于在通信过程中生成和显示图像。

逐次逼近显示(progressive display):这种特性可使在通信链路上传输图像文件的同时就在终端上显示图像,把整个轮廓显示出来之后逐步显示图像的细节,也就是先用低分辨率显示图像,然后逐步提高它的分辨率。

透明性(transparency):这个性能可使图像中某些部分不显示出来,用来创建一些有特色的图像。

辅助信息(ancillary information):这个特性可用来在图像文件中存储一些文本注释信息。

独立于计算机软硬件环境。

使用无损压缩。

PNG文件格式中要增加下列GIF文件格式所没有的特性:

每个像素为48位的真彩色图像。

每个像素为16位的灰度图像。

可为灰度图和真彩色图添加α通道。

添加图像的γ信息。

使用循环冗余码(cyclic redundancy code,CRC)检测损害的文件。

加快图像显示的逐次逼近显示方式。

标准的读/写工具包。

可在一个文件中存储多幅图像。

文件结构

PNG图像格式文件(或者称为数据流)由一个8字节的PNG文件署名(PNG file signature)域和按照特定结构组织的3个以上的数据块(chunk)组成。

PNG定义了两种类型的数据块,一种是称为关键数据块(critical chunk),这是标准的数据块,另一种叫做辅助数据块(ancillary chunks),这是可选的数据块。关键数据块定义了4个标准数据块,每个PNG文件都必须包含它们,PNG读写软件也都必须要支持这些数据块。虽然PNG文件规范没有要求PNG编译码器对可选数据块进行编码和译码,但规范提倡支持可选数据块。

jpg全名应该是JPEG

JPEG 图片以 24 位颜色存储单个光栅图像。JPEG 是与平台无关的格式,支持最高级别的压缩,不过,这种压缩是有损耗的。渐近式 JPEG 文件支持交错。

jpg格式是一种图片格式,使一种比较常见的图画格式,如果你的图片是其他格式的话,你可以通过以下方法转化:

1、photoshop ,打开图画以后,按另存为,下面格式那里选择JPG格式就是了,这个方法比较简单,而且适合画质比较好的,要求比较高的图片转换。

2、如果你要求不高,你直接通过windows附带的图画程序,选择JPG格式就行了,这个来转换的话,画质嘛,马马虎虎,不过在网上嘛,过得去了!

如果JPG格式转其他格式,这样的方法同样适用。 归根到底 jpg和gif和有损压缩,png是无损的,所以在用div+css布局时 png就没前两者灵活。