Web page image effects - JavaScript ? how else ?

Question

I'm asking to pick the brains of all you web gurus out there.

I have an idea I'm trying to implement.

I want to display half a dozen pictures on a screen, in say a circle shape, and as I hover over one with the mouse it fades from grey and white into full colour, maybe even getting a little larger, or generating a drop-shadow effect which stays while the mouse is over it.

Although I'm not too shabby on VB6 and SQL Server, my web development experience extends about at far as using notepad to generate raw HTML to display some favourite folders, links to websites and documents etc, in Active Desktop.

So guys, what programming resource websites should I be looking at, such as w3schools.com and specifically whether I should be using JavaScript or some other method ... also specific method calls to look at would be good.

I'm not after "here ... try this code" and then 10 screens of code to cut and paste, I'm after tips, such as "for the positioning, look at www.thiswebpage.com and look at XYZ" and "for the fade effect, look at ABC method on JavaScript" or whatever.

Thanks in advance gurus.

EDIT: 14/07/2009 - Just thought that this might be pertinent. I'll be hosting the pages on a Google Apps hosted website.

Also, the black and white fade effect wasn't the only effect I was considering, it was just one possibility. Other nice, subtle effects might be considered.

Answer 1

What you want to implement shouldn't be all that difficult. However if you do not know any JS then W3C schools is a good place to start.

You should also check out Mootools. It is a great framework for all your JS needs. They also have some great demos you can try.

Answer 2

You will need some form of Javascript, and if I were doing that I would look at the Script.aculo.us library. (An immediate effect could be done with CSS, but for a gradual fade, you will need Javascript.)

Answer 3

For that type of work I like to use Scriptaculous. It has a number of animation commands that are easy to use. You can run a bunch of effects in parallel on a DIV, so you can easily perform a MOVE and a SCALE effect on the same object and it handles the synchronization.

You can do all of this with regular old JavaScript.

Here is an example of a MOVE:

new Effect.Move('yourDIV', { x: 0, y: 0, mode: 'absolute' });

Answer 4

For general effects and starting point for this type of user experience: JQuery

From there - research jQuery plugins that do this type of thing. Good search terms may be carousel.

Answer 5

You could probably get a quite similar effect done by using some JS library which can animate CSS properties nicely. For example Scriptaculous and jQuery can probably fit the task and should be simple to learn.

The basic idea would be that you have an image in a div. The image's transparency can be set to 0.5, so the div's background color shades through it. This way you can get an effect similar to a black and white image with the correct choice of a background.

If you want an exact black and white effect or such, you will have to generate black and white versions of your images, or use the HTML5 canvas element to manually apply color transforms to the images. That won't work in older browsers and internet explorer, though.

Answer 6

1. Learn JS, you can learn the syntax from http://www.w3schools.com/JS/default.asp
2. Expand this knowledge with articles from known writers, like Crockford.
3. Salt it all with learning one of the leading frameworks (I like Mootools).
4. While doing steps 1-3 code, code, and do more coding.

Answer 7

Raphaël is a very nice Javascript library that can do everything you want. For instance, they have demos with drop shadows on images and with image rotation.