# image-map-hotspots/trunk/settings/template-settings.php

Image Hotspot – Map Image Annotation, version trunk. 249 lines.

- Page: https://pluginprobe.com/plugins/image-map-hotspots/trunk/code/settings/template-settings.php
- Raw: https://pluginprobe.com/plugins/image-map-hotspots/trunk/raw/settings/template-settings.php
- Modified: 2026-08-19T04:20:38+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/image-map-hotspots/trunk/code/settings/template-settings.php#L10-L20`.

```php
<div class="imh-6310-form imh_6310_template_description imh-6310-form-03 imh-6310-form-04 imh-6310-form-05 imh-6310-hide">
  <table border="0" width="50%" cellpadding="10" cellspacing="0">
    <tr class="">
      <td class='imh-6310-width-200'><label class="imh-6310-form-label" for="picture">Add Image:</label></td>
      <td>
        <input type="text" name="image" id="imh-6310-des-img" class="imh-6310-form-input imh-6310-des-img" value="">
        <input type="button" value="Upload Image" class="imh-6310-btn-default imh-6310-icon-upload custom-icon-image" data-id="imh-6310-des-img">
      </td>
    </tr>
    <tr class="">
      <td class='imh-6310-width-200'><label class="imh-6310-form-label">Tooltip Width:</label></td>
      <td>
        <input type="text" name="tooltip-width" class="imh-6310-form-input imh-6310-tooltip-width" value="400">
      </td>
    </tr>
    <tr>
      <td class='imh-6310-width-200'><b>Description:</b></td>
      <td>
        <textarea class="imh-6310-form-input imh-6310-tooltip_discription" name="" id="imh-6310-tooltip_discription" cols="30" rows="10" data-value="Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis vero maxime beatae fugiat, aspernatur quia."></textarea>
      </td>
    </tr>
    <tr>
      <td class='imh-6310-width-200'><b>Description Font Size:</b></td>
      <td>
        <input type="number" class="imh-6310-form-input imh-6310-tooltip_discription_font_size" name="" id="imh-6310-tooltip_discription_font_size" data-value="16">
      </td>
    </tr>
    <tr>
      <td class='imh-6310-width-200'><b>Description Font Size in Mobile:</b></td>
      <td>
        <input type="number" class="imh-6310-form-input imh-6310-tooltip_discription_font_size_mobile" name="" id="imh-6310-tooltip_discription_font_size_mobile" data-value="12">
      </td>
    </tr>
    <tr>
      <td class='imh-6310-width-200'><b>Description Font Color:</b></td>
      <td>
        <input type="text" class="imh-6310-form-input imh_6310_color_picker imh-6310-tooltip_discription_font_color" data-format="rgb" data-opacity="0.8" data-value="rgb(0, 0, 0)" name="" id="imh-6310-tooltip_discription_font_color">
      </td>
    </tr>
  </table>
</div>
<div class="imh-6310-form imh_6310_font_prop imh-6310-form-01 imh-6310-form-04 imh-6310-form-03 imh-6310-form-05 imh-6310-hide">
  <table border="0" width="50%" cellpadding="10" cellspacing="0">
    <tr>
      <td class='imh-6310-width-200'><b>Font Size</b></td>
      <td>
        <input type="number" min="0" class="imh-6310-form-input imh_6310_template_font_size" step="1" data-value="16" />
      </td>
    </tr>
    <tr>
      <td class='imh-6310-width-200'><b>Mobile Font Size</b></td>
      <td>
        <input type="number" min="0" class="imh-6310-form-input imh_6310_template_font_size_mobile" step="1" data-value="14" />
      </td>
    </tr>
    <tr>
      <td><b>Font Color</b></td>
      <td>
        <input type="text" class="imh-6310-form-input imh_6310_color_picker imh_6310_template_font_color" data-format="rgb" data-value="rgb(18, 0, 0)">
      </td>
    </tr>
    <tr>
      <td><b>Background Color</b></td>
      <td>
        <input type="text" class="imh-6310-form-input imh_6310_color_picker imh_6310_template_bg_color" data-format="rgb" data-value="rgb(255, 255, 255)">
      </td>
    </tr>

  </table>
</div>

<div class="imh-6310-form imh_6310_template_embedded imh-6310-form-02 imh-6310-hide">
  <table border="0" width="100%" cellpadding="10" cellspacing="0">
    <tr>
      <td class='imh-6310-width-200'><b>Embedded Code</b></td>
      <td>
        <textarea name="imh-6310-embedded_code_link" id="imh-6310-embedded_code_link" class="imh-6310-embedded_code_link" cols="90" rows="5"></textarea>
      </td>
    </tr>
  </table>
</div>
<div class="imh-6310-form imh_6310_custom_template imh-6310-hide">
  <table border="0" width="100%" cellpadding="10" cellspacing="0">
    <tr>
      <td class='imh-6310-width-200'><b>HTML Code</b></td>
      <td>
        <textarea name="imh-6310-custome_html" id="imh-6310-custome_html" class="imh-6310-custome_html" cols="90" rows="5" data-value=''></textarea>
        <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>
      </td>
    </tr>
    <tr>
      <td class='imh-6310-width-200'><b>CSS Code</b></td>
      <td>
        <textarea name="imh-6310-custome_css" id="imh-6310-custome_css" class="imh-6310-custome_css" cols="90" rows="5" data-value=''></textarea>
      </td>
    </tr>
  </table>
</div>

<div class="imh-6310-form imh-6310-direct-link imh-6310-hide">
  How to add direct link?<br />
  <a href="https://youtu.be/oXEa9BtJIfc" target="_blank">Youtube Video</a>
</div>

<div class="imh-6310-form imh_6310_plugin_short_code imh-6310-hide">
  <table border="0" width="100%" cellpadding="10" cellspacing="0">
    <tr>
      <td class='imh-6310-width-200'><b>Other Plugin ShortCode</b></td>
      <td><input type="text" name="imh_6310_short_code" class="imh_6310_short_code" ></td>
    </tr> 
    <tr>
      <td class='imh-6310-width-200'><b>Background Color</b></td>
      <td>
        <input type="text" class="imh-6310-form-input imh_6310_color_picker imh_6310_short_code_bg_color" data-format="rgb" data-value="rgb(255, 255, 255)" name="imh_6310_short_code_bg_color">
      </td>
    </tr>
    <tr>
      <td class='imh-6310-width-200'><b>Tooltip Width</b></td>
      <td>
        <input type="text" class="imh_6310_short_code_tooltip_width" name="imh_6310_short_code_tooltip_width"  data-value="700">
      </td>
    </tr>
    <tr>
      <td class='imh-6310-width-200'><b>Tooltip Padding</b></td>
      <td>
        <input type="text" class="imh_6310_short_code_tooltip_padding" name="imh_6310_short_code_tooltip_padding"  data-value="0">
      </td>
    </tr>
  </table>
</div>

<div class="imh-6310-form imh-6310-product">
  <br>
  <div class="imh-6310-form-label">Choose Product</div>
  <?php
   $codeLoaded = false;

   add_action('plugins_loaded', function() use (&$codeLoaded) {
       $codeLoaded = true;
    });

   if(!$codeLoaded){
    imh_6310_render_products();
   }
  ?>
  <div class="imh-6310-selected-product-list"></div>

  <table border="0" width="48%" cellpadding="10" cellspacing="0" style="float: left;">
    <tr>
      <td class='imh-6310-width-200'><b>Product per row in Desktop:</b></td>
      <td>
        <input type="number" class="imh-6310-form-input imh-6310-product-per-row-desk" data-value="3" min="1" max="6">
      </td>
    </tr>
    <tr>
      <td class='imh-6310-width-200'><b>Product per row in Mobile:</b></td>
      <td>
        <input type="number" class="imh-6310-form-input imh-6310-product-per-row-mob" data-value="2" min="1" max="6">
      </td>
    </tr>
    <tr>
      <td class='imh-6310-width-200'><b>Product Box Width:</b></td>
      <td>
        <input type="number" class="imh-6310-form-input imh-6310-product-box-width" data-value="500" min="100" max="1000">
      </td>
    </tr>
    <tr>
      <td class='imh-6310-width-200'><b>Product Box Background Color:</b></td>
      <td>
        <input type="text" class="imh-6310-form-input imh_6310_color_picker imh-6310-product-box-bg-color" data-format="rgb" data-value="rgb(255, 255, 255)" name="">
      </td>
    </tr>
    <tr>
      <td class='imh-6310-width-200'><b>Product Box Hover Color:</b></td>
      <td>
        <input type="text" class="imh-6310-form-input imh_6310_color_picker imh-6310-product-box-hover-color" data-format="rgb" data-value="rgb(240, 240, 240)" name="">
      </td>
    </tr>
    <tr>
      <td class='imh-6310-width-200'><b>Product Title Font Size:</b></td>
      <td>
        <input type="number" class="imh-6310-form-input imh-6310-product-title-font-size" data-value="18" min="8" max="60" step="1">
      </td>
    </tr>
    <tr>
      <td class='imh-6310-width-200'><b>Product Title Color:</b></td>
      <td>
        <input type="text" class="imh-6310-form-input imh_6310_color_picker imh-6310-product-title-color" data-format="rgb" data-value="rgb(0, 0, 0)" name="">
      </td>
    </tr>
    <tr>
      <td class='imh-6310-width-200'><b>Product Title Hover Color:</b></td>
      <td>
        <input type="text" class="imh-6310-form-input imh_6310_color_picker imh-6310-product-title-hover-color" data-format="rgb" data-value="rgb(26, 26, 26)" name="">
      </td>
    </tr>
  </table>
  
  <table border="0" width="48%" cellpadding="10" cellspacing="0" style="float: left;">
    <tr>
      <td class='imh-6310-width-200'><b>Price Font Size:</b></td>
      <td>
        <input type="number" class="imh-6310-form-input imh-6310-product-price-font-size" data-value="16" min="8" max="60" step="1">
      </td>
    </tr>
    <tr>
      <td class='imh-6310-width-200'><b>Discount Price Color:</b></td>
      <td>
        <input type="text" class="imh-6310-form-input imh_6310_color_picker imh-6310-product-dis-price-color" data-format="rgb" data-value="rgb(255, 0, 0)" name="">
      </td>
    </tr>
    <tr>
      <td class='imh-6310-width-200'><b>Price Color:</b></td>
      <td>
        <input type="text" class="imh-6310-form-input imh_6310_color_picker imh-6310-product-price-color" data-format="rgb" data-value="rgb(4, 107, 210)" name="">
      </td>
    </tr>
    <tr>
      <td class='imh-6310-width-200'><b>Button Font Size:</b></td>
      <td>
        <input type="number" class="imh-6310-form-input imh-6310-product-button-font-size" data-value="18" min="8" max="60" step="1">
      </td>
    </tr>
    <tr>
      <td class='imh-6310-width-200'><b>Button Color:</b></td>
      <td>
        <input type="text" class="imh-6310-form-input imh_6310_color_picker imh-6310-product-button-color" data-format="rgb" data-value="rgb(255, 255, 255)" name="">
      </td>
    </tr>
    <tr>
      <td class='imh-6310-width-200'><b>Button Hover Color:</b></td>
      <td>
        <input type="text" class="imh-6310-form-input imh_6310_color_picker imh-6310-product-button-hover-color" data-format="rgb" data-value="rgb(245, 245, 245)" name="">
      </td>
    </tr>
    <tr>
      <td class='imh-6310-width-200'><b>Button Background Color:</b></td>
      <td>
        <input type="text" class="imh-6310-form-input imh_6310_color_picker imh-6310-product-button-bg-color" data-format="rgb" data-value="rgb(4, 107, 210)" name="">
      </td>
    </tr>
    <tr>
      <td class='imh-6310-width-200'><b>Button Background Hover Color:</b></td>
      <td>
        <input type="text" class="imh-6310-form-input imh_6310_color_picker imh-6310-product-button-bg-hover-color" data-format="rgb" data-value="rgb(210, 100, 72)" name="">
      </td>
    </tr>
  </table>
</div>
```