0

I am wanting to make a rotating banner using Javascript. This is intended to have advertisements on my website which have an image with a clickable link and changes every 5 seconds. I would like the banner to be 728x90. I would like to have the image and link files in the javascript file so if it needs to be modified, it can be easily without going through 100 html pages. Is there anyone that can help me out with this? I am very new to coding, so if someone can give me a basic walkthrough, that would be greatly appreciated.

MTR88
  • 5
  • 1
  • 6

1 Answers1

0

To provide an image as link, you need to embedd it inside an anchor element.

<a id="ad-link" href="url to advertisements homepage" >
    <img id="ad-img" src="url to image">
</a>

To set the urls at runtime via JavaScript, you can simply do

document.getElementById("ad-link").setAttribute("href", "http://...");
document.getElementById("ad-img").setAttribute("src", "http://...");

To change the banner every 5 seconds, you need to define a timeout, after which a specific function is called.

setTimeout(function() {
    //update banner
}, 5000);

To rotate the banner, i recomend to use css. see How to do a webkit css endless rotation-animation.

Community
  • 1
  • 1
Franz Deschler
  • 2,112
  • 5
  • 21
  • 37
  • So I've edited the links and images, and they should be like this ("href", "http://stackoverflow.com, http://www.google.com"); right??? Separated with a comma. As for the html code, should I be editing anything in there??? I inserted the code, made a css file, I have a box pop up but no images and the links don't work either. They are unable to be found. – MTR88 Jan 12 '16 at 16:14
  • The "src" and "href" attribute reffer to one url. So you cannot set multiple urls. You should also include "http://". Of course, the javascript part needs to be executed after the page has been loaded (http://www.w3schools.com/jsref/event_onload.asp). – Franz Deschler Jan 15 '16 at 10:03