{"id":681,"date":"2013-04-26T08:28:35","date_gmt":"2013-04-26T08:28:35","guid":{"rendered":"http:\/\/javascript-tutor.net\/?page_id=681"},"modified":"2017-11-16T23:11:31","modified_gmt":"2017-11-16T23:11:31","slug":"lesson-28-managing-banner-ads-in-javascript","status":"publish","type":"page","link":"https:\/\/javascript-tutor.net\/index.php\/lesson-28-managing-banner-ads-in-javascript\/","title":{"rendered":"JavaScript Lesson 28: Creating Banner Ads"},"content":{"rendered":"<h4 style=\"text-align: center;\"><strong><a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-27-creating-cookies-in-javascript\/\">&lt;Lesson 27&gt;<\/a>\u00a0<a href=\"http:\/\/javascript-tutor.net\/index.php\/javascript-tutorial\/\">[Contents]<\/a><a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-29-creating-slideshow-in-javascript\/\">&lt;Lesson 29&gt;<\/a><\/strong><\/h4>\n<p>Displaying banners ads is a common practice for showing advertisements on web pages to the visitors. Banners ads are normally created using standard graphic tools such as Photoshop, Paintbrush Pro, and other software. Banner ads can be static or animated. Animated images are animated GIF files or flash movies. Flash movies are created using Macromedia Flash and the browsers must have installed flash plugin to view the movies. On the other hand, you can create some animated effect using JavaScript, like rotating static banner ads at a \u00a0certain time interval.<\/p>\n<p>\n<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<ins class=\"adsbygoogle\" style=\"display: block; text-align: center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-3033628290023372\" data-ad-slot=\"5669011038\"><\/ins><br \/>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n<\/p>\n<h3><strong>28.1 Creating Rotating Banner Ads<\/strong><\/h3>\n<p>Rotating banners ads comprises several banner images that constantly rotate on a webpage at a fix time interval. You can create these banner images using standard graphics tools. Let&#8217;s create four banner images and name them as banner1.jpg, banner2.jpg, banner3.jpg and banner4.jpg<\/p>\n<p>The JavaScript starts by declaring an array to store the banner images using the <em>new Array<\/em> keywords, as follows:<\/p>\n<p><span class=\"outputbg\"><em>MyBanners=new Array(&#8216;banner1.jpg&#8217;,&#8217;banner2.jpg&#8217;,&#8217;banner3.jpg&#8217;,&#8217;banner4.jpg&#8217;)<\/em><\/span><\/p>\n<p>Each element in the array is assigned with an index, starting from 0. In our example, banner1.jpg is assigned with index 0, banner2.jpg is assigned with index 1, banner3.jpg is assigned with index 2 and banner3.jpg is assigned with index 3.<\/p>\n<p>To track the index of the current banner, we can assign the index to a variable. Here we use the variable <em>banner <\/em>and initialize it with a value 0 to load the first banner image.<\/p>\n<p>Next, we create a function ShowBanners which will display all the banner images at fix interval. This can be achieved by incrementing the index values using the statement <em>\u00a0banner++\u00a0<\/em>\u00a0and when the index value is equal to the total number of elements in the array(denoted by\u00a0<em>MyBanners.length),<\/em> the index value is set back to 0, which is the index of the first banner.<\/p>\n<div class=\"outputbg\" style=\"width: 40%;\"><em>\u00a0banner++<\/em><br \/>\n<em>if (banner==MyBanners.length) {<\/em><br \/>\n<em>banner=0}<\/em><\/div>\n<p>The process is repeated at a fix time interval using the\u00a0<em>setTimeout ( )<\/em> function. The <em>setTimeout ( )<\/em> function comprises two arguments, the first is the function to be activated, i.e the <em>ShowBanners ( ) function<\/em> and the second one is the duration measured in milliseconds, therefore 1000 is equivalent to 1 second so 5000 is equal to 5 seconds.<\/p>\n<p>The final part of the JavaScript is to call out the<em> ShowBanners ( )<\/em> function using the<em> onload<\/em> method<\/p>\n<h4><strong>The Script<\/strong><\/h4>\n<pre>&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;script language=\"Javascript\"&gt;MyBanners=new Array('banner1.jpg','banner2.jpg','banner3.jpg','banner4.jpg')\r\nbanner=0\r\nfunction ShowBanners()\r\n{ if (document.images)\r\n{ banner++\r\nif (banner==MyBanners.length) {\r\nbanner=0}\r\ndocument.ChangeBanner.src=MyBanners[banner]\r\nsetTimeout(\"ShowBanners()\",5000)\r\n}\r\n}\r\n&lt;\/script&gt;\r\n&lt;body onload=\"ShowBanners()\"&gt;\r\n&lt;center&gt;\r\n&lt;img src=\"banner1.jpg\" width=\"900\" height=\"120\" name=\"ChangeBanner\"\/&gt;\r\n&lt;\/center&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>View <a href=\"http:\/\/javascript-tutor.net\/java_tutor\/image\/banner.htm\">banner.htm<\/a> to see the above JavaScript in action<\/p>\n<h3><strong>28.2 Creating Rotating Banner Ads with URL Links<\/strong><\/h3>\n<p>Creating rotating banner images will provide the visitor to your webpage with some basic information. However, if you want the visitor\u00a0to get more information by\u00a0clicking on the banner images, you need to create rotating banner ads that contain URL links.<\/p>\n<p>The script is basically the same as the previous one but we need to add another array that comprises the links, as follows:<\/p>\n<pre>MyBannerLinks=new Array('URL1','URL2','URL3\/','URL4\/')\r\n<\/pre>\n<p>You need to make sure that the arrangement of the links is in corresponding order with the banner images in the first array. Next, we create the <em>ShowLinks<\/em> function to link the current banner image to the relevant URL and then assign the URL to the <em>href<\/em> attribute of the anchor tag.<\/p>\n<p>To load the banner images with URL links, we insert an anchor tag within the &lt;body&gt;&lt;\/body&gt; section before the &lt;img&gt; tag that displays the current banner image. The anchor tag&#8217;s attribute href is used to call the <em>ShowLinks( )<\/em> function when the visitor clicks on the banner.<\/p>\n<h4><strong>The Script<\/strong><\/h4>\n<pre>&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;script language=\"Javascript\"&gt;MyBanners=new Array('banner1.jpg','banner2.jpg','banner3.jpg','banner4.jpg')\r\nMyBannerLinks=new Array('http:\/\/www.vbtutor.net\/','http:\/\/www.excelvbatutor.com\/','http:\/\/onlinebizguide4you.com\/','http:\/\/javascript-tutor.net\/')\r\nbanner=0\r\nfunction ShowLinks(){\r\ndocument.location.href=\"http:\/\/www.\"+MyBannerLinks[banner]\r\n}function ShowBanners()\r\n{ if (document.images)\r\n{ banner++\r\nif (banner==MyBanners.length) {\r\nbanner=0}\r\ndocument.ChangeBanner.src=MyBanners[banner]\r\nsetTimeout(\"ShowBanners()\",5000)\r\n}\r\n}\r\n&lt;\/script&gt;\r\n&lt;body onload=\"ShowBanners()\"&gt;\r\n&lt;center&gt;\r\n&lt;a href=\"javascript: ShowLinks()\"&gt;\r\n&lt;img src=\"banner1.jpg\" width=\"900\" height=\"120\" name=\"ChangeBanner\"\/&gt;&lt;\/a&gt;\r\n&lt;\/center&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n\r\n<\/pre>\n<p>Click\u00a0<a href=\"http:\/\/javascript-tutor.net\/java_tutor\/image\/bannerlink.htm\">Banner Links<\/a> to see the above JavaScript in action.<br \/>\n<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<ins class=\"adsbygoogle\" style=\"display: block; text-align: center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-3033628290023372\" data-ad-slot=\"5669011038\"><\/ins><br \/>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/p>\n<h4 style=\"text-align: center;\"><strong><a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-27-creating-cookies-in-javascript\/\">&lt;Lesson 27&gt;<\/a>\u00a0<a href=\"http:\/\/javascript-tutor.net\/index.php\/javascript-tutorial\/\">[Contents]<\/a>\u00a0<strong><a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-29-creating-slideshow-in-javascript\/\">&lt;Lesson 29&gt;<\/a><\/strong><\/strong><\/h4>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&lt;Lesson 27&gt;\u00a0[Contents]&lt;Lesson 29&gt; Displaying banners ads is a common practice for showing advertisements on web pages to the visitors. Banners ads are normally created using standard graphic tools such as Photoshop, Paintbrush Pro, and other software. Banner ads can be static or animated. Animated images are animated GIF files or flash movies. Flash movies are &hellip; <a href=\"https:\/\/javascript-tutor.net\/index.php\/lesson-28-managing-banner-ads-in-javascript\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;JavaScript Lesson 28: Creating Banner Ads&#8221;<\/span><\/a><\/p>\n","protected":false},"author":35895,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-681","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JavaScript Lesson 28: Creating Banner Ads - Learn JavaScript Online | Free Interactive JavaScript Tutorials<\/title>\n<meta name=\"description\" content=\"This javascript lesson illustrates how to create rotating ads in Javascript\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/javascript-tutor.net\/index.php\/lesson-28-managing-banner-ads-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Lesson 28: Creating Banner Ads - Learn JavaScript Online | Free Interactive JavaScript Tutorials\" \/>\n<meta property=\"og:description\" content=\"This javascript lesson illustrates how to create rotating ads in Javascript\" \/>\n<meta property=\"og:url\" content=\"https:\/\/javascript-tutor.net\/index.php\/lesson-28-managing-banner-ads-in-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Learn JavaScript Online | Free Interactive JavaScript Tutorials\" \/>\n<meta property=\"article:modified_time\" content=\"2017-11-16T23:11:31+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-28-managing-banner-ads-in-javascript\/\",\"url\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-28-managing-banner-ads-in-javascript\/\",\"name\":\"JavaScript Lesson 28: Creating Banner Ads - Learn JavaScript Online | Free Interactive JavaScript Tutorials\",\"isPartOf\":{\"@id\":\"https:\/\/javascript-tutor.net\/#website\"},\"datePublished\":\"2013-04-26T08:28:35+00:00\",\"dateModified\":\"2017-11-16T23:11:31+00:00\",\"description\":\"This javascript lesson illustrates how to create rotating ads in Javascript\",\"breadcrumb\":{\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-28-managing-banner-ads-in-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/javascript-tutor.net\/index.php\/lesson-28-managing-banner-ads-in-javascript\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-28-managing-banner-ads-in-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/javascript-tutor.net\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript Lesson 28: Creating Banner Ads\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/javascript-tutor.net\/#website\",\"url\":\"https:\/\/javascript-tutor.net\/\",\"name\":\"Learn JavaScript Online | Free Interactive JavaScript Tutorials\",\"description\":\"Master JavaScript with free, interactive tutorials for beginners and experienced coders. Practice live coding and visualize how JavaScript works step by step.\",\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript Lesson 28: Creating Banner Ads - Learn JavaScript Online | Free Interactive JavaScript Tutorials","description":"This javascript lesson illustrates how to create rotating ads in Javascript","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/javascript-tutor.net\/index.php\/lesson-28-managing-banner-ads-in-javascript\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Lesson 28: Creating Banner Ads - Learn JavaScript Online | Free Interactive JavaScript Tutorials","og_description":"This javascript lesson illustrates how to create rotating ads in Javascript","og_url":"https:\/\/javascript-tutor.net\/index.php\/lesson-28-managing-banner-ads-in-javascript\/","og_site_name":"Learn JavaScript Online | Free Interactive JavaScript Tutorials","article_modified_time":"2017-11-16T23:11:31+00:00","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-28-managing-banner-ads-in-javascript\/","url":"https:\/\/javascript-tutor.net\/index.php\/lesson-28-managing-banner-ads-in-javascript\/","name":"JavaScript Lesson 28: Creating Banner Ads - Learn JavaScript Online | Free Interactive JavaScript Tutorials","isPartOf":{"@id":"https:\/\/javascript-tutor.net\/#website"},"datePublished":"2013-04-26T08:28:35+00:00","dateModified":"2017-11-16T23:11:31+00:00","description":"This javascript lesson illustrates how to create rotating ads in Javascript","breadcrumb":{"@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-28-managing-banner-ads-in-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/javascript-tutor.net\/index.php\/lesson-28-managing-banner-ads-in-javascript\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-28-managing-banner-ads-in-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/javascript-tutor.net\/"},{"@type":"ListItem","position":2,"name":"JavaScript Lesson 28: Creating Banner Ads"}]},{"@type":"WebSite","@id":"https:\/\/javascript-tutor.net\/#website","url":"https:\/\/javascript-tutor.net\/","name":"Learn JavaScript Online | Free Interactive JavaScript Tutorials","description":"Master JavaScript with free, interactive tutorials for beginners and experienced coders. Practice live coding and visualize how JavaScript works step by step.","inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/681","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/users\/35895"}],"replies":[{"embeddable":true,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/comments?post=681"}],"version-history":[{"count":41,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/681\/revisions"}],"predecessor-version":[{"id":2506,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/681\/revisions\/2506"}],"wp:attachment":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/media?parent=681"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}