Adding a Product Preview button

[Foster660]

G'day all...
I've nearly pulled all my hair out trying to get this idea working, so now I better raise my hand and ask for some expert assistance.

I'm trying to add a 'product preview' to the product listing page, like this -


Simple enough so far... the code I've added to get this far is by copy & paste from other sections, edited to suit what I'm doing...
from 'tpl_product_info_display.php'

<!--bof Preview Box  JD-->
<?php
if (CUSTOMERS_APPROVAL == 3 and TEXT_LOGIN_FOR_PRICE_BUTTON_REPLACE_SHOWROOM == '') {
  // do nothing
} else {
?>
<?php
    $the_button = '<canvas id="id[' . TEXT_PREFIX . $products_options_names->fields['products_options_id'] . ']" width="300" height="25" style="border:1px solid #000000;"></canvas><br> ' . zen_get_products_quantity_min_units_display((int)$_GET[
'products_id']) . '<br />' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . zen_image_preview(BUTTON_IMAGE_IN_CART, BUTTON_UPDATE_PREVIEW_ALT);
    $display_button = zen_get_buy_now_button($_GET['products_id'], $the_button);
  ?>
  <?php if ($display_qty != '' or $display_button != '') { ?>
    <div id="productPreview">
    <?php
      echo $display_button;
    ?></div>
  <?php } // display qty and button ?>
<?php } // CUSTOMERS_APPROVAL == 3 ?>
<!--eof Preview Box JD-->

from 'stylesheet.css'

#productPreview {
    float: left; //right;
    text-align: center;
    margin: 1em;
    border: 1px solid #000000;
    padding: 1em;
    }

and from 'html_output.php'

   function zen_image_preview($image, $alt = '', $parameters = '', $sec_class = '') {
    global $template, $current_page_base, $zco_notifier;
    
    //if (strtolower(IMAGE_USE_CSS_BUTTONS) == 'yes' && strlen($alt)<30) return zenCssButton($image, $alt, 'submit', $sec_class, $parameters);
    if (strtolower(IMAGE_USE_CSS_BUTTONS) == 'yes' && strlen($alt)<30) return zenCssButton($image, $alt, 'button', $sec_class, $parameters);
    
    $zco_notifier->notify('PAGE_OUTPUT_IMAGE_BUTTON');

    return $image_preview;
  }

In the last one, if I use the 2nd line with the blue text, clicking on the new preview button does nothing (as I would expect).
Edit it out, and if I use the 1st line with the red text, clicking on it operates the 'add to cart' - same as if I bought a product. (not what I wanted)

I can't for the life of me workout what happens with the 'submit' part of the code and where it proceeds to next.
I want to (instead of adding to cart), update the entered text attribute for the product, and put it into the 'canvas' element to show it as a preview in the font that I will use to make the product.

Somewhere, I've done something wrong or missed something... I'd appreciate if anyone could point to my problems!
(... and from a coding point of view, is there a way to set a trace on the code to see what's happening, maybe even some breakpoints?)

Thanks, John