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