Put an image on top of another one with php and html - php

Question

I have a magento store with a custom attribute called free shipping
Right now this renders a free shipping icon below the product itself
But I want to make it more appealing by putting a new button on top of the product itself.
Here is the php code for the magento page:
Sample of how a page is rendered:
http://www.theprinterdepo.com/lexmark-optra-t640-printer-20g0100
I need to modify the code in gallery.phtml to put the icon on TOP of the product, RIGHT top corner.
I will modify the image to be transparent.
This is gallery.phtml file:
<?php $_width=$this->getImageWidth() ?>
<div class="product-image-popup" style="width:<?php echo $_width; ?>px;">
<p class="a-right"><?php echo $this->__('Close Window') ?></p>
<?php if($this->getPreviusImageUrl() || $this->getNextImageUrl()): ?>
<div class="nav">
<?php if($_prevUrl = $this->getPreviusImageUrl()): ?>
« <?php echo $this->__('Prev') ?>
<?php endif; ?>
<?php if($_nextUrl = $this->getNextImageUrl()): ?>
<?php echo $this->__('Next') ?> »
<?php endif; ?>
</div>
<?php endif; ?>
<?php if($_imageTitle = $this->htmlEscape($this->getCurrentImage()->getLabel())): ?>
<h1 class="image-label"><?php echo $_imageTitle ?></h1>
<?php endif; ?>
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $this->getImageFile()); ?>"<?php if($_width): ?> width="<?php echo $_width ?>"<?php endif; ?> alt="<?php echo $this->htmlEscape($this->getCurrentImage()->getLabel()) ?>" title="<?php echo $this->htmlEscape($this->getCurrentImage()->getLabel()) ?>" id="product-gallery-image" class="image" />
<?php if($this->getPreviusImageUrl() || $this->getNextImageUrl()): ?>
<div class="nav">
<?php if($_prevUrl = $this->getPreviusImageUrl()): ?>
« <?php echo $this->__('Prev') ?>
<?php endif; ?>
<?php if($_nextUrl = $this->getNextImageUrl()): ?>
<?php echo $this->__('Next') ?> »
<?php endif; ?>
</div>
<?php endif; ?>
<p class="a-right"><?php echo $this->__('Close Window') ?></p>
</div>
<script type="text/javascript">
//<![CDATA[
Event.observe(window, 'load', function(){
var demensions = $('product-gallery-image').getDimensions();
window.resizeTo(demensions.width+90, demensions.height+210);
});
//]]>
</script>
This is view.phtml
<?php $Deal = $_product->getResource()->getAttribute('deal')->getFrontend()->getValue($_product);?>
<?php $onSale = $_product->getResource()->getAttribute('on_sale')->getFrontend()->getValue($_product);?>
<?php $hotItem = $_product->getResource()->getAttribute('hot_item')->getFrontend()->getValue($_product);?>
<?php $freeShip = $_product->getResource()->getAttribute('free_shipping')->getFrontend()->getValue($_product);?>
<?php if($Deal == 'Yes'){ ?>
<img src="<?php echo $this->getSkinUrl('images/depot/icon-deal.gif') ?>" >
<?php } ?>
<?php if($onSale == 'Yes'){ ?>
<img src="<?php echo $this->getSkinUrl('images/depot/icon-sale.gif') ?>" >
<?php } ?>
<?php if($hotItem == 'Yes'){ ?>
<img src="<?php echo $this->getSkinUrl('images/depot/icon-hot.gif') ?>" >
<?php } ?>
<?php if($freeShip == 'Yes'){ ?>
<img src="<?php echo $this->getSkinUrl('images/depot/icon-freeship.gif') ?>" >
<?php }?>

Answer 1

Don't know a great deal about Magento but what you are talking about will require CSS coding not really PHP. Ideally you will need both images output to the same container DIV.
Then set the images to position: absolute and then use zindex to stack them on top of each other. Note the container div will either need to be position: absoloute or position: relative for the positioning of the images to work properly.
See here for more - How can we overlap two images using css style?