need rollover effect for row of 9 perfume bottles

Question

For a perfumer's website I'm displaying a row of nine bottles on a shelf. It appears as one continuous photograph. I've cut it into nine seamless slices, each in its own table cell with its own id.

I'm thinking to use jQuery as I want the following on rollover:

• Bottle blitzes instantaneously bright also triggers short sound file.
• After a millisecond or two, returns to normal state.
• Action repeats only if blurred and re-moused over.
• Effect the same for each of the 9 bottles.

Mousedown (click) probably doesn't need an effect, just targets that particular bottle's page into the front page's iframe. I've made 9 alt. slices that are white-outs, but don't know how to write script with timed effect.

Flash? Please, don't even go there; it makes me plain nuts. OTOH, I find jQuery to be elegant.

Maybe momentarily putting a white sprite over the image at the beginning of rollover is easier? How would I go about doing that? Many thanks in advance!

Answer 1

Do you have the script to implement the rollover images to start with? If so, then all you need to add is a call to jQuery's .delay() with the functionality of disabling the rollover image. More info on the .delay() function is available from the jQuery api.

If you need help getting the rollover up and going, you might find what you're looking for in answers to this question.

Answer 2

OK, I admit I'm pretty dumb. Now I feel like I'm on an easter egg hunt trying to find these snippets and figure out how they fit together.

Would someone mind just flat out showing me how the whole thing is written? The sound file would only be a quick wood block click, nothing more.

Answer 3

I ended up doing this with no jQuery at all: just straight-up Javascript. In your Javascript code, you'll need two functions for handling the images:

function imgOn(id) {
    document.getElementById(id).src = 'img_on.jpg';
    setTimeout("imgOff('"+id+"')",1000);
}

function imgOff(id) {
    document.getElementById(id).src = 'img_off.jpg';
}

The key parts here are that you set the image files correctly and set the timeout you desire. Replace img_on.jpg with the filename for the white bottle, and replace img_off.jpg with the filename for the normal bottle. Also, it is set to revert back after 1 second. To adjust this time, change the 1000 to a different value.

Then when you actually show the image(s), use the following HTML:

<span onMouseOver="imgOn('img1');" onMouseOut="imgOff('img1');">
  <img id="img1" src="img_off.jpg">
</span>

Make sure that each image has a unique value for id, and that the value you use for id is also used in the onMouseOver and onMouseOut calls. If these images are functioning as links, you can use the following instead:

<a href='page.html' onMouseOver="imgOn('img1');" onMouseOut="imgOff('img1');">
  <img id="img1" src="img_off.jpg">
</a>