title: Pass dynamic variables to Javascript function?
body: <pre><code>&lt;?php if ($option['type'] == 'select') { ?&gt;
              &lt;div id="option-&lt;?php echo $option['product_option_id']; ?&gt;" class="option"&gt;
                &lt;?php if ($option['required']) { ?&gt;
                &lt;span class="required"&gt;*&lt;/span&gt;
                &lt;?php } ?&gt;
                &lt;b&gt;&lt;?php echo $option['name']; ?&gt;:&lt;/b&gt;&lt;br /&gt;
                &lt;select name="option[&lt;?php echo $option['product_option_id']; ?&gt;]"&gt;
                  &lt;!-- &lt;option value=""&gt;&lt;?php echo $text_select; ?&gt;&lt;/option&gt; --&gt;
                  &lt;?php foreach ($option['option_value'] as $option_value) { ?&gt;
                  &lt;option value="&lt;?php echo $option_value['product_option_value_id']; ?&gt;"&gt;&lt;?php echo $option_value['name']; ?&gt;
                  &lt;?php if ($option_value['price']) { ?&gt;
                  (&lt;?php echo $option_value['price_prefix']; ?&gt;&lt;?php echo $option_value['price']; ?&gt;)
                  &lt;?php } ?&gt;
                  &lt;/option&gt;
                  &lt;?php } ?&gt;
                &lt;/select&gt;
                &lt;?php if ($option_value['image'] != 'image/' &amp;&amp; $option_value['image'] != 'image/no_image.jpg' ) { ?&gt;&lt;?php 
      list($simgwidth) = getimagesize($option_value['image']);
      $selectimgpos = $simgwidth + 35; 
      ?&gt;
  &lt;center&gt;
  &lt;span id="img&lt;?php echo $option['product_option_id']; ?&gt;" style="position: absolute; display: none; left: -&lt;?php echo $selectimgpos; ?&gt;px; background: #eee; padding: 10px; border: 1px dotted #666; z-index: 90;"&gt;
  &lt;img src="&lt;?php echo $option_value['image']; ?&gt;"&gt;
  &lt;br /&gt;&lt;strong&gt;&lt;?php echo $option['name']; ?&gt;&lt;/strong&gt;
  &lt;/span&gt;&lt;/center&gt;&lt;?php } ?&gt;
              &lt;/div&gt;
              &lt;br /&gt;
  &lt;?php } ?&gt;
  </code></pre>
  
  <p>Hi, I am new to programming and I need help with the above section of code. Normally this code just displays a Select dropdown box with options.</p>
  
  <p>I've modified it by adding an extra image at the bottom inside a span. I've also calculated the width and repositioned the image based on its -width.</p>
  
  <p>What I'd like to do next is have a javascript where if the user hovers or onFocus on the Select box will show the image inside the span. And if they change the select box, the image will change based on what they selected. I'm thinking onBlur to hide the pic after.</p>
  
  <p>I've found some javascripts to do this but I need to pass dynamic variables from the php.</p>
  
  <p>I found this javascript, but the code doesn't let me pass variables.</p>
  
  <pre><code>         &lt;script type="text/javascript"&gt;
  function swapImage(){
      var image = document.getElementById("imageToSwap");
      var dropd = document.getElementById("dd");
      image.src ="images/"+dropd.value+".jpg";    
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>Due to constantly changing IDs generated by php I can't be using static variables.</p>
  
  <p>Any help would be appreciated. Thanks all.</p>
  
  <p>PS: $option_value['image'] is a php array. How can I display the first or last element in this array? Normally it's something like array_[n] but this one already has brackets? $option_value['image[0]'] ??</p>