comparison media/js/tiny_mce/plugins/advimage/image.htm @ 45:a5b4c5ce0658

Breaking down and controlling all media files, including javascript libraries.
author Brian Neal <bgneal@gmail.com>
date Fri, 19 Jun 2009 03:16:03 +0000
parents
children 149c3567fec1
comparison
equal deleted inserted replaced
44:08cd19c1ee50 45:a5b4c5ce0658
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>