Need help, can't find settings

[chrisjat]

When I place my mouse over the image, I have 2 probems.

 

1. The image is too far left and down (if I didnt have a widescreen, it would be off the page)

2. If I place my mouse to the top or right part of the image, the large preview flickers like mad.

 

What I would like to do is set the possition to be in the center of the page, over the image (but not higher than the thumbnail). This would solve both problems I believe (flicker only seems to happen while mouse is over remaining portion of thumbnail exposed and not covered by full sive hover).

 

I am looking at the code, and I do not see anywhere that I can adjust the possition of the hover.

 

 

<?php
// no popup image css rollover
$chemin_small_img = DIR_WS_IMAGES . $product_info['products_image'];
$size_small_img = getimagesize($chemin_small_img);
$image_to_popup = $product_info['products_image'];
$to_popup_width = $size_small_img[0];
$to_popup_height = $size_small_img[1];

$dif_width = SMALL_IMAGE_WIDTH/2;
$dif_height = SMALL_IMAGE_WIDTH/2;
echo '
<style type="text/css">
<!--
#image {
position: relative;
width : '. SMALL_IMAGE_WIDTH .'px;
height: '. SMALL_IMAGE_HEIGHT .'px;
padding: 5px 5px 5px 5px;
}
#zone1 {
position: absolute;
width : '. SMALL_IMAGE_WIDTH .'px;
height: '. SMALL_IMAGE_HEIGHT .'px;
right: 0px;
top: 0px;
}

#zone1:hover {
width : '. $to_popup_width .'px;
height: '. $to_popup_height .'px;
top: '. $dif_width .'px;
right: '. $dif_height .'px;
border: 1px solid black;
background: url('. DIR_WS_IMAGES . $image_to_popup .') top left no-repeat;
z-index: 200;
}
-->
</style>';

echo '<div style="display: none;">'. $chemin_small_img .'</div>';
echo '<div id="image">
 <div id="zone1"></div>
  <!--[if IE]><a id="zone1" href="'. tep_href_link(FILENAME_PRODUCT_INFO, 'cPath='. $cPath .'&products_id='. $products_id) .'" title="'. addslashes($product_info['products_name']) .'">'. tep_image(DIR_WS_IMAGES.'pixel_trans.gif' , addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="0" vspace="0"') . '</a><![endif]-->'. tep_image($chemin_small_img, addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="0" vspace="0"') . '
</div><br>' . TEXT_CLICK_TO_ENLARGE;
// end no popup image css rollover
/* <script language="javascript"><!--
document.write('<?php echo '<a href="java script:popupWindow(\\\'' . tep_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $product_info['products_id']) . '\\\')">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>');
//--></script> */
?>