Poker Mavens - HTML Examples

Updated 2013-11-30

Introduction

The HTML client in Poker Mavens is served inside an HTML wrapper with space reserved on all four sides for banner ads or other custom HTML content (Pro/Gold versions). By default, these spaces are empty and the game surface occupies the entire browser window. To display your own content, specify a size and some content on at least one side (top, bottom, left, right) in the Web Settings section of the server console's system tab. The size is in pixels and represents the height for the top or bottom sections or the width for either side.

The content will automatically be placed and centered inside <div> tags already sized to the specified dimensions, and can consist of any HTML markup or Javascript code. Any links should specify the target="_blank" attribute so that they open a new window rather than terminating the game in progress. For example, to display a link like this:

Be sure to visit our Gift Shop after your round of poker!

at the top of the game surface, you set "Top ad size" to 30 or so to give it a height and then enter (or paste) this HTML code for the "Top ad HTML" setting:

Be sure to visit our <a target="_blank" href="http://www.example.com/gifts/">Gift Shop</a> 
after your round of poker!

The Ad Settings also contains an Ad Folder setting so that you can specify a place to store local files to be served, such as images. In this example, the folder would contain the local banner1.jpg image so it could be displayed to the player:

<a target="_blank" href="http://www.example.com/gifts/">
<img src="banner1.jpg" border="0" alt="" /></a>

Examples

Below are more examples of the kinds of things you can place around the game surface.


Rotating Banner Ads

This is an example that illustrates how to use Javascript to display a sequential series of banner ads in one spot. Edit the list of adImagesTop[] and corresponding adLinksTop[] arrays with as many items as you want, starting with element [0]. So 10 ads would be numbered 0 to 9. Also you can adjust the adDelayTop variable. It defaults to 10 seconds (10000 milliseconds). Copy and paste your HTML text into one of the HTML fields (e.g., Top ad HTML) in the server console Ad Settings group. Set the appropriate size (e.g., Top ad size = 60, etc.) and then specify the Ad Folder where you've stored all your JPG images (unless they're external). To display ads on the Left, Right, or Bottom edges, change all of the "Top" suffixes to "Left", "Right", or "Bottom" in both the link and the script section so that each side has its own unique set of id and variable names. Otherwise there will be a conflict if you display ads on more than one side.

<a id="adLinkTop" href="" target="_blank"><img id="adImageTop" border="0" src=""/></a>

<script type="text/javascript">
  adDelayTop = 10000;  // milliseconds to display each ad

  adImagesTop = []
  adImagesTop[0] = "banner1.jpg";
  adImagesTop[1] = "banner2.jpg";
  adImagesTop[2] = "banner3.jpg";

  adLinksTop = []
  adLinksTop[0] = "http://www.domain1.com";
  adLinksTop[1] = "http://www.domain2.com";
  adLinksTop[2] = "http://www.domain3.com";

  AdNumTop = 0;

  function nextAdTop()
  {
    document.getElementById("adImageTop").src = adImagesTop[AdNumTop];
    document.getElementById("adLinkTop").href = adLinksTop[AdNumTop];
    AdNumTop++;
    if (AdNumTop == adImagesTop.length) AdNumTop = 0;
    window.setTimeout("nextAdTop()",adDelayTop);
  }

  nextAdTop();
</script>

Random Banner Ads

The previous example displayed the ads in a sequential loop. This code displays the ads in random order:

<a id="adLinkTop" href="" target="_blank"><img id="adImageTop" border="0" src=""/></a>

<script type="text/javascript">
  adDelayTop = 10000;  // milliseconds to display each ad

  adImagesTop = []
  adImagesTop[0] = "banner1.jpg";
  adImagesTop[1] = "banner2.jpg";
  adImagesTop[2] = "banner3.jpg";

  adLinksTop = []
  adLinksTop[0] = "http://www.domain1.com";
  adLinksTop[1] = "http://www.domain2.com";
  adLinksTop[2] = "http://www.domain3.com";

  function nextAdTop()
  {
    AdNumTop = Math.floor(Math.random() * adImagesTop.length);
    document.getElementById("adImageTop").src = adImagesTop[AdNumTop];
    document.getElementById("adLinkTop").href = adLinksTop[AdNumTop];
    window.setTimeout("nextAdTop()",adDelayTop);
  }

  nextAdTop();
</script>