CSDN博客

img asthlon

GreetingCardDesinger

发表于2004/9/28 10:52:00  1283人阅读

分类: JAVASCRIPT

<html>
<head>
<title>Greeting Card Designer-www.51windows.Net</title>

<style type="text/css">

.title {  font-family: Verdana;
        font-size: 13pt; font-weight: bold;
        color: #FFFFFF;}
.lpane {  position:absolute;
        width:144px;  height:408px; z-index:1;
        top: 34px; left: 6px;
        background: #FFFFFF;
        border-right:2px solid  #99CCFF;
        border-top:2px solid #333366;
        border-left:2px solid #333366;
        border-bottom:2px solid #99CCFF;}
.layout { position:absolute;
        width:443px; height:408px; z-index:1;
        top: 34px; left: 157px;
        background-color: #999999;
        border-right:2px solid  #99CCFF;
        border-top:2px solid #333366;
        border-left:2px solid #333366;
        border-bottom:2px solid #99CCFF;}
.card  { position:absolute;
        width:375px; height:225px; z-index:2;
        left: 32px; top: 85px;
        background-color: #FFFFFF;
        layer-background-color: #FFFFFF;
        border: 1px solid #000000; padding:15;
         overflow:hidden;}
.cardshadow  { position:absolute;
        width:375px; height:225px; z-index:1;
        left: 32px; top: 85px;
        background: #000000; border: 1px solid #000000;
        FILTER: progid:DXImageTransform.Microsoft.CrBlur(
                PixelRadius=3,
                MakeShadow=true,
                ShadowOpacity=.30);}
.rpane { position:absolute;
        width:144px; height:408px; z-index:1;
        top: 34px; left: 608px;
        background:#666666;
        layer-background-color: #FFFFFF;
        border-right:2px solid  #99CCFF;
        border-top:2px solid #333366;
        border-left:2px solid #333366;
        border-bottom:2px solid #99CCFF;
        padding:5px;}
.bar { position:absolute;
        width:746px; height:20px; z-index:2;
        top: 446px; left: 6px; padding:5px;}
.bar A:link {text-decoration:none; color:white}
.bar A:visited {text-decoration:none; color:white}
.bar A:active {text-decoration:none; color:white}
.bar A:hover {text-decoration:none; color:yellow}
.wbox{ background-color: #FFFFFF;
        border:1px solid #000000; z-index:2;}
.button1{ height:20px;
        background:#666666;
        font-family:verdana; color:white;
        font-size:8pt; font-weight:bold;
        padding:1px; padding-left:5px;
        border-bottom:1px solid #999999;
        cursor:hand; }
.textRegion{ height:20px;
        background:#666666;
        font-family:verdana; color:white;
        font-size:8pt;
        padding:1px; padding-left:5px;
        border-bottom:1px solid #999999;}
.swatch{ height:20px; width:20px;
        margin:5px; border:1px solid black;
        cursor:hand;}

</style>


<SCRIPT language=javascript>
<!-- Identifies the current set of active right pane controls               -->
var gsCurrentControlSet = null;
<!-- These variables are used to dynamically assign IDs to inserted content -->
var giLastImg = '1';
var giLastTxt = '1';


<!-- The fnInit function initializes the editable and non-editable regions -->
<!-- of the document                                                       -->
function fnInit(){
    gsCurrentControlSet=oSizeControls;

    <!-- Ensure the display interface is not selectable, by making all     -->
    <!-- elements UNSELECTABLE                                             -->
    for (i=0; i<document.all.length; i++)
            document.all(i).unselectable = "on";

    <!-- Prepare the editable region                                       -->
    card.unselectable = "off";
    card.contentEditable='true';
    document.execCommand("2D-Position", true, true);
    document.execCommand("MultipleSelection", true, true);
    document.execCommand("LiveResize", true, true);
}


<!-- The fnToggleOptions function sets the type of controls available on   -->
<!-- the right pane of the Card Designer. size/background/text/images      -->
function fnToggleOptions(sControlSet){

    if (gsCurrentControlSet != sControlSet){
      gsCurrentControlSet.style.display = "none";
      sControlSet.style.display = "block";
      gsCurrentControlSet = sControlSet;
    }
}


<!-- The fnChangeSize function sets the editable card region -->
<!-- to the user selected dimentions.                        -->
function fnChangeSize(oWidth, oHeight, oTop, oLeft) {
   card.style.width=oWidth;
   cardshadow.style.width=oWidth;
   card.style.height=oHeight;
   cardshadow.style.height=oHeight;
   card.style.top=oTop;
   cardshadow.style.top=oTop;
   card.style.left=oLeft;
   cardshadow.style.left=oLeft;
}

<!-- The fnChangeStyle function sets the background style for the card. -->
function fnChangeStyle() {
    if (event.srcElement.className == "swatch") {
        card.style.background=event.srcElement.style.background;
        card.style.filter=event.srcElement.style.filter;
    }
}


<!-- The fnInsertImage function inserts an image into the editable card -->
<!-- region.   The new IMG has a unique ID.                             -->
function fnInsertImage(oImgId,oImgSrc)
{
    var oNode=document.createElement("img");
    card.insertBefore(oNode);
    oNode.src=oImgSrc;
    giLastImg++;
    var iTempCount = oImgId + giLastImg;
    oNode.id = iTempCount;
    oNode.style.position='absolute';

    <!-- Set the new image as control selected for resizing/repositioning -->
    var oControlRange = document.body.createControlRange();
    oControlRange.add(oNode);
    oControlRange.select();
}

<!-- The fnInsertText function inserts an text DIV into the editable card -->
<!-- region.  The new DIV has a unique ID.                                -->
function fnInsertText(oTxtId,oTxtFont) {
    var oNode=document.createElement("div");
    card.insertBefore(oNode);
    oNode.style.fontFamily=oTxtFont;
    oNode.innerText='Enter some text here';
    giLastTxt++;
    var iTempCount = "text" + giLastTxt;
    oNode.id = iTempCount;
    oNode.style.position='absolute';

    <!-- Set the new text as the active element for editing. -->
    oNode.setActive()
}

<!-- The fnChangeFontSize function sets the font-size for control selected -->
<!-- text regions.                                                         -->
function fnChangeFontSize(){
  if (document.selection.type == "Control") {
    var oControlRange = document.selection.createRange();
    for (i = 0; i < oControlRange.length; i++)
      if (oControlRange(i).tagName != "IMG")
        oControlRange(i).style.fontSize=event.srcElement.style.fontSize;
  }
}

<!-- The fnChangeFontFamily function sets the font-family for control -->
<!-- selected text regions.                                           -->
function fnChangeFontFamily    (){
  if (document.selection.type == "Control"){
    var oControlRange = document.selection.createRange();
    for (i = 0; i < oControlRange.length; i++)
      if (oControlRange(i).tagName != "IMG")
       oControlRange(i).style.fontFamily=event.srcElement.style.fontFamily;
  }
}

<!-- The fnChangeFontColor function sets the text color for control selected -->
<!-- text regions.                                                           -->
function fnChangeFontColor    (){
  if (document.selection.type == "Control") {
    var oControlRange = document.selection.createRange();
    for (i = 0; i < oControlRange.length; i++)
      if (oControlRange(i).tagName != "IMG")
        oControlRange(i).style.color=event.srcElement.style.backgroundColor;
  }
}

</SCRIPT>
</HEAD>


<BODY BGCOLOR="#006699" MARGINWIDTH="0" MARGINHEIGHT="0" TOPMARGIN="0" LEFTMARGIN="0" onload="fnInit();">
<!--TOOLBAR_START--><!--TOOLBAR_EXEMPT--><!--TOOLBAR_END-->

<DIV ID="title" CLASS="title" STYLE="position:absolute; width:747px;
     height:28px; z-index:2; top:5px; left:5px">Greeting Card Designer</DIV>

<!-- Option Control -->
<DIV ID="leftpane" CLASS="lpane">
    <DIV CLASS="button1" onclick="fnToggleOptions(oSizeControls);">
        Size</DIV>
    <DIV CLASS="button1" onclick="fnToggleOptions(oBackgroundControls);">
        Background Style</DIV>
    <DIV CLASS="button1" onclick="fnToggleOptions(oTextControls);">
        Text</DIV>
    <DIV CLASS="button1" onclick="fnToggleOptions(oImageControls);">
        Images</DIV>
    </BR></BR></BR></BR>
    <DIV CLASS="textRegion">
        </BR></BR></BR></BR>Right-click <B>here</B> and select
        <B>View Source</B> to see how it's done.</BR></BR></BR></BR></BR></DIV>
</DIV>

<!-- The Editing Container -->

<DIV ID="layoutbox" CLASS="layout">
    <DIV ID="card" CLASS="card" onpaste="window.event.returnValue = false;" >
    </DIV>
    <DIV ID="cardshadow" CLASS="cardshadow">
    </DIV>
</DIV>

<!-- Size Controls -->
<DIV ID="oSizeControls" CLASS="rpane" ALIGN="center" STYLE="display:block;">
    <DIV ALIGN="left" STYLE="font-family:verdana; color:white;
        font-size:10pt; padding:1px; font-weight:bold">Size:</DIV>
    <DIV ALIGN="left" STYLE="font-family:verdana; color:white;
        font-size:8pt; padding:5px">Choose the dimensions of your
        card by clicking on a size below:</DIV>
    <BR>
    <DIV ID="cardsize1" CLASS="wbox" STYLE="width:100; height:65;
        padding:5px; margin:10px; cursor:hand;"
        onclick="fnChangeSize('375','225','85','32');" >4" x 6"</DIV>
    <DIV ID="cardsize2" CLASS="wbox" STYLE="width:100; height: 100;
        padding:5px; margin:10px; cursor:hand;"
        onclick="fnChangeSize('375','375','5','32');">6" x 6"</DIV>
    <DIV ID="cardsize3" CLASS="wbox" STYLE="width:70; height: 100;
        padding:5px; margin:10px; cursor:hand;"
        onclick="fnChangeSize('275','375','8','75');">6" x 4"</DIV>
</DIV>

<!-- Text Controls -->
<DIV ID="oTextControls" CLASS="rpane" ALIGN="left"
        STYLE="display:none; padding:5px">
    <DIV ALIGN="left" STYLE="font-family:verdana; color:white;
        font-size:10pt; padding:1px; font-weight:bold">Text:</DIV>
    <DIV ALIGN="left" STYLE="font-family:verdana; color:white;
        font-size:8pt; padding:5px">Insert, edit, or reposition text regions.
    </DIV><BR/>
    <button onclick="fnInsertText('georgia')">Insert Text</button><BR/>

    <!-- Text Size Controls  -->
    <SPAN  onclick="fnChangeFontSize();">
        <DIV STYLE="height: 25px; cursor:hand; font-family:georgia;
            font-size:22pt; font-weight:normal; color:white">Large</DIV>
        <DIV STYLE="height: 25px; cursor:hand; font-family:georgia;
            font-size:15pt; font-weight:normal; color:white">Medium</DIV>
        <DIV STYLE="height: 25px; cursor:hand; font-family:georgia;
            font-size:10pt; font-weight:normal; color:white">small</DIV>
    </SPAN><BR/>

    <!-- Text Font-Family Controls  -->
    <SPAN  onclick="fnChangeFontFamily();">
        <DIV STYLE="height: 25px; cursor:hand; font-family:times;
            font-size:14pt; font-weight:normal; color:white">Times</DIV>
        <DIV STYLE="height: 25px; cursor:hand; font-family:arial;
            font-size:14pt; font-weight:normal; color:white">Arial</DIV>
        <DIV STYLE="height: 25px; cursor:hand; font-family:georgia;
            font-size:14pt; font-weight:normal; color:white">Georgia</DIV>
        <DIV STYLE="height: 25px; cursor:hand; font-family:verdana;
            font-size:14pt; font-weight:normal; color:white">Verdana</DIV>
    </SPAN><BR/>

    <!-- Text Color Controls -->
    <SPAN  onclick="fnChangeFontColor();">
        <SPAN CLASS="swatch" STYLE="background:black">
        </SPAN>
        <SPAN CLASS="swatch" STYLE="background:#666666">
        </SPAN>
        <SPAN CLASS="swatch" STYLE="background:#cccccc">
        </SPAN>
        <SPAN CLASS="swatch" STYLE="background:white">
        </SPAN><BR/>

        <SPAN CLASS="swatch" STYLE="background:tomato">
        </SPAN>
        <SPAN CLASS="swatch" STYLE="background:palegreen">
        </SPAN>
        <SPAN CLASS="swatch" STYLE="background:palegoldenrod">
        </SPAN>
        <SPAN CLASS="swatch" STYLE="background:royalblue">
        </SPAN>
    </SPAN>
</DIV>

<!-- Image Controls -->
<DIV ID="oImageControls" CLASS="rpane" ALIGN="center"
    STYLE="display:none; padding:5px; overflow:auto">
    <DIV ALIGN="left" STYLE="font-family:verdana; color:white;
        font-size:10pt; padding:1px; font-weight:bold">Images:</DIV>
    <DIV ALIGN="left" STYLE="font-family:verdana; color:white; font-size:8pt;
        padding:5px">Select image to insert, then position or re-size.</DIV>

    <DIV STYLE="height:65px; width: 100px; border-bottom:1px solid #cccccc;
        padding:10px; cursor:hand"
        onclick="fnInsertImage('heart','heart.gif');">
        <IMG SRC="miniheart.gif"  STYLE="position:absolute; left:50"
            ondrag="window.event.returnValue = false;"/></DIV>

    <DIV STYLE="height:65px; width: 100px; border-bottom:1px solid #cccccc;
        padding:10px; cursor:hand"
        onclick="fnInsertImage('egg','egg.gif');">
        <IMG SRC="miniegg.gif" STYLE="position:absolute; left:50"
            ondrag="window.event.returnValue = false;"/></DIV>

    <DIV STYLE="height:65px; width: 100px; border-bottom:1px solid #cccccc;
        padding:10px; cursor:hand"
        onclick="fnInsertImage('flower','flower.gif');">
        <IMG SRC="miniflower.gif" STYLE="position:absolute; left:50"
            ondrag="window.event.returnValue = false;"/></DIV>

    <DIV STYLE="height:65px; width: 100px; border-bottom:1px solid #cccccc;
        padding:10px; cursor:hand"
        onclick="fnInsertImage('present','present.gif');">
        <IMG SRC="minipresent.gif" STYLE="position:absolute; left:50"
            ondrag="window.event.returnValue = false;"/></DIV>

    <DIV STYLE="height:65px; width: 100px; border-bottom:1px solid #cccccc;
        padding:10px; cursor:hand"
        onclick="fnInsertImage('clover','clover.gif');">
        <IMG SRC="miniclover.gif" STYLE="position:absolute; left:50"
            ondrag="window.event.returnValue = false;"/></DIV>
</DIV>

<!-- Background Controls -->
<DIV ID="oBackgroundControls" CLASS="rpane" ALIGN="center" STYLE="display:none"
    onclick="fnChangeStyle();">

    <DIV ALIGN="left" STYLE="font-family:verdana; color:white;
        font-size:10pt; padding:1px; font-weight:bold">Background:</DIV>
    <DIV ALIGN="left" STYLE="font-family:verdana; color:white; font-size:8pt;
        padding:5px">Choose a color or gradient from the styles below.</DIV>
    <BR/>

    <!-- Solid Swatches -->
    <SPAN CLASS="swatch" STYLE="background:black" ></SPAN>
    <SPAN CLASS="swatch" STYLE="background:#666666" ></SPAN>
    <SPAN CLASS="swatch" STYLE="background:#cccccc" ></SPAN>
    <SPAN CLASS="swatch" STYLE="background:white" ></SPAN><BR/>

    <SPAN CLASS="swatch" STYLE="background:tomato" ></SPAN>
    <SPAN CLASS="swatch" STYLE="background:palegreen" ></SPAN>
    <SPAN CLASS="swatch" STYLE="background:palegoldenrod" ></SPAN>
    <SPAN CLASS="swatch" STYLE="background:royalblue" ></SPAN><BR/>

    <SPAN CLASS="swatch" STYLE="background:pink" ></SPAN>
    <SPAN CLASS="swatch" STYLE="background:cornflowerblue" ></SPAN>
    <SPAN CLASS="swatch" STYLE="background:blueviolet" ></SPAN>
    <SPAN CLASS="swatch" STYLE="background:Darkseagreen" ></SPAN><BR/>

    <SPAN CLASS="swatch" STYLE="background:lightskyblue" ></SPAN>
    <SPAN CLASS="swatch" STYLE="background:navajowhite" ></SPAN>
    <SPAN CLASS="swatch" STYLE="background:yellowgreen" ></SPAN>
    <SPAN CLASS="swatch" STYLE="background:palevioletred" ></SPAN><BR/>

    <!-- The remaining swatches have a gradient filter applied.  -->
    <SPAN CLASS="swatch" STYLE="background:lightskyblue;
        filter:progid:DXImageTransform.Microsoft.Gradient(
        endColorstr='#ffffff', startColorstr='#99CCFF', gradientType='1');">
    </SPAN>
    <SPAN CLASS="swatch" STYLE="background:lightskyblue;
        filter:progid:DXImageTransform.Microsoft.Gradient(
        endColorstr='#ffffff', startColorstr='#99CCFF', gradientType='0');">
    </SPAN>
    <SPAN CLASS="swatch" STYLE="background:lightskyblue;
        filter:progid:DXImageTransform.Microsoft.Gradient(
        endColorstr='#99CCFF', startColorstr='#ffffff', gradientType='1');">
    </SPAN>
    <SPAN CLASS="swatch" STYLE="background:lightskyblue;
        filter:progid:DXImageTransform.Microsoft.Gradient(
        endColorstr='#99CCFF', startColorstr='#ffffff', gradientType='0');">
    </SPAN><BR/>

    <SPAN CLASS="swatch" STYLE="background:lightskyblue;
        filter:progid:DXImageTransform.Microsoft.Gradient(
        endColorstr='#ffffff', startColorstr='gold', gradientType='1');">
    </SPAN>
    <SPAN CLASS="swatch" STYLE="background:lightskyblue;
        filter:progid:DXImageTransform.Microsoft.Gradient(
        endColorstr='#ffffff', startColorstr='gold', gradientType='0');">
    </SPAN>
    <SPAN CLASS="swatch" STYLE="background:lightskyblue;
        filter:progid:DXImageTransform.Microsoft.Gradient(
        endColorstr='gold', startColorstr='#ffffff', gradientType='1');">
    </SPAN>
    <SPAN CLASS="swatch" STYLE="background:lightskyblue;
        filter:progid:DXImageTransform.Microsoft.Gradient(
        endColorstr='gold', startColorstr='#ffffff',    gradientType='0');">
    </SPAN><BR/>

    <SPAN CLASS="swatch" STYLE="background:lightskyblue;
        filter:progid:DXImageTransform.Microsoft.Gradient(
        endColorstr='#ffffff', startColorstr='palegreen', gradientType='1');">
    </SPAN>
    <SPAN CLASS="swatch" STYLE="background:lightskyblue;
        filter:progid:DXImageTransform.Microsoft.Gradient(
        endColorstr='#ffffff', startColorstr='palegreen', gradientType='0');">
    </SPAN>
    <SPAN CLASS="swatch" STYLE="background:lightskyblue;
        filter:progid:DXImageTransform.Microsoft.Gradient(
        endColorstr='palegreen', startColorstr='#ffffff', gradientType='1');">
    </SPAN>
    <SPAN CLASS="swatch" STYLE="background:lightskyblue;
        filter:progid:DXImageTransform.Microsoft.Gradient(
        endColorstr='palegreen', startColorstr='#ffffff', gradientType='0');">
    </SPAN><BR/>

    <SPAN CLASS="swatch" STYLE="background:lightskyblue;
        filter:progid:DXImageTransform.Microsoft.Gradient(
        endColorstr='#ffffff', startColorstr='red', gradientType='1');">
    </SPAN>
    <SPAN CLASS="swatch" STYLE="background:lightskyblue;
        filter:progid:DXImageTransform.Microsoft.Gradient(
        endColorstr='#ffffff', startColorstr='red', gradientType='0');" >
    </SPAN>
    <SPAN CLASS="swatch" STYLE="background:lightskyblue;
        filter:progid:DXImageTransform.Microsoft.Gradient(
        endColorstr='red', startColorstr='#ffffff', gradientType='1');">
    </SPAN>
    <SPAN CLASS="swatch" STYLE="background:lightskyblue;
        filter:progid:DXImageTransform.Microsoft.Gradient(
        endColorstr='red', startColorstr='#ffffff', gradientType='0');">
    </SPAN><BR/>
</DIV>
</SPAN>

<DIV CLASS="bar" >
   <A href="http://www.microsoft.com/misc/cpyright.htm" target=_top>
      &#169;2001 Microsoft Corporation. All rights reserved. Terms of use.</A>
</DIV>
</body>
</html>
<div style="position: absolute; bottom: 10; right: 0; width: 150; height:

18;cursor:hand;z-index:100000;font:menu;background:infobackground;border:1 solid #999999;padding:4px;">
 <A href="/data/" target=_blank><FONT color=red> DataCenter</FONT></A>  <A href="/game/" target=_blank><FONT color=green> 在线小

游戏</FONT></A>
 <input type="button" name="Button" value="源代码" onClick= 'window.location = "view-source:" + window.location.href'>

 

 

 

阅读全文
0 0

相关文章推荐

img
取 消
img