app/soc/content/js/tiny_mce/plugins/advimage/image.htm
changeset 126 6186c115a210
equal deleted inserted replaced
125:155f43a0fa68 126:6186c115a210
       
     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
       
     2 <html xmlns="http://www.w3.org/1999/xhtml">
       
     3 <head>
       
     4 	<title>{#advimage_dlg.dialog_title}</title>
       
     5 	<script type="text/javascript" src="../../tiny_mce_popup.js"></script>
       
     6 	<script type="text/javascript" src="../../utils/mctabs.js"></script>
       
     7 	<script type="text/javascript" src="../../utils/form_utils.js"></script>
       
     8 	<script type="text/javascript" src="../../utils/validate.js"></script>
       
     9 	<script type="text/javascript" src="../../utils/editable_selects.js"></script>
       
    10 	<script type="text/javascript" src="js/image.js"></script>
       
    11 	<link href="css/advimage.css" rel="stylesheet" type="text/css" />
       
    12 	<base target="_self" />
       
    13 </head>
       
    14 <body id="advimage" style="display: none">
       
    15     <form onsubmit="ImageDialog.insert();return false;" action="#"> 
       
    16 		<div class="tabs">
       
    17 			<ul>
       
    18 				<li id="general_tab" class="current"><span><a href="javascript:mcTabs.displayTab('general_tab','general_panel');" onmousedown="return false;">{#advimage_dlg.tab_general}</a></span></li>
       
    19 				<li id="appearance_tab"><span><a href="javascript:mcTabs.displayTab('appearance_tab','appearance_panel');" onmousedown="return false;">{#advimage_dlg.tab_appearance}</a></span></li>
       
    20 				<li id="advanced_tab"><span><a href="javascript:mcTabs.displayTab('advanced_tab','advanced_panel');" onmousedown="return false;">{#advimage_dlg.tab_advanced}</a></span></li>
       
    21 			</ul>
       
    22 		</div>
       
    23 
       
    24 		<div class="panel_wrapper">
       
    25 			<div id="general_panel" class="panel current">
       
    26 				<fieldset>
       
    27 						<legend>{#advimage_dlg.general}</legend>
       
    28 
       
    29 						<table class="properties">
       
    30 							<tr>
       
    31 								<td class="column1"><label id="srclabel" for="src">{#advimage_dlg.src}</label></td>
       
    32 								<td colspan="2"><table border="0" cellspacing="0" cellpadding="0">
       
    33 									<tr> 
       
    34 									  <td><input name="src" type="text" id="src" value="" class="mceFocus" onchange="ImageDialog.showPreviewImage(this.value);" /></td> 
       
    35 									  <td id="srcbrowsercontainer">&nbsp;</td>
       
    36 									</tr>
       
    37 								  </table></td>
       
    38 							</tr>
       
    39 							<tr>
       
    40 								<td><label for="src_list">{#advimage_dlg.image_list}</label></td>
       
    41 								<td><select id="src_list" name="src_list" onchange="document.getElementById('src').value=this.options[this.selectedIndex].value;document.getElementById('alt').value=this.options[this.selectedIndex].text;document.getElementById('title').value=this.options[this.selectedIndex].text;ImageDialog.showPreviewImage(this.options[this.selectedIndex].value);"></select></td>
       
    42 							</tr>
       
    43 							<tr> 
       
    44 								<td class="column1"><label id="altlabel" for="alt">{#advimage_dlg.alt}</label></td> 
       
    45 								<td colspan="2"><input id="alt" name="alt" type="text" value="" /></td> 
       
    46 							</tr> 
       
    47 							<tr> 
       
    48 								<td class="column1"><label id="titlelabel" for="title">{#advimage_dlg.title}</label></td> 
       
    49 								<td colspan="2"><input id="title" name="title" type="text" value="" /></td> 
       
    50 							</tr>
       
    51 						</table>
       
    52 				</fieldset>
       
    53 
       
    54 				<fieldset>
       
    55 					<legend>{#advimage_dlg.preview}</legend>
       
    56 					<div id="prev"></div>
       
    57 				</fieldset>
       
    58 			</div>
       
    59 
       
    60 			<div id="appearance_panel" class="panel">
       
    61 				<fieldset>
       
    62 					<legend>{#advimage_dlg.tab_appearance}</legend>
       
    63 
       
    64 					<table border="0" cellpadding="4" cellspacing="0">
       
    65 						<tr> 
       
    66 							<td class="column1"><label id="alignlabel" for="align">{#advimage_dlg.align}</label></td> 
       
    67 							<td><select id="align" name="align" onchange="ImageDialog.updateStyle('align');ImageDialog.changeAppearance();"> 
       
    68 									<option value="">{#not_set}</option> 
       
    69 									<option value="baseline">{#advimage_dlg.align_baseline}</option>
       
    70 									<option value="top">{#advimage_dlg.align_top}</option>
       
    71 									<option value="middle">{#advimage_dlg.align_middle}</option>
       
    72 									<option value="bottom">{#advimage_dlg.align_bottom}</option>
       
    73 									<option value="text-top">{#advimage_dlg.align_texttop}</option>
       
    74 									<option value="text-bottom">{#advimage_dlg.align_textbottom}</option>
       
    75 									<option value="left">{#advimage_dlg.align_left}</option>
       
    76 									<option value="right">{#advimage_dlg.align_right}</option>
       
    77 								</select> 
       
    78 							</td>
       
    79 							<td rowspan="6" valign="top">
       
    80 								<div class="alignPreview">
       
    81 									<img id="alignSampleImg" src="img/sample.gif" alt="{#advimage_dlg.example_img}" />
       
    82 									Lorem ipsum, Dolor sit amet, consectetuer adipiscing loreum ipsum edipiscing elit, sed diam
       
    83 									nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Loreum ipsum
       
    84 									edipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
       
    85 									erat volutpat.
       
    86 								</div>
       
    87 							</td>
       
    88 						</tr>
       
    89 
       
    90 						<tr>
       
    91 							<td class="column1"><label id="widthlabel" for="width">{#advimage_dlg.dimensions}</label></td>
       
    92 							<td nowrap="nowrap">
       
    93 								<input name="width" type="text" id="width" value="" size="5" maxlength="5" class="size" onchange="ImageDialog.changeHeight();" /> x 
       
    94 								<input name="height" type="text" id="height" value="" size="5" maxlength="5" class="size" onchange="ImageDialog.changeWidth();" /> px
       
    95 							</td>
       
    96 						</tr>
       
    97 
       
    98 						<tr>
       
    99 							<td>&nbsp;</td>
       
   100 							<td><table border="0" cellpadding="0" cellspacing="0">
       
   101 									<tr>
       
   102 										<td><input id="constrain" type="checkbox" name="constrain" class="checkbox" /></td>
       
   103 										<td><label id="constrainlabel" for="constrain">{#advimage_dlg.constrain_proportions}</label></td>
       
   104 									</tr>
       
   105 								</table></td>
       
   106 						</tr>
       
   107 
       
   108 						<tr>
       
   109 							<td class="column1"><label id="vspacelabel" for="vspace">{#advimage_dlg.vspace}</label></td> 
       
   110 							<td><input name="vspace" type="text" id="vspace" value="" size="3" maxlength="3" class="number" onchange="ImageDialog.updateStyle('vspace');ImageDialog.changeAppearance();" onblur="ImageDialog.updateStyle('vspace');ImageDialog.changeAppearance();" />
       
   111 							</td>
       
   112 						</tr>
       
   113 
       
   114 						<tr> 
       
   115 							<td class="column1"><label id="hspacelabel" for="hspace">{#advimage_dlg.hspace}</label></td> 
       
   116 							<td><input name="hspace" type="text" id="hspace" value="" size="3" maxlength="3" class="number" onchange="ImageDialog.updateStyle('hspace');ImageDialog.changeAppearance();" onblur="ImageDialog.updateStyle('hspace');ImageDialog.changeAppearance();" /></td> 
       
   117 						</tr>
       
   118 
       
   119 						<tr>
       
   120 							<td class="column1"><label id="borderlabel" for="border">{#advimage_dlg.border}</label></td> 
       
   121 							<td><input id="border" name="border" type="text" value="" size="3" maxlength="3" class="number" onchange="ImageDialog.updateStyle('border');ImageDialog.changeAppearance();" onblur="ImageDialog.updateStyle('border');ImageDialog.changeAppearance();" /></td> 
       
   122 						</tr>
       
   123 
       
   124 						<tr>
       
   125 							<td><label for="class_list">{#class_name}</label></td>
       
   126 							<td colspan="2"><select id="class_list" name="class_list" class="mceEditableSelect"></select></td>
       
   127 						</tr>
       
   128 
       
   129 						<tr>
       
   130 							<td class="column1"><label id="stylelabel" for="style">{#advimage_dlg.style}</label></td> 
       
   131 							<td colspan="2"><input id="style" name="style" type="text" value="" onchange="ImageDialog.changeAppearance();" /></td> 
       
   132 						</tr>
       
   133 
       
   134 						<!-- <tr>
       
   135 							<td class="column1"><label id="classeslabel" for="classes">{#advimage_dlg.classes}</label></td> 
       
   136 							<td colspan="2"><input id="classes" name="classes" type="text" value="" onchange="selectByValue(this.form,'classlist',this.value,true);" /></td> 
       
   137 						</tr> -->
       
   138 					</table>
       
   139 				</fieldset>
       
   140 			</div>
       
   141 
       
   142 			<div id="advanced_panel" class="panel">
       
   143 				<fieldset>
       
   144 					<legend>{#advimage_dlg.swap_image}</legend>
       
   145 
       
   146 					<input type="checkbox" id="onmousemovecheck" name="onmousemovecheck" class="checkbox" onclick="ImageDialog.setSwapImage(this.checked);" />
       
   147 					<label id="onmousemovechecklabel" for="onmousemovecheck">{#advimage_dlg.alt_image}</label>
       
   148 
       
   149 					<table border="0" cellpadding="4" cellspacing="0" width="100%">
       
   150 							<tr>
       
   151 								<td class="column1"><label id="onmouseoversrclabel" for="onmouseoversrc">{#advimage_dlg.mouseover}</label></td> 
       
   152 								<td><table border="0" cellspacing="0" cellpadding="0"> 
       
   153 									<tr> 
       
   154 									  <td><input id="onmouseoversrc" name="onmouseoversrc" type="text" value="" /></td> 
       
   155 									  <td id="onmouseoversrccontainer">&nbsp;</td>
       
   156 									</tr>
       
   157 								  </table></td>
       
   158 							</tr>
       
   159 							<tr>
       
   160 								<td><label for="over_list">{#advimage_dlg.image_list}</label></td>
       
   161 								<td><select id="over_list" name="over_list" onchange="document.getElementById('onmouseoversrc').value=this.options[this.selectedIndex].value;"></select></td>
       
   162 							</tr>
       
   163 							<tr> 
       
   164 								<td class="column1"><label id="onmouseoutsrclabel" for="onmouseoutsrc">{#advimage_dlg.mouseout}</label></td> 
       
   165 								<td class="column2"><table border="0" cellspacing="0" cellpadding="0"> 
       
   166 									<tr> 
       
   167 									  <td><input id="onmouseoutsrc" name="onmouseoutsrc" type="text" value="" /></td> 
       
   168 									  <td id="onmouseoutsrccontainer">&nbsp;</td>
       
   169 									</tr> 
       
   170 								  </table></td> 
       
   171 							</tr>
       
   172 							<tr>
       
   173 								<td><label for="out_list">{#advimage_dlg.image_list}</label></td>
       
   174 								<td><select id="out_list" name="out_list" onchange="document.getElementById('onmouseoutsrc').value=this.options[this.selectedIndex].value;"></select></td>
       
   175 							</tr>
       
   176 					</table>
       
   177 				</fieldset>
       
   178 
       
   179 				<fieldset>
       
   180 					<legend>{#advimage_dlg.misc}</legend>
       
   181 
       
   182 					<table border="0" cellpadding="4" cellspacing="0">
       
   183 						<tr>
       
   184 							<td class="column1"><label id="idlabel" for="id">{#advimage_dlg.id}</label></td> 
       
   185 							<td><input id="id" name="id" type="text" value="" /></td> 
       
   186 						</tr>
       
   187 
       
   188 						<tr>
       
   189 							<td class="column1"><label id="dirlabel" for="dir">{#advimage_dlg.langdir}</label></td> 
       
   190 							<td>
       
   191 								<select id="dir" name="dir" onchange="ImageDialog.changeAppearance();"> 
       
   192 										<option value="">{#not_set}</option> 
       
   193 										<option value="ltr">{#advimage_dlg.ltr}</option> 
       
   194 										<option value="rtl">{#advimage_dlg.rtl}</option> 
       
   195 								</select>
       
   196 							</td> 
       
   197 						</tr>
       
   198 
       
   199 						<tr>
       
   200 							<td class="column1"><label id="langlabel" for="lang">{#advimage_dlg.langcode}</label></td> 
       
   201 							<td>
       
   202 								<input id="lang" name="lang" type="text" value="" />
       
   203 							</td> 
       
   204 						</tr>
       
   205 
       
   206 						<tr>
       
   207 							<td class="column1"><label id="usemaplabel" for="usemap">{#advimage_dlg.map}</label></td> 
       
   208 							<td>
       
   209 								<input id="usemap" name="usemap" type="text" value="" />
       
   210 							</td> 
       
   211 						</tr>
       
   212 
       
   213 						<tr>
       
   214 							<td class="column1"><label id="longdesclabel" for="longdesc">{#advimage_dlg.long_desc}</label></td>
       
   215 							<td><table border="0" cellspacing="0" cellpadding="0">
       
   216 									<tr>
       
   217 									  <td><input id="longdesc" name="longdesc" type="text" value="" /></td>
       
   218 									  <td id="longdesccontainer">&nbsp;</td>
       
   219 									</tr>
       
   220 								</table></td> 
       
   221 						</tr>
       
   222 					</table>
       
   223 				</fieldset>
       
   224 			</div>
       
   225 		</div>
       
   226 
       
   227 		<div class="mceActionPanel">
       
   228 			<div style="float: left">
       
   229 				<input type="submit" id="insert" name="insert" value="{#insert}" />
       
   230 			</div>
       
   231 
       
   232 			<div style="float: right">
       
   233 				<input type="button" id="cancel" name="cancel" value="{#cancel}" onclick="tinyMCEPopup.close();" />
       
   234 			</div>
       
   235 		</div>
       
   236     </form>
       
   237 </body> 
       
   238 </html>