Frame, iframe, Perfect Alignment on Frames and Free Rotating Banner Script

The scripts detailed in this page were combined to create this time-delayed loading file:



See my page for coding to redirect to a new page & time delay as is being incorporated in the sample above.

How to create frames that align perfectly to the edge, and can rotate banners.

Question: How do I get the frame to load without a white background?

Answer: place allowtransparency="true" in your iframe




This is going to sound real stupid, but "what do I do to get the frame to line up perfect to the edges?"

I designed the advertisement and expected the frame to do as it always does --having about a ¼ inch on the left and ¼ inch on the top --it never loads where the stuff if aligned perfectly to the edge. Somehow, it aligned perfectly to the top border (touching it) and appears as if the advertisement code is embedded in every page.

I haven't been able to replicate this.

How do you get the frame to line up perfectly to the edge? If you take your mouse and click on the edge of the page and pull over that section, you should see white highlight where the frame is located. If I could figure out how to get frames to perfectly align to the edge, it would save a lot of server space. If you pull over the frame, you'll find a gap. The frame has a gap around the source file. All the frames on the page have gaps on the top and left. I've studied and tinkered with that problem for months. I know Google AdSense can load stuff outside the page via javascript, aligned perfectly to the edge.


SOLUTION TO PROBLEM

I am going to go one farther. How to get frames to align perfectly, plus rotating banners inside the frame?




First, make the images or html target file(s) you want to rotate. If you are running affiliate ads, it's suggested by most to hide the tracking code. This doesn't appear to work on Netscape, but it does for the most part on Internet Explorer.

A simple html target page with an affiliate link will suffice for the example.


<html>
<head>
<title></title>
<base href="http://www.example.com/frames/rotating_01.html">
</head>
<body bgcolor="#c6c6c6"><center>
<a href="http://www.example.com/click-1826393-10366470" target="_blank"
onmouseover="window.status='http://shop.example.com';return true;"
onmouseout="window.status=' ';return true;">
<img src="http://www.example.com/image-1826393-10366470" width="110" height="230" alt="Kids Shop" border="0"></a>
</center>
<!-- Kids 120x240 -->
</body>
</html>


onmouseover="window.status='http://example.com/target.html';return true;" onmouseout="window.status=' ';return true;"hides the tracking code.

You've got your html target pages and images set up on the server. Next you'll need your .shtml rotating banner script to rotate them in your page(s).

Portions of the following code were not all created by myself, I found the rotating banner script on http://javascript.internet.com

I learned this code successfully rotates .html, .shtml, .gif, iframe, .jpg, etc.

I learned too it rotates however many random ads you specify. Reset var maxAdNo = 3 according to the number of ads you have embedded to rotate.


<html>
<head>
<base href="http://www.example.com/frames/optional.shtml">
<title></title>

<script language="JavaScript">
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!!
http://javascript.internet.com -->
<!-- Begin

var maxAdNo = 3

var adNo

var myAd = new Array()

myAd[0] = '<iframe allowtransparency="true" src="http://www.example.com/frames/rotating_01.html" marginwidth="0" marginheight="0" width="250" height="250" border="0" frameborder="0" style="border:none;" scrolling="no" align="top"></iframe>'

myAd[1] = '<iframe allowtransparency="true" src="http://www.example.com/frames/rotating_02.html" marginwidth="0" marginheight="0" width="250" height="250" border="0" frameborder="0" style="border:none;" scrolling="no" align="top"></iframe>'

myAd[2] = '<iframe allowtransparency="true" src="http://www.example.com/frames/rotating_03.html" marginwidth="0" marginheight="0" width="250" height="250" border="0" frameborder="0" style="border:none;" scrolling="no" align="top"></iframe>'

myAd[3] = '<iframe allowtransparency="true" src="http://www.example.com/frames/rotating_04.html" marginwidth="0" marginheight="0" width="250" height="250" border="0" frameborder="0" style="border:none;" scrolling="no" align="top"></iframe>'

//  End --></script>

<style>body {font-family: tahoma; background-color: #c6c6c6} a {color: #ffffff; text-decoration:none} a:hover{font-weight:bold}</style>

</head>

<body>
<center>
<script language="JavaScript">

<!-- Begin

  adNo = Math.round(Math.random() * maxAdNo)

  document.write(myAd[adNo])

//  End -->

</script>

</center>
<!-- Alternate Rotating Ads 250x250 - square -->

</body></html>

Lastly, the page you want to rotate the ads on:

<iframe src="http://www.example.com/frames/optional.shtml" marginwidth="0" marginheight="0" width="250" height="250" border="0" frameborder="0" style="border:none;" scrolling="no" align="top"></iframe>

The frame should align perfectly to the corners. They do for me. The secret to perfect alignment is in giving the frame all the necessary exact measurements.

A Purpose for this Script: This code (with the .shtml extension) can be used to rotate banners as the "alternate URL" in Google AdSense.

<script type="text/javascript"><!--
google_ad_client ="pub-1234567890";
google_alternate_ad_url ="http://www.example.com/frames/optional_01.shtml";
<---- Rotating banner .shtml is placed above -->
google_ad_width =250;
google_ad_height = 250;
google_ad_format ="250x250_as";
google_ad_type = "text_image";
google_ad_channel="";
google_color_border = "c6c6c6";
google_color_bg ="c6c6c6";
google_color_link = "000000";
google_color_url ="808080";
google_color_text ="000000";
//--></script>
<script type="text/javascript"
 src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>


Second emphasis: If the exact dimensions are not given on the iframe, it will leave a gap around the edge of the frame.
The rotating banner script must be saved with an .shtml extension.

I did not have success at using the mouseover code to hide affiliate links inside the rotating banner. It creates an error on the page. You will need to create simple html documents with your code, for your rotating banner target pages.

No comments:

Post a Comment