60度 Eadren 网络 >> 设计教程 >> 网页制作 >> Html·Css·特效 >> 特效 >> 代码生成类 >> 正文[打印] [收藏]

非常好的生成各种按钮的页面生成器，好好研究一下吧

作者：生鱼片文章来源：互联网点击数：更新时间：2006-4-10 22:33:33

演示区

Images MouseOut Image Source

MouseOver Image Source

Control Panel Create the image as a link to:
Target (for frames only):
Attributes Width: Name: Height: Alt: Border:

脚本说明：

将下面的代码加在<head></head>之间

<!--Hide

//timer

speed = 10;

//Array to make Objects

Imagi        = new Array();

//numbers of Link

no_of_images = 0;

currentImage = -1;

function checkBrowser() {

var bname = navigator.appName;

var ver   = parseInt(navigator.appVersion);

if (bname == "Netscape" && ver >= 3 || bname == "Microsoft Internet Explorer" && ver >= 4)

;

else {

alert('You need Netscape Navigator 3 and above or Microsoft Internet Explorer 4 and above')

}

checkBrowser();

//The Image Object

function ImageObject(Name, OffSrcPro, OffSrc, OnSrcPro, OnSrc, Width, Height, Alt, Border, URL, LinkTarget) {

this.Name 	     	    = Name;

this.OffSrcPro       = OffSrcPro;

this.OffSrc     	    = OffSrc;

this.OnSrcPro	    = OnSrcPro;

this.OnSrc     	    = OnSrc;

this.Width	          = Width;

this.Height          = Height;

this.Alt		    = Alt;

this.Border	    = Border;

this.URL		    = URL;

this.LinkTarget      = LinkTarget;

this.length	    = 11;

}

function headerSelect(grut, grutv) {

if (grut.options[0].selected) {

grutv.value = "";

}

else {

for (var y=0; y < grut.length; y++) {

if (grut.options[y].selected) {

grutv.value = "";

grutv.value += grut.options[y].text;

}

//Function Performing Form Validation

function checkMe(Me) {

with(Me) {

SrcBox1.focus();

SrcBox1.blur();

SrcBox2.focus();

SrcBox2.blur();

if (URLBox.value == "http://" || URLBox.value == "") {

alert("连接的URL没有设置");

URLBox.focus();

return false;

}

if (SrcBox1.value == "") {

alert("MouseOut图片尚未设置");

SrcBox1.focus();

return false;

}

if (SrcBox2.value == "") {

alert("MouseOver图片尚未设置");

SrcBox2.focus();

return false;

}

if (NameBox.value == "") {

alert("图片尚未命名");

NameBox.focus();

return false;

}

return true;

}

function checkAndShow() {

with(window.document.mouseOverForm.Images) {

if (options.length != 0) {

for(var i=0; i < options.length; i++) {

if (options[i].selected) {

with(window.document.mouseOverForm) {

URLBox.value = Imagi[i].URL;

TargetBox.value = Imagi[i].LinkTarget;

HeadSrc1.value = Imagi[i].OffSrcPro;

HeadSrc2.value = Imagi[i].OnSrcPro;

SrcBox1.value  = Imagi[i].OffSrc;

SrcBox2.value  = Imagi[i].OnSrc;

NameBox.value  = Imagi[i].Name;

BorderBox.value = Imagi[i].Border

AltBox.value   = Imagi[i].Alt;

WidthBox.value = Imagi[i].Width;

HeightBox.value = Imagi[i].Height;

currentImage = i;

if (HeadSrc1.value == "file:///")

Header1.options[1].selected = true;

else if (HeadSrc1.value == "http://")

Header1.options[2].selected = true;

else if (HeadSrc1.value == "")

Header1.options[0].selected = true;

if (HeadSrc2.value == "file:///")

Header2.options[1].selected = true;

else if (HeadSrc2.value == "http://")

Header2.options[2].selected = true;

else if (HeadSrc2.value == "")

Header2.options[0].selected = true;

}

function insertItem() {

with(window.document.mouseOverForm) {

if (checkMe(window.document.mouseOverForm)) {

Imagi[no_of_images] = new ImageObject(NameBox.value, HeadSrc1.value, SrcBox1.value, HeadSrc2.value, SrcBox2.value, WidthBox.value, HeightBox.value, AltBox.value, BorderBox.value, URLBox.value, TargetBox.value);

Images.length += 1;

Images.options[Images.length - 1].text = Imagi[no_of_images].Name;

++no_of_images;

CleanBoxes(window.document.mouseOverForm);

}

//Clean options[0] when page loaded

function Clean() {

abc = document.forms[0].Images;

if (Imagi.length == 0 && abc.length != 0) {

for(var loop = 0; loop < abc.length; loop++)

abc.options[loop] = null;

}

function UpdateOption() {

with(window.document.mouseOverForm) {

if (currentImage != -1) {

if (confirm("确信要更新这些数据?")) {

Imagi[currentImage].URL    	= URLBox.value;

Imagi[currentImage].LinkTarget  = TargetBox.value;

Imagi[currentImage].Name 		= NameBox.value;

Imagi[currentImage].OffSrcPro	= HeadSrc1.value;

Imagi[currentImage].OnSrcPro	= HeadSrc2.value;

Imagi[currentImage].OffSrc	= SrcBox1.value;

Imagi[currentImage].OnSrc		= SrcBox2.value;

Imagi[currentImage].Width       = WidthBox.value;

Imagi[currentImage].Height      = HeightBox.value;

Imagi[currentImage].Alt         = AltBox.value;

Imagi[currentImage].Border      = BorderBox.value;

Images.options[currentImage].text = Imagi[currentImage].Name;

alert("数据已经更新!");

CleanBoxes(window.document.mouseOverForm);

}

else

alert("你尚未选择任何项目!");

}

function removeIt() {

if (document.mouseOverForm.Images.selectedIndex < 0)

alert("你尚未选择任何项目!");

with(document.mouseOverForm.Images) {

for (var t=0; t < length; t++) {

if (options[t].selected) {

if (confirm("确信移去图片?")) {

for(var z = t; z < length-1; z++) {

Imagi[z].URL = Imagi[z+1].URL;

Imagi[z].LinkTarget = Imagi[z+1].LinkTarget;

Imagi[z].OffSrcPro = Imagi[z+1].OffSrcPro;

Imagi[z].OnSrcPro = Imagi[z+1].OnSrcPro;

Imagi[z].OffSrc = Imagi[z+1].OffSrc;

Imagi[z].OnSrc = Imagi[z+1].OnSrc;

Imagi[z].Name = Imagi[z+1].Name;

Imagi[z].Border = Imagi[z+1].Border;

Imagi[z].Alt = Imagi[z+1].Alt;

Imagi[z].Height = Imagi[z+1].Height;

Imagi[z].Width = Imagi[z+1].Width;

}

Imagi.length -= 1;

--no_of_images;

options[t] = null;

CleanBoxes(window.document.mouseOverForm);

}

function Debug() {

var no = prompt("Please enter the Object number you want to debug", "");

var second_argu = "Imagi[" + no + "]";

show_props(Imagi[no], second_argu);

}

//for debugging usage

function show_props(obj, obj_name) {

var result = "";

for (var i in obj)

result += obj_name + "." + i + " = " + obj[i] + "\n";

alert(result);

}

//Clean the options[0] when page loaded

function Clean() {

abc = document.mouseOverForm.Images;

if (Imagi.length == 0 && abc.length != 0) {

for(var loop = 0; loop < abc.length; loop++)

abc.options[loop] = null;

}

//Clean the value in the fields

function CleanBoxes(argv) {

var x = 0; //counter

while(x != argv.length - 1) {

if (argv.elements[x].type == "text") {

argv.elements[x].value = "";

}

x++;

argv.URLBox.value = "http://";

argv.Header1.options[0].selected = true;

argv.Header2.options[0].selected = true;

argv.HeadSrc1.focus();

argv.HeadSrc1.blur();

argv.HeadSrc1.value = "";

argv.HeadSrc2.focus();

argv.HeadSrc2.blur();

argv.HeadSrc2.value = "";

argv.SrcBox1.focus();

argv.SrcBox1.blur();

argv.SrcBox1.value = "";

argv.SrcBox2.focus();

argv.SrcBox2.blur();

argv.SrcBox2.value = "";

argv.URLBox.focus();

}

closedd = true;

function PopDrive(no) {

if (closedd) {

Box = no;

First = '<html><body bgcolor="white" text="#000000" link="#000099" vlink="#663366" alink="#ff0000" onUnLoad="window.opener.closedd = true;"   ><center><br><form><input type="file" name="Drive"><br><br><input type="Button" value="OK" name="OK" onClick="window.opener.Make(document.forms[0], ' + Box + '); ' + 'window.opener.CheckAndChange(' + Box + '); ' + '"><input type="Button" name="Cancel" value="Cancel" onClick="window.close();window.opener.closedd = true;"></form></center><blockquote><font face="宋体" size=2>通过"浏览"按钮从硬盘上选择图片文件，然后按"OK"继续。</font></blockquote></body></html>';

Pop = window.open("", "DriveWin", "Width=350,Height=200,resizable=yes");

Pop.document.open();

Pop.document.write(First);

closedd = false;

}

else

Pop.focus();

}

function Make(na, no) {

na.Drive.focus();

na.Drive.blur();

if (na.Drive.value == "") {

alert("文件尚未选择!");

Pop.focus();

}

else {

if (no == 1) {

document.mouseOverForm.SrcBox1.value = na.Drive.value;

document.mouseOverForm.Header1.options[1].selected = true;

document.mouseOverForm.HeadSrc1.value = "file:///";

}

else if (no == 2) {

document.mouseOverForm.SrcBox2.value = na.Drive.value;

document.mouseOverForm.Header1.options[1].selected = true;

document.mouseOverForm.HeadSrc2.value = "file:///";

}

Pop.close();

window.closedd = true;

}

//Check the image source, then change the protocol if needed

function CheckAndChange(no) {

if (no == 1) {

SrcBox = document.mouseOverForm.SrcBox1;

Selection = document.mouseOverForm.Header1;

ProtocolBox = document.mouseOverForm.HeadSrc1;

}

else if (no == 2) {

SrcBox = document.mouseOverForm.SrcBox2;

Selection = document.mouseOverForm.Header2;

ProtocolBox = document.mouseOverForm.HeadSrc2;

}

var c = SrcBox.value.indexOf("http://");

var d = SrcBox.value.indexOf("file:///");

if (c >= 0) {

Selection.options[2].selected = true;

ProtocolBox.value = "http://";

Stringo2 = SrcBox.value.substring(c+7);

SrcBox.value = Stringo2;

}

else if (d >= 0) {

Selection.options[1].selected = true;

ProtocolBox.value = "file:///";

Stringo3 = SrcBox.value.substring(d+8);

SrcBox.value = Stringo3;

}

var find2 = SrcBox.value.indexOf("/")

if (SrcBox.value.indexOf(":\\") > 0 || SrcBox.value.indexOf("|/") > 0) {

Selection.options[1].selected = true;

ProtocolBox.value = "file:///";

var cr = SrcBox.value.indexOf(":\\");

if (cr >= 0) {

SrcBox.value = stringInsert(SrcBox.value, "|", cr);

for(var countIt = cr; countIt < SrcBox.value.length; countIt++) {

var Athere = SrcBox.value.charAt(countIt);

if (Athere == "\\")

SrcBox.value = stringInsert(SrcBox.value, "/", countIt);

}

else if ((SrcBox.value.indexOf(".com") > 0) || (SrcBox.value.indexOf(".edu") > 0) || (SrcBox.value.indexOf(".org") > 0) || (SrcBox.value.indexOf(".net") > 0) || (SrcBox.value.indexOf(".gov") > 0) || (SrcBox.value.indexOf(".mil") > 0) || (SrcBox.value.indexOf(".arpa") > 0) || (SrcBox.value.indexOf(".int") > 0)) {

Selection.options[2].selected = true;

ProtocolBox.value = "http://";

}

else if (find2 > 0) {

var yes = 0;

var c = 0;

var Stringoo2 = SrcBox.value.substring(0, find2);

for(var a = 0; a < 3; a++) {

var b = Stringoo2.indexOf(".", c);

if (b > 0)	{

c = b + 1;

yes++;

}

if (yes == 3) {

Selection.options[2].selected = true;

ProtocolBox.value = "http://";

}

else {

Selection.options[0].selected = true;

ProtocolBox.value = "";

}

if (SrcBox.value != "") {

var Stringo = SrcBox.value.toUpperCase();

if (Stringo.indexOf(".GIF") < 0 && Stringo.indexOf(".JPG") < 0 && Stringo.indexOf(".JPEG") < 0 && Stringo.indexOf(".PNG") < 0) {

alert("看样子没有设置正确的图片文件:)");

SrcBox.focus();

}

function stringInsert(initial, replace, position) {

start=parseInt(position);

end=start+replace.length;

newVal=initial.substring(0,start)+replace+initial.substring(end,initial.length);

return newVal;

}

function isDigit(form) {

for (var x = 0; x < form.value.length; x++) {

var y = form.value.charAt(x);

var g = parseInt(y);

if (g >= 0 && g <= 9)

;

else {

alert("非法的参数！");

form.focus();

return false;

}

return true;

}

function InsertBelow()

{

with(window.document.mouseOverForm)

{

if(Images.selectedIndex != -1)

{

for(var g=0; g < Imagi.length - 1; g++)

{

if (Images.options[g].selected)

{

var r = no_of_images;

Imagi[r] = new ImageObject( Imagi[r-1].Name, Imagi[r-1].OffSrcPro, Imagi[r-1].OffSrc, Imagi[r-1].OnSrcPro, Imagi[r-1].OnSrc, Imagi[r-1].Width, Imagi[r-1].Height, Imagi[r-1].Alt, Imagi[r-1].Border, Imagi[r-1].URL, Imagi[r-1].LinkTarget );

for(var p = Imagi.length-2; p > g; p--)

{

Imagi[p].Name          = Imagi[p-1].Name;

Imagi[p].OffSrcPro     = Imagi[p-1].OffSrcPro;

Imagi[p].OffSrc        = Imagi[p-1].OffSrc;

Imagi[p].OnSrcPro      = Imagi[p-1].OnSrcPro;

Imagi[p].OnSrc         = Imagi[p-1].OnSrc;

Imagi[p].Width         = Imagi[p-1].Width;

Imagi[p].Height        = Imagi[p-1].Height;

Imagi[p].Alt           = Imagi[p-1].Alt;

Imagi[p].Border        = Imagi[p-1].Border;

Imagi[p].URL           = Imagi[p-1].URL;

Imagi[p].LinkTarget           = Imagi[p-1].LinkTarget;

}

Imagi[g+1].URL    	= URLBox.value;

Imagi[g+1].LinkTarget  = TargetBox.value;

Imagi[g+1].Name 		= NameBox.value;

Imagi[g+1].OffSrcPro	= HeadSrc1.value;

Imagi[g+1].OnSrcPro	= HeadSrc2.value;

Imagi[g+1].OffSrc	= SrcBox1.value;

Imagi[g+1].OnSrc		= SrcBox2.value;

Imagi[g+1].Width       = WidthBox.value;

Imagi[g+1].Height      = HeightBox.value;

Imagi[g+1].Alt         = AltBox.value;

Imagi[g+1].Border      = BorderBox.value;

no_of_images++;

Images.length += 1;

for(var b = Images.options.length - 1; b > g; b--)

{

Images.options[b].text =  Images.options[b-1].text;

}

Images.options[g+1].text = Imagi[g+1].Name;

CleanBoxes(window.document.mouseOverForm);

}

else

{

if(Images.length != 0)

{

var g = -1;

var r = no_of_images;

for(var p = Imagi.length-2; p > g; p--)

{

Imagi[p].Name          = Imagi[p-1].Name;

Imagi[p].OffSrcPro     = Imagi[p-1].OffSrcPro;

Imagi[p].OffSrc        = Imagi[p-1].OffSrc;

Imagi[p].OnSrcPro      = Imagi[p-1].OnSrcPro;

Imagi[p].OnSrc         = Imagi[p-1].OnSrc;

Imagi[p].Width         = Imagi[p-1].Width;

Imagi[p].Height        = Imagi[p-1].Height;

Imagi[p].Alt           = Imagi[p-1].Alt;

Imagi[p].Border        = Imagi[p-1].Border;

Imagi[p].URL           = Imagi[p-1].URL;

Imagi[p].LinkTarget           = Imagi[p-1].LinkTarget;

}

Imagi[g+1].URL    	= URLBox.value;

Imagi[g+1].LinkTarget  = TargetBox.value;

Imagi[g+1].Name 		= NameBox.value;

Imagi[g+1].OffSrcPro	= HeadSrc1.value;

Imagi[g+1].OnSrcPro	= HeadSrc2.value;

Imagi[g+1].OffSrc	= SrcBox1.value;

Imagi[g+1].OnSrc		= SrcBox2.value;

Imagi[g+1].Width       = WidthBox.value;

Imagi[g+1].Height      = HeightBox.value;

Imagi[g+1].Alt         = AltBox.value;

Imagi[g+1].Border      = BorderBox.value;

no_of_images++;

Images.length += 1;

for(var b = Images.options.length - 1; b > g; b--)

{

Images.options[b].text =  Images.options[b-1].text;

}

Images.options[g+1].text = Imagi[g+1].Name;

CleanBoxes(window.document.mouseOverForm);

}

else

alert("缺少项目!")

}

function CheckIt(array, string) {

if (array == null || array == "")

variable = "";

else

variable = string + array + "\"";

return variable;

}

function generateIt() {

if (document.mouseOverForm.Images.length != 0) {

HeadCode = "<SCRIPT LANGUAGE=\"Javascript\">\r" + "<" + "!-" + "-Hide\r\r";

HeadCode += "//http://www.mbsky.com/javascript/dai5.htm\r\r";

HeadCode += "function isCompatible()\r" + "{\r" + " var BrowserName = navigator.appName;\r" + " var BrowserVer  = parseInt(navigator.appVersion);\r" + " var Compatible  = (BrowserName == \"Netscape\" && BrowserVer == 3) || (BrowserName == \"Netscape\" || BrowserVer == 4) || (BrowserName == \"Microsoft Internet Explorer\" || BrowserVer == 4)\r" + " return Compatible;\r" + "}\r\r";

HeadCode += "function flipIt(img, tothis)\r" + "{\r" + " if (isCompatible())\r" + " {\r" + "  img.src = tothis.src;\r" + " }\r" + "}\r\r";

BodyCode = "";

for (var count = 0; count < Imagi.length; count++) {

var xName = Imagi[count].Name;

var xNameOff = Imagi[count].OffSrcPro + Imagi[count].OffSrc;

var xNameOn  = Imagi[count].OnSrcPro + Imagi[count].OnSrc;

var Target = CheckIt(Imagi[count].LinkTarget, " TARGET=\"");

var Border = CheckIt(Imagi[count].Border, " BORDER=\"");

var Alt = CheckIt(Imagi[count].Alt, " ALT=\"");

var Width = CheckIt(Imagi[count].Width, " WIDTH=\"");

var Height = CheckIt(Imagi[count].Height, " HEIGHT=\"");

var MouseOver = "onMouseOver=\"flipIt(document." + xName + ", " + xName + "On);\"";

var MouseOut = "onMouseOut=\"flipIt(document." + xName + ", " + xName + "Off);\"";

HeadCode += xName + "Off = new Image();\r";

HeadCode += xName + "Off.src = " + "\"" + xNameOff + "\";" + "\r";

HeadCode += xName + "On = new Image();\r";

HeadCode += xName + "On.src  = " + "\"" + xNameOn + "\";" + "\r";

BodyCode += "<A HREF=\""+ Imagi[count].URL + "\""  + Target + " " + MouseOver + " " + MouseOut + "><IMG SRC=\"" + xNameOff + "\" NAME=\"" + xName + "\"" + Border + Alt + Width + Height + "></A>\r\r";

}

HeadCode += "\r/" + "/End Hide-" + "->\r</SCRIPT>";

Emulate = window.open("", "CodeWindow", "width=640,height=420,status=yes,resizable=yes,scrollbars=yes");

Emulate.document.clear();

Emulate.document.write('<html><head><title>Code generated</title></head><body bgcolor="#ffffff" text="#000000" link="#000099" vlink="#663366" alink="#ff0000">');

Emulate.document.write("<br><br><center><font face=\"宋体\">如下代码拷贝到<font color=\"red\">HEAD</font>标签间</font></center><form name=\"genCode\"><center><textarea cols=55 rows=16 name=\"Head\" wrap=\"Virtual\">

如下代码拷贝到BODY 标签间

"); Emulate.document.write('

'); Emulate.document.genCode.Head.value = HeadCode; Emulate.document.genCode.Body.value = BodyCode; Emulate.document.close(); } else alert("You haven't made anything yet"); } //End Hide-->

将下面的代码加在<body></body>之间

<font face="verdana, arial, helvetica" color="#ffffff" size=-1>  <b>Images</b></font>

<font face="verdana, arial, helvetica" color="#ffffff" size=-1>  <b>MouseOut Image Source</b></font>

</select><br>

<font face="verdana, arial, helvetica" color="#ffffff" size=-1>  <b>MouseOver Image Source</b></font>

</select><br>

<font face="verdana, arial, helvetica" color="#ffffff" size=-1>  <b>Control Panel</b></font>

<option>Please be patient while loading

</select>

<font face="helvetica, arial, sans serif" size=-1><b>Create the image as a link to: </b></font><br>

<font face="helvetica, arial, sans serif" size=-1><b>Target</b><font face="helvetica, arial, sans serif" size=-2><b> (for frames only)</b></font><b>:</b></font> <br>

<font face="verdana, arial, helvetica" color="#ffffff" size=-1>  <b>Attributes</b></font>

<font face="helvetica, arial, sans serif" size=-1><b>Width:</b></font>

<font face="helvetica, arial, sans serif" size=-1><b>Height:</b></font>

<font face="helvetica, arial, sans serif" size=-1><b>Border:</b></font>

</form>

将下面的代码加在<body>里(例<body **加代码处**>)

上一篇教程：下拉菜单自动生成器，非常酷的东东，强烈推荐

下一篇教程：你见过当鼠标放到图片时图片变换吧，看了这个你自己可以动手做

相关非常好的生成各种按钮的页面生成器，好好研究一下吧的文章：

60度 Eadren 网络 >> 设计教程 >> 网页制作 >> Html·Css·特效 >> 特效 >> 代码生成类 >> 正文[打印] [收藏]

非常好的生成各种按钮的页面生成器，好好研究一下吧

网友评论

全站阅读排行

本类热门教程