Web design using JavaScript

I’ve talked many times about the limitations of Flash. It’s issues with accessibility and SEO are two of the main ones. So if you want something to look a bit “flashy” on your website, always see if you can do it with JavaScript first.

Simple and interactive image slideshow fader with JavaScript

I got this image slideshow fader from DynamicDrive. I used it to show images from different websites I have designed and developed on my home page.

How to use it

You should save all the images you want in your fader and put them in your image directory as normal. The references to the images (plus links when the image is clicked) should be put in the beginning of a script found at DynamicDrive. If you follow the directions at DynamicDrive they’ll tell you to put this script in the <head> section of your page. The JavaScript will always be contained by the tags <script type="text/javascript"> and </script>. I prefer to delete these tags from the script and save it in a .js file and call it in the header between the meta tags and the style sheet link, like so:

<script src="http://robcubbon.com/js/rotation.js" type="text/javascript"> </script>

As I saved all the JavaScript in a file called “rotation.js” in a folder called “js” in the route of my host’s server.

After this is done another, much shorter, section of code should be placed in the body of your page where you want the fader which invokes various parameters such as the the delay between the images and whether the slideshow should pause (not rotate) while the mouse is over it, etc.

Here is another example of the JavaScript image fader rotating a few different images on the home page of a website I designed and developed for Sarah Youren Planning Solicitors.

Other JavaScript resources on the web

As mentioned this image fader was created by DynamicDrive. Check out their website there are loads of simple, cross-browser image effects, scrollers, menus, form effects, etc. Another lightweight cut and paste collection of JavaScripts is at The JavaScript Source.

And more powerful JavaScript frameworks can be found at jQuery where you will find a JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for web development while at MooTools they have a super lightweight web2.0 JavaScript framework.

What about you? Have you got any JavaScript tricks or resources up your sleeve?

Tags: design, head, images, javascript

This article was posted on Friday, June 12th, 2009 at 12:15 pm and is filed under Design, Internet.
You can follow any responses to this article through the RSS 2.0 feed.

Download free “How to Market Yourself Online” ebook
Discover the secrets behind building a better web presence

Everything you will need to know about self-marketing on the web, including:

Creating websites
Setting up WordPress
Writing blog posts
Getting links
Driving traffic to your site
Using social media
Offering RSS feeds and subscriptions
Getting found on Google

9 Responses to “Web design using JavaScript”

Jaitra, on August 3rd, 2009 at 9:46 am, said:

Thanks for the info Rob. Of course, just like working in Photoshop, there are many ways to skin the same cat on the web, but here’s the jQuery based slideshow method I am particularly enamoured of at the moment:

http://jqueryfordesigners.com/demo/coda-slider.html
Rob Cubbon, on August 3rd, 2009 at 2:30 pm, said:

Very true, Jaitra, I think the jQuery option is probably the slicker, more professional and – forgive me – cooler than this basic DynamicDrive slideshow. I’m definitely going to use some jQuery in the next website I do. Thanks for showing us that one – I like it too! And thanks for popping by!
Keith Davis, on August 15th, 2009 at 4:47 pm, said:

@Jaitra
Your plugin is a slider, Rob’s demo is a rotator.
You are not comparing like with like.

I wanted a plugin to rotate images in a header graphic, the script at Dynamic drive is perfect for what I wanted.
Rob Cubbon, on August 22nd, 2009 at 1:45 pm, said:

Good point Keith, although I think Jaitra was probably aware that the jQuery slider has many more features than the lowly image rotator – he was just saying that it was his fave Java device of the moment! Sure, the DynamicDrive rotator is what it is but increasingly we are seeing more complex Java and Ajax trickery on websites today.
Jaitra, on August 23rd, 2009 at 1:06 pm, said:

Nice summary Rob, you clarified the point I was making perfectly.
Keith Davis, on August 29th, 2009 at 12:00 pm, said:

Rob, Jaitra… good point well made, slider and rotator both very useful.
I’m sure I’ll use both in the future.

By the way… take a look at this image rotator.
http://jonraasch.com/blog/a-simple-jquery-slideshow

I’ve used this a few times and it’s very easy to set up.
Rob Cubbon, on September 12th, 2009 at 1:30 pm, said:

Thanks Jaitra, and Keith that looks like a good simple image rotator which is really economical with code! I’ve been using your website because on the Contact page you have some great links to free image libraries. I’d known SXC but the others have been really useful. Thanks a million!
Keith Davis, on September 12th, 2009 at 2:55 pm, said:

Thanks Rob – glad that you found the links useful.
WordPress website designed with a little jQuery | Blog | Freelance Graphic Designer London, on November 30th, 2009 at 1:06 pm, said:

[...] answer was already on my own website in the shape of a comment by Jaitra Gillespie on a post about JavaScript I’d written a while ago. In it he post a link [...]

Graphic and Web Designer London UK