Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Ajax and JavaScript

Random Picture Rotation with JavaScript

  • Print
  • + Share This
Demonstrating some of the key concepts of the JavaScript language, Charles Wyke-Smith, author of Stylin' with CSS: A Designer's Guide, Second Edition, walks through the process of creating JavaScript code for random display of images on a web page.
Like this article? We recommend

Hopefully you (or your clients) have lots of regular site visitors, so you know it's a serious commitment to update the content constantly to keep the site looking fresh when visitors return. One of the most memorable parts of any web page is the images. In this article, I show you how to use JavaScript to randomly select and display one of a number of images when the page loads. Over multiple visits to your site, a visitor will see a variety of different images in a given page location (see Figure 1).

Figure 1 Each time the page is refreshed, a random image loads.

The reason I chose this example is that in its nine short lines it shows many interesting aspects of JavaScript. If you're a web designer but you haven't yet dug into this amazingly powerful—and empowering—language, I'll show you some key concepts that will help you to understand JavaScript better, and perhaps give you a taste of JavaScript's capabilities to create whatever interface interactions your designs demand. If you have some experience with JavaScript, I hope this article will give you new insight and inspiration. In future articles, I'll continue to build on the ideas shown in this code.

  • + Share This
  • 🔖 Save To Your Account