How I Change Images on Top of My Site

Someone over at the WordPress forums asked me how I made the little image browser on my site. (Check out the + – < > on the top right of the screen to see what I mean.) So, here it is for anyone to use. It’s pretty simple.

Download the Obvious Diversion image toy

Open the html file in a browser and you’ll see it working. It’s all commented, so moving it into your own site should be easy.

To customize it for your purposes, you should:

  1. In the imagetoy.js file, change the number of images you will be using and the path to those images
  2. Replace my sample images with the ones you intend to use and add as many as you like. (Use the obvious naming structure)
  3. Extra Credit: Replace the switching text to whatever you want (images, other text, etc.)

Please note: I just use it for a cool little extra in my header, but certainly not for my galleries. Why? Because it uses ECMAScript to swap the images and as a result is not compatible with some browsers. For instance, Google can only see the default image.

Have fun with it, make it your own, and if you need me to explain anything better, let me know in the comments.

Want more? Head to the Archives.