PluginProbe
Image Hotspot – Map Image Annotation / trunk
Image Hotspot – Map Image Annotation vtrunk
3.8 3.7 3.6 trunk 1.0 1.1 1.2 1.3 1.4 1.5 1.6 1.7 1.8 1.9 2.0 2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8 2.9 3.0 All 30 releases
image-map-hotspots / settings / edit-point-html.php

edit-point-html.php in Image Hotspot – Map Image Annotation trunk, at settings/edit-point-html.php

308 lines 19.4 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 <div id="imh-6310-edit-point" class="imh-6310-modal imh-6310-hide">
2 <div class="imh-6310-modal-content imh-6310-modal-lg">
3 <div class="imh-6310-modal-header">
4 Edit Marker Settings <span class="imh-6310-pro-text">In the free version, you can add a maximum of four tooltip/pointer.</span>
5 <div class="imh-6310-close">&times;</div>
6 </div>
7
8 <div class="toggle-wrap">
9 <ul class="toggle-tabs">
10 <li data-id="1" class="active-tab">Marker</li>
11 <li data-id="2">Content</li>
12 <li data-id="3">link</li>
13 </ul>
14
15 <div class="imh-6310-modal-body-form">
16 <div class="tabbed-content-wrap">
17 <div class="imh-6310-tab imh-6310-tab-1">
18 <table border="0" width="100%" cellpadding="10" cellspacing="0">
19 <tr>
20 <td class='imh-6310-width-150'><label class="imh-6310-form-label" for="icons">Marker Type:</label></td>
21 <td>
22 <input type="radio" name='icontype' class='imh-6310_icon_type' value='1' checked /> Font Awesome Icon
23 <input type="radio" name='icontype' class="imh-6310_icon_type" value='2' /> Custom Icon
24 <input type="radio" name='icontype' class='imh-6310_icon_type' value='3' /> Text
25 </td>
26 </tr>
27 <tr height="40px" class="imh-6310-form-icon imh-6310-marker imh-6310-marker-type-1">
28 <td class='imh-6310-width-150'><label class="imh-6310-form-label" for="icons">Icons:</label></td>
29 <td>
30 <input type="text" name="icons" id="icons-1" class="imh-6310-form-input lg icons-1" placeholder="fas fa-map-marker-alt" data-value="fas fa-map-marker-alt" readonly="">
31 <div class="imh-6310-plus-icons" data-id='icons-1'><i class="fas fa-plus-circle"></i></div>
32 <div class="imh-6310-minus-icons" data-id='icons-2'><i class="fas fa-minus-circle"></i></div>
33 <div class="imh-selected-icon icons-1-selected"> <i class="fas fa-map-marker-alt"></i></div>
34 </td>
35 </tr>
36 <tr height="40px" class="imh-6310-form-icon imh-6310-marker imh-6310-marker-type-1">
37 <td class='imh-6310-width-150'><label class="imh-6310-form-label" for="icons">Hover Icons:</label></td>
38 <td>
39 <input type="text" name="hovericons" id="icons-2" class="imh-6310-form-input lg icons-2" placeholder="fas fa-map-marker-alt" data-value="fas fa-map-marker-alt" readonly="">
40 <div class="imh-6310-plus-icons" data-id='icons-2'><i class="fas fa-plus-circle"></i></div>
41 <div class="imh-6310-minus-icons" data-id='icons-2'><i class="fas fa-minus-circle"></i></div>
42 <div class="imh-selected-icon icons-2-selected"> <i class="fas fa-map-marker-alt"></i></div>
43 </td>
44 </tr>
45 <tr height="40px" class="imh-6310-form-icon imh-6310-marker imh-6310-marker-type-1">
46 <td class='imh-6310-width-150'><label class="imh-6310-form-label" for="icons">Icon Color:</label></td>
47 <td>
48 <input type="text" name="imh_6310_fontawesome_icon_color" class="imh_6310_fontawesome_icon_color imh-6310-form-input imh_6310_color_picker" data-format="rgb" data-opacity="0.8" data-value="rgba(255, 28, 3, 0.99)" >
49 </td>
50 </tr>
51 <tr height="40px" class="imh-6310-form-icon imh-6310-marker imh-6310-marker-type-1">
52 <td class='imh-6310-width-150'><label class="imh-6310-form-label" for="icons">Icon Hover Color:</label></td>
53 <td>
54 <input type="text" name="imh_6310_fontawesome_icon_hover_color" class="imh-6310-form-input imh_6310_color_picker imh_6310_fontawesome_icon_hover_color" data-format="rgb" data-opacity="0.8" data-format="rgb" data-value="rgba(255, 28, 3, 0.99)">
55 </td>
56 </tr>
57 <tr height="40px" class="imh-6310-form-icon imh-6310-marker imh-6310-marker-type-1">
58 <td class='imh-6310-width-150'><label class="imh-6310-form-label" for="icons">Icon Size in Desktop:</label></td>
59 <td>
60 <input type="number" min='0' max="" name="imh-6310_icon_size" class="imh-6310-form-input imh-6310_icon_size" data-value="30">
61 </td>
62 </tr>
63 <tr height="40px" class="imh-6310-form-icon imh-6310-marker imh-6310-marker-type-1">
64 <td class='imh-6310-width-150'><label class="imh-6310-form-label" for="icons">Icon Size in iPad:</label></td>
65 <td>
66 <input type="number" min='0' max="" name="imh-6310_icon_size_in_ipad" class="imh-6310-form-input imh-6310_icon_size_in_ipad" data-value="20">
67 </td>
68 </tr>
69 <tr height="40px" class="imh-6310-form-icon imh-6310-marker imh-6310-marker-type-1">
70 <td class='imh-6310-width-150'><label class="imh-6310-form-label" for="icons">Icon Size in Mobile:</label></td>
71 <td>
72 <input type="number" min='0' max="" name="imh-6310_icon_size_in_mobile" class="imh-6310-form-input imh-6310_icon_size_in_mobile" data-value="20">
73 </td>
74 </tr>
75
76 <tr class="imh-6310-marker imh-6310-marker-type-2 imh-6310-hide">
77 <td class='imh-6310-width-150'><label class="imh-6310-form-label" for="picture">Custom Icon/Image:</label></td>
78 <td>
79 <input type="text" name="image" id="imh-6310-image-edit-1" class="imh-6310-form-input imh-6310-image-edit-1" value="">
80 <input type="button" value="Upload Image" class="imh-6310-btn-default imh-6310-icon-upload custom-icon-image" data-id="imh-6310-image-edit-1">
81 </td>
82 </tr>
83 <tr class="imh-6310-marker imh-6310-marker-type-2 imh-6310-hide">
84 <td class='imh-6310-width-150'><label class="imh-6310-form-label" for="picture">Custom Hover Icon/Image:</label></td>
85 <td>
86 <input type="text" name="hoverimage" id="imh-6310-image-edit-2" class="imh-6310-form-input imh-6310-image-edit-2" value="">
87 <input type="button" value="Upload Hover Image" class="imh-6310-btn-default imh-6310-icon-upload custom-icon-image" data-id="imh-6310-image-edit-2">
88 </td>
89 </tr>
90 <tr class="imh-6310-marker imh-6310-marker-type-2 imh-6310-hide">
91 <td class='imh-6310-width-150'><label class="imh-6310-form-label">Image / icon Size in Desktop:</label></td>
92 <td>
93 <input type="number" min='0' max="" name="img_or_icon_size" class="imh-6310-form-input img_or_icon_size" data-value= "30">
94 </td>
95 </tr>
96 <tr class="imh-6310-marker imh-6310-marker-type-2 imh-6310-hide">
97 <td class='imh-6310-width-150'><label class="imh-6310-form-label">Image / icon Size in iPad:</label></td>
98 <td>
99 <input type="number" min='0' max="" name="img_or_icon_size_in_ipad" class="imh-6310-form-input img_or_icon_size_in_ipad" data-value="25">
100 </td>
101 </tr>
102 <tr class="imh-6310-marker imh-6310-marker-type-2 imh-6310-hide">
103 <td class='imh-6310-width-150'><label class="imh-6310-form-label">Image / icon Size in Mobile:</label></td>
104 <td>
105 <input type="number" min='0' max="" name="img_or_icon_size_in_mobile" class="imh-6310-form-input img_or_icon_size_in_mobile" data-value= "30">
106 </td>
107 </tr>
108 <tr height="40px" class="imh-6310-marker imh-6310-marker-type-3 imh-6310-hide">
109 <td class='imh-6310-width-150'><label class="imh-6310-form-label" for="icons">Text:</label></td>
110 <td>
111 <input type="text" name="icons" id="imh-6310_custom_enter_text" class="imh-6310-form-input lg imh-6310_custom_enter_text" data-value="Hover here">
112 </td>
113 </tr>
114 <tr class="imh-6310-marker imh-6310-marker-type-3 imh-6310-hide">
115 <td class='imh-6310-width-150'><b>Font Size in Desktop:</b></td>
116 <td>
117 <input type="number" min="0" class="imh-6310-form-input imh_6310_custom_text_font_size" data-value="16" step="1" />
118 </td>
119 </tr>
120 <tr class="imh-6310-marker imh-6310-marker-type-3 imh-6310-hide">
121 <td><b>Font Color:</b></td>
122 <td>
123 <input type="text" class="imh-6310-form-input imh_6310_color_picker imh_6310_custom_text_font_color" data-format="rgb" data-value="rgb(255, 255, 255)">
124 </td>
125 </tr>
126 <tr class="imh-6310-marker imh-6310-marker-type-3 imh-6310-hide">
127 <td><b>Background Color:</b></td>
128 <td>
129 <input type="text" class="imh-6310-form-input imh_6310_color_picker imh_6310_custom_text_font_bg_color" data-format="rgb" data-opacity="0.8" data-value="rgba(2, 59, 92, 0.99)">
130 </td>
131 </tr>
132 </table>
133 <table border="0" width="100%" cellpadding="10" cellspacing="0">
134 <tr>
135 <td class='imh-6310-width-150'><b>Blinking Tooltip:</b></td>
136 <td>
137 <input type="radio" name='blinktype' class='imh-6310_blink_type' value='1' checked /> Yes
138 <input type="radio" name='blinktype' class="imh-6310_blink_type" value='2' />No
139 <div class="imh-6310-no-live-preview">Live Preview Not Available</div>
140 </td>
141 </tr>
142 <tr height="40px" class="imh-6310-form-icon imh_6310_icon_glow_color">
143 <td class='imh-6310-width-150'><b>Color:</b></td>
144 <td>
145 <input type="text" name="imh_6310_fontawesome_icon_glow_color" class="imh-6310-form-input imh_6310_color_picker imh_6310_fontawesome_icon_glow_color" data-format="rgb" data-opacity="0.8" data-value="rgb(255, 0, 0)">
146 <div class="imh-6310-no-live-preview">Live Preview Not Available</div>
147 </td>
148 </tr>
149 <tr>
150 <td class='imh-6310-width-150'><b>Tooltip Always Visible:</b></td>
151 <td>
152 <input type="radio" name='always_show' class='imh-6310_always_show' value='1' /> Yes
153 <input type="radio" name='always_show' class="imh-6310_always_show" value='2' checked /> No
154 </td>
155 </tr>
156 </table>
157 </div>
158 <div class="imh-6310-tab imh-6310-tab-2">
159 <tr>
160 <td class='imh-6310-width-150'><label class="imh-6310-form-label">Element Type:</label></td>
161 <td>
162 <input class='imh-6310-section-select' value='1' type="radio" name="popover_new" checked />Tooltip
163 <input class='imh-6310-section-select' value='2' type="radio" name="popover_new">Embedded code
164 <input class='imh-6310-section-select' value='3' type="radio" name="popover_new">Custom code
165 <input class='imh-6310-section-select' value='5' type="radio" name="popover_new">WooCommerce Product
166 <input class='imh-6310-section-select' value='4' type="radio" name="popover_new">Direct Link
167 <input class='imh-6310-section-select' value='6' type="radio" name="popover_new">ShortCode
168 </td>
169 </tr>
170 <div class="imh-6310-templates imh-6310-hide">
171 <table border="0" width="100%" cellpadding="10" cellspacing="0">
172 <tr class="">
173 <td class='imh-6310-width-150'><label class="imh-6310-form-label" for="picture"> Select Template:</label></td>
174 <td>
175 <div class="imh-6310-tooltip_img_section">
176 <div class="imh-6310-tooltip-img imh-6310-type-1" data-id='01'>
177 <img src="<?php echo imh_6310_plugin_dir_url . 'assets/images/1.png' ?>" data-template='template-01' alt="First Img">
178 </div>
179 <div class="imh-6310-tooltip-img imh-6310-type-2 " data-id='02'>
180 <img src="<?php echo imh_6310_plugin_dir_url . 'assets/images/2.png' ?>" alt="First Img">
181 </div>
182 <div class="imh-6310-tooltip-img imh-6310-type-1" data-id='03'>
183 <img src="<?php echo imh_6310_plugin_dir_url . 'assets/images/3.png' ?>" alt="First Img">
184 </div>
185 <div class="imh-6310-tooltip-img imh-6310-type-1" data-id='04'>
186 <img src="<?php echo imh_6310_plugin_dir_url . 'assets/images/4.png' ?>" alt="First Img">
187 </div>
188 <div class="imh-6310-tooltip-img imh-6310-type-1 " data-id='05'>
189 <img src="<?php echo imh_6310_plugin_dir_url . 'assets/images/5.png' ?>" alt="First Img">
190 </div>
191 </div>
192 </td>
193 </tr>
194 </table>
195 </div>
196 <div class="imh-6310-tooltip-link imh-6310-hide">
197 <table border="0" width="100%" cellpadding="10" cellspacing="0">
198 <tr>
199 <td class='imh-6310-width-150'><label class="imh-6310-form-label" for="picture">Hover Content:</label></td>
200 <td>
201 <input type="text" class="imh_6310_link_text">
202 </td>
203 </tr>
204
205 <tr>
206 <td class='imh-6310-width-150'><label class="imh-6310-form-label" for="picture">Open in Popup:</label></td>
207 <td>
208 <input name="imh-6310-open-popup" class="imh-6310-open-popup" value='2' type="radio" checked>Popup Embedded
209 <input name="imh-6310-open-popup" class="imh-6310-open-popup" value='3' type="radio" >Popup Custom Code
210 <input name="imh-6310-open-popup" class="imh-6310-open-popup" value='1' type="radio">No
211 </td>
212 </tr>
213 <tr class="tooltip-embedded imh-6310-hide">
214 <td class='imh-6310-width-150'><label class="imh-6310-form-label" for="picture"> Enter Embedded Code:</label></td>
215 <td>
216 <textarea class="imh_6310_custom_code_popup-html" name="imh_6310_custom_code_popup" cols="90" rows="5" ></textarea>
217 </td>
218 </tr>
219 <tr class="tooltip-custom-code imh-6310-hide">
220 <td class='imh-6310-width-150'><b>Popup Max Width</b></td>
221 <td>
222 <input type="text" name="imh_6310_custom_popup_width" id="imh_6310_custom_popup_width" class="imh_6310_custom_popup_width">
223 </td>
224 </tr>
225 <tr class="tooltip-custom-code imh-6310-hide">
226 <td class='imh-6310-width-150'><b>HTML Code</b></td>
227 <td>
228 <textarea name="imh_6310_popup_custom_html" id="imh_6310_popup_custom_html" class="imh_6310_popup_custom_html" cols="90" rows="5" data-value=''></textarea>
229 <a href="https://wpmart.org/image-hotspot-templates-01-10/" target="_blank" class='imh-6310-custom-code-url'>Get build in custom code for tooltip / popup</a>
230 </td>
231 </tr>
232 <tr class="tooltip-custom-code imh-6310-hide">
233 <td class='imh-6310-width-150'><b>CSS Code</b></td>
234 <td>
235 <textarea name="imh_6310_popup_custom_css" id="imh_6310_popup_custom_css" class="imh_6310_popup_custom_css" cols="90" rows="5" data-value=''></textarea>
236 </td>
237 </tr>
238 </table>
239 </div>
240 <?php include imh_6310_plugin_url . "settings/template-settings.php"; ?>
241
242
243 </div>
244 <div class="imh-6310-tab imh-6310-tab-3">
245 <table border="0" width="100%" cellpadding="10" cellspacing="0">
246 <tr class='imh-6310_link-type'>
247 <td class='imh-6310-width-150'><label class="imh-6310-form-label" for="picture">Do you Link Title?:</label></td>
248 <td>
249 <input class='imh-6310_link_title_type' value='1' type="radio" name="link_title">Yes
250 <input class='imh-6310_link_title_type' value='2' type="radio" name="link_title" checked>No
251 </td>
252 </tr>
253 <tr class="imh-6310_link">
254 <td class='imh-6310-width-150'><label class="imh-6310-form-label" for="picture">Link with:</label></td>
255 <td>
256 <input name="imh-6310-link-position" class="imh-6310-link-position" value='1' type="radio" checked>Tooltip
257 <input name="imh-6310-link-position" class="imh-6310-link-position" value='2' type="radio">Pointer
258 </td>
259 </tr>
260 <tr class="imh-6310_link">
261 <td class='imh-6310-width-150'><label class="imh-6310-form-label" for="picture">Title Link Url:</label></td>
262 <td>
263 <input type="text" class="imh_6310_custom_link_url" data-value= "www.wpmart.org">
264 </td>
265 </tr>
266 <tr class="imh-6310_link">
267 <td class='imh-6310-width-150'><label class="imh-6310-form-label" for="picture">Open new tab:</label></td>
268 <td>
269 <input name="imh-6310-open-new-tab" class="imh-6310-open-new-tab" value='1' type="radio" checked>Yes
270 <input name="imh-6310-open-new-tab" class="imh-6310-open-new-tab" value='2' type="radio">No
271 </td>
272 </tr>
273 </table>
274 </div>
275 </div>
276 </div>
277
278
279
280 </div>
281 <div class="imh-6310-modal-form-footer">
282 <button type="button" name="close" class="imh-6310-btn-danger imh-6310-btn-close imh-6310-pull-right">Close</button>
283 <input type="submit" name="submit" class="imh-6310-btn-primary imh-6310-pull-right imh-6310-margin-right-10 imh-6310-update-place-save" value="Done" />
284 </div>
285 <br class="imh-6310-clear" />
286 </div>
287 </div>
288
289 <!-- Icon Modal Start -->
290 <div id="imh_6310_social_icon" class="imh-6310-modal imh-6310-display-none">
291 <div class="imh-6310-modal-content imh-6310-modal-xl">
292 <input type="hidden" name="rearrange_list" id="rearrange_list" value="" />
293 <div class="imh-6310-modal-header">
294 <span class="imh-6310-action-button">Choose your Icon</span>
295 <input type="text" id="icon-filter" class="imh-6310-form-input" placeholder="Search Icon" />
296 <span class="imh-6310-font-awesome-close">&times;</span>
297 </div>
298 <div class="imh-6310-modal-body-form">
299 <ul class="imh-6310-choose-icon">
300 <?php echo imh_6310_fa_icon_list('li', '</li>'); ?>
301 </ul>
302 </div>
303 <div class="imh-6310-modal-form-footer">
304 <button type="button" name="close" id="imh-6310-font-icon-close" class="imh-6310-btn-danger imh-6310-pull-right">Close</button>
305 </div>
306 <br class="imh-6310-clear" />
307 </div>
308 </div>