title: Displaying a value of a variable as text over an image
body: <p>So I am using the following code to place some text in various places over an image map</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
  &lt;img src="#APP_IMAGES#V4.png" usemap="#image-mapA"&gt;
  
  &lt;map name="image-mapA"&gt;
  
      &lt;area target="" alt="Strategic" title="Strategic" href="" coords="8,63,223,266" shape="rect"&gt;
      &lt;area target="" alt="Planned" title="Planned" href="" coords="314,60,531,268" shape="rect"&gt;
      &lt;area target="" alt="Blackout" title="Blackout" href="" coords="608,63,823,267" shape="rect"&gt;
      &lt;area target="" alt="Tactical" title="Tactical" href="" coords="890,63,1098,267" shape="rect"&gt;
      &lt;area target="" alt="Inflight" title="Inflight" href="" coords="225,618,1140,693" shape="rect"&gt;
  
    &lt;div class="strategic"&gt;26 February 2019&lt;/div&gt;
    &lt;div class="planned"&gt;26 December 2018&lt;/div&gt;
    &lt;div class="blackout"&gt;13 September 2018&lt;/div&gt;
    &lt;div class="inflight"&gt;Next available forum: &lt;b&gt;13 September 2018&lt;/b&gt;&lt;/div&gt;
  
  
  &lt;/map&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What I would like to do is, instead of hard coding the dates in the divs, have them as variables that are read as the page loads.</p>
  
  <p>For example the 'blackout' date would be calculated as </p>
  
  <pre><code>SELECT TRUNC(NEXT_DAY(NEXT_DAY(SYSTIMESTAMP - (12 / 24), 'WED'), 'THU') + 7) 
    FROM DUAL;
  </code></pre>
  
  <p>How would I go about doing this?</p>
  
  <p>At the moment I have an item call <code>P12_BLACKOUT</code> on the oracle apex page where the image map is displayed, but I cant seem to get the variable to display.</p>