Help Center Ad Gallery

Expandable Image Ad

This ad template is for an expandable ad but without the need for Flash. It uses only JavaScript and HTML to swap 2 images.

Sample Code

<script type="text/javascript">
  function expand(){
    document.getElementById('ad_lg').style.display='block';
    document.getElementById('ad_sm').style.display='none';
    document.getElementById('ad_div').style.height='200px';
  }
  function contract(){
    document.getElementById('ad_sm').style.display='block';
    document.getElementById('ad_lg').style.display='none';
    document.getElementById('ad_div').style.height='90px';
  }
</script>
 
<div id="ad_div" style="z-index:3000;position:relative;cursor:pointer;" onmouseover="expand();" onmouseout="contract()">
  <img id="ad_sm" src="http://example.com/728x90.gif" alt="" style="width:728px;height:90px;" />
  <a href="http://example.com/landing.page" target="_blank">
    <img id="ad_lg" src="http://example.com/728x200.gif" style="display:none;width:728px;height:200px;" alt="" />
  </a>
</div>

Customization

To customize the sample ad to your own ad, change the URL of the ad images and the ad dimensions.

Create the ad

  • Click on the menu Ads / Create a new ad and choose the ad type to be Rich-Media/HTML
  • Paste the ad HTML code from the Sample Code section into the code box
  • Customize the ad content to your own creative content
  • Generate the JavaScript-based serving code

Other Articles in Ad Gallery

This section provides demo, sample and instructions for the most common and popular ad creative templates. Click on a template link to view the description, demo and instructions to create in the ad server, customize it to suite your purpose and integrate the ad with your platform.

Cannot find an answer for your question? Ask our Customer Care team

Related