/webroot/js/tinymce/plugins/advimage/image.htm
[return to app]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"> </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.selectedIn
dex].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> </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"> </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"> </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"> </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>
238