colorpicker_accessible.jsp

IBM RSA下的JSF开发示例

	"#80803F", "<%= resourceBundle.getString("rte.color.Olive").trim()%>",
	"#3F803F", "<%= resourceBundle.getString("rte.color.Darkgreen").trim()%>",
	"#008250", "<%= resourceBundle.getString("rte.color.Darkteal").trim()%>",
	"#37605E", "<%= resourceBundle.getString("rte.color.Sprucegray").trim()%>",
	"#004080", "<%= resourceBundle.getString("rte.color.Slateblue").trim()%>",
	"#001FE2", "<%= resourceBundle.getString("rte.color.Navyblue").trim()%>",
	"#4040C2", "<%= resourceBundle.getString("rte.color.Blueviolet").trim()%>",
	"#4000A2", "<%= resourceBundle.getString("rte.color.Amethyst").trim()%>",
	"#6000A1", "<%= resourceBundle.getString("rte.color.Darkredviolet").trim()%>",
	"#A1009F", "<%= resourceBundle.getString("rte.color.Deepmagenta").trim()%>",
	"#DF007F", "<%= resourceBundle.getString("rte.color.Lightburgundy").trim()%>",
	"#C20041", "<%= resourceBundle.getString("rte.color.Cherryred").trim()%>",
	"#8F8F8F", "<%= resourceBundle.getString("rte.color.40%gray").trim()%>",
	"#A00000", "<%= resourceBundle.getString("rte.color.arkcrimson").trim()%>",
	"#E10000", "<%= resourceBundle.getString("rte.color.Darkred").trim()%>",
	"#A13F00", "<%= resourceBundle.getString("rte.color.Hazelnut").trim()%>",
	"#626200", "<%= resourceBundle.getString("rte.color.Darkolive").trim()%>",
	"#006000", "<%= resourceBundle.getString("rte.color.Emerald").trim()%>",
	"#00603C", "<%= resourceBundle.getString("rte.color.Malachite").trim()%>",
	"#004041", "<%= resourceBundle.getString("rte.color.Darkspruce").trim()%>",
	"#002F80", "<%= resourceBundle.getString("rte.color.Steelblue").trim()%>",
	"#424282", "<%= resourceBundle.getString("rte.color.Atlanticgray").trim()%>",
	"#2020A0", "<%= resourceBundle.getString("rte.color.Iris").trim()%>",
	"#2200A1", "<%= resourceBundle.getString("rte.color.Grape").trim()%>",
	"#400080", "<%= resourceBundle.getString("rte.color.Plum").trim()%>",
	"#602162", "<%= resourceBundle.getString("rte.color.Plumgray").trim()%>",
	"#C0007F", "<%= resourceBundle.getString("rte.color.Burgundy").trim()%>",
	"#9F000F", "<%= resourceBundle.getString("rte.color.Cranberry").trim()%>",
	"#5F5F5F", "<%= resourceBundle.getString("rte.color.60%gray").trim()%>",
	"#600000", "<%= resourceBundle.getString("rte.color.Mahogany").trim()%>",
	"#C21212", "<%= resourceBundle.getString("rte.color.Brick").trim()%>",
	"#824200", "<%= resourceBundle.getString("rte.color.Darkbrown").trim()%>",
	"#424200", "<%= resourceBundle.getString("rte.color.Deepolive").trim()%>",
	"#004200", "<%= resourceBundle.getString("rte.color.Darkemerald").trim()%>",
	"#004023", "<%= resourceBundle.getString("rte.color.Evergreen").trim()%>",
	"#00323F", "<%= resourceBundle.getString("rte.color.Balticblue").trim()%>",
	"#002060", "<%= resourceBundle.getString("rte.color.Bluedenim").trim()%>",
	"#0020C2", "<%= resourceBundle.getString("rte.color.Cobaltblue").trim()%>",
	"#2222C0", "<%= resourceBundle.getString("rte.color.Darkiris").trim()%>",
	"#624181", "<%= resourceBundle.getString("rte.color.Purplegray").trim()%>",
	"#1F007F", "<%= resourceBundle.getString("rte.color.Darkplum").trim()%>",
	"#622152", "<%= resourceBundle.getString("rte.color.Burgundygray").trim()%>",
	"#820040", "<%= resourceBundle.getString("rte.color.Darkburgundy").trim()%>",
	"#813F62", "<%= resourceBundle.getString("rte.color.Darkrosegray").trim()%>",
	"#4F4F4F", "<%= resourceBundle.getString("rte.color.70%gray").trim()%>",
	"#400000", "<%= resourceBundle.getString("rte.color.Chestnut").trim()%>",
	"#A11F12", "<%= resourceBundle.getString("rte.color.Terracotta").trim()%>",
	"#604200", "<%= resourceBundle.getString("rte.color.Umber").trim()%>",
	"#212100", "<%= resourceBundle.getString("rte.color.Amazon").trim()%>",
	"#002100", "<%= resourceBundle.getString("rte.color.Peacockgreen").trim()%>",
	"#00201F", "<%= resourceBundle.getString("rte.color.Pine").trim()%>",
	"#002041", "<%= resourceBundle.getString("rte.color.Metallicblue").trim()%>",
	"#00204F", "<%= resourceBundle.getString("rte.color.Darkslateblue").trim()%>",
	"#0000E0", "<%= resourceBundle.getString("rte.color.Royalblue").trim()%>",
	"#0000A1", "<%= resourceBundle.getString("rte.color.Lapis").trim()%>",
	"#000061", "<%= resourceBundle.getString("rte.color.Darkgrape").trim()%>",
	"#1F0062", "<%= resourceBundle.getString("rte.color.Aubergine").trim()%>",
	"#40005F", "<%= resourceBundle.getString("rte.color.Darkplumred").trim()%>",
	"#620042", "<%= resourceBundle.getString("rte.color.Raspberry").trim()%>",
	"#620012", "<%= resourceBundle.getString("rte.color.Deepscarlet").trim()%>",
	"#4F4F4F", "<%= resourceBundle.getString("rte.color.80%gray").trim()%>",
	"#7F604F", "<%= resourceBundle.getString("rte.color.Darkredgray").trim()%>",
	"#E0A175", "<%= resourceBundle.getString("rte.color.Tan").trim()%>",
	"#D2B06A", "<%= resourceBundle.getString("rte.color.Khaki").trim()%>",
	"#C0C27C", "<%= resourceBundle.getString("rte.color.Putty").trim()%>",
	"#3F621F", "<%= resourceBundle.getString("rte.color.Jade").trim()%>",
	"#81C097", "<%= resourceBundle.getString("rte.color.Greengray").trim()%>",
	"#7FC2BC", "<%= resourceBundle.getString("rte.color.Balticgray").trim()%>",
	"#71B2CF", "<%= resourceBundle.getString("rte.color.Bluegray").trim()%>",
	"#B1B1D2", "<%= resourceBundle.getString("rte.color.Raincloud").trim()%>",
	"#9F9FE0", "<%= resourceBundle.getString("rte.color.Lilacgray").trim()%>",
	"#C0A1E0", "<%= resourceBundle.getString("rte.color.Lightpurplegray").trim()%>",
	"#E29FDE", "<%= resourceBundle.getString("rte.color.Lightmauve").trim()%>",
	"#EF91EB", "<%= resourceBundle.getString("rte.color.Lightplumgray").trim()%>",
	"#E29FC8", "<%= resourceBundle.getString("rte.color.Lightburgundygray").trim()%>",
	"#F18FBC", "<%= resourceBundle.getString("rte.color.Rosegray").trim()%>",
	"#603181", "<%= resourceBundle.getString("rte.color.Mauve").trim()%>");



// Setting the title on the element as title="javascript:colorArray[idx];" works for WindowEyes (reads the value
// of colorArray[idx] but on mouse over the javascript is NOT executed and "javascript:colorArray[idx]" is displayed.
// Use this to set the title from the array (easier than entering title entries for already exising areas
function setMapInfo() {
	var mapAreas = document.getElementById("colorMap").areas;
	var cLen = mapAreas.length;
	var colorArrayIdx = 1;
	for (var i=0; i<cLen; i++) {
		if (mapAreas[i].tagName == "AREA") {
			mapAreas[i].title=colorArray[colorArrayIdx];
			mapAreas[i].id=i; //colorArray[(colorArrayIdx-1)];
			//alert("mapAreas[" + i+"].title "+ mapAreas[i].title + " map.Areas["+i+"].id " + mapAreas[i].id);
			colorArrayIdx +=2;
		}

	}
}


var oldElem;
function IBM_RTE_selectColor(clrValue) {

    parent.close();

    var clrType = "<%= clrType %>";

    this.opener.IBM_RTE_getDocument("<%= editorName %>").execCommand(clrType, false, clrValue);
    if (oldElem) {
        oldElem.style.borderWidth = 1;
    }
    //event.srcElement.style.borderWidth = 2;
    //oldElem = event.srcElement;
}


function showColor(clrValue, clrName) {

    var iColor = document.getElementById('colorInput');
    iColor.value=clrName + " - " + clrValue;

    var colorBlock = document.getElementById('colorBlock');
    colorBlock.style.backgroundColor=clrValue;
}

</script>


<body dir="<%= tableDir %>" lang="<%= langToUse %>" leftMargin="0" rightMargin="0" topMargin="3" bottomMargin="0" marginheight="0" marginwidth="0" onload="setMapInfo();">

 <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
   <tr>
       <td width="100%">
           <table cellpadding="0" cellspacing="0">
             <tr>
                 <td>&nbsp;&nbsp;<label for="colorInput" class="portlet-form-field-label"><%= resourceBundle.getString("SelectedColorValue") %></label></td>
             </tr>
             <tr>      
                 <td>&nbsp;&nbsp;<input type="text" id="colorInput" readonly=true tabindex="30" size="50">&nbsp;&nbsp;</td>
                 <td><span id="colorBlock">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></td>
             </tr>
           </table>
       </td>
   </tr>

   <tr>
      <td width="100%" align="middle">
           <table cellpadding="0" cellspacing="0">
             <tr><td>



  <img id="ColorMapImage" align="middle" src="<%= img %>/ColorPicker.gif" border="0" width="300" height="280" usemap="#colors" style="position:relative">

    <MAP name="colors"  id="colorMap">

<!-- 1st row -->

	<AREA shape="rect" id="row1"
		href="javascript:IBM_RTE_selectColor(colorArray[0]);"  coords="2,4,18,20" tabindex="101" 
            onfocus="showColor(colorArray[0], colorArray[1]);" onmouseover="showColor(colorArray[0], colorArray[1]);" >
	<AREA shape="rect" 
		href="javascript:IBM_RTE_selectColor(colorArray[2]);"  coords="20,4,36,20" tabindex="102" 
            onfocus="showColor(colorArray[2], colorArray[3]);" onmouseover="showColor(colorArray[2], colorArray[3]);" >
	<AREA shape="rect" 
		href="javascript:IBM_RTE_selectColor(colorArray[4]);"  coords="40,4,56,20" tabindex="103" 
            onfocus="showColor(colorArray[4], colorArray[5]);" onmouseover="showColor(colorArray[4], colorArray[5]);" >
	<AREA shape="rect" 
		href="javascript:IBM_RTE_selectColor(colorArray[6]);"  coords="58,4,74,20" tabindex="104" 
            onfocus="showColor(colorArray[6], colorArray[7]);" onmouseover="showColor(colorArray[6], colorArray[7]);" >
	<AREA shape="rect" 
		href="javascript:IBM_RTE_selectColor(colorArray[8]);"  coords="78,4,94,20" tabindex="105" 
            onfocus="showColor(colorArray[8], colorArray[9]);" onmouseover="showColor(colorArray[8], colorArray[9]);" >
	<AREA shape="rect" 
		href="javascript:IBM_RTE_selectColor(colorArray[10]);"  coords="96,4,112,20" tabindex="106" 
            onfocus="showColor(colorArray[10], colorArray[11]);" onmouseover="showColor(colorArray[10], colorArray[11]);" >
	<AREA shape="rect" 
		href="javascript:IBM_RTE_selectColor(colorArray[12]);"  coords="114,4,130,20" tabindex="107" 
            onfocus="showColor(colorArray[12], colorArray[13]);" onmouseover="showColor(colorArray[12], colorArray[13]);" >
	<AREA shape="rect" 
		href="javascript:IBM_RTE_selectColor(colorArray[14]);"  coords="132,4,148,20" tabindex="108" 
            onfocus="showColor(colorArray[14], colorArray[15]);" onmouseover="showColor(colorArray[14], colorArray[15]);" >
	<AREA shape="rect" 
		href="javascript:IBM_RTE_selectColor(colorArray[16]);"  coords="150,4,166,20" tabindex="109" 
            onfocus="showColor(colorArray[16], colorArray[17]);" onmouseover="showColor(colorArray[16], colorArray[17]);" >
	<AREA shape="rect" 
		href="javascript:IBM_RTE_selectColor(colorArray[18]);"  coords="170,4,186,20" tabindex="110" 
            onfocus="showColor(colorArray[18], colorArray[19]);" onmouseover="showColor(colorArray[18], colorArray[19]);" >
	<AREA shape="rect" 
		href="javascript:IBM_RTE_selectColor(colorArray[20]);"  coords="188,4,204,20" tabindex="111"