How do I make a floating image appear at mouseover?

[Vaxfiend]

I have a client who loves this feature on Zappos.com – go to any product, and mouseover where there are color choices. A small image hovers there, with rounded corners and a transparent shadow, and she wants that effect. I’m having a heckuva time finding the script to make that happen.

Any ideas? Thanks much for any leads!

[Josh]

http://jsfiddle.net/JoshMesser/tz9XG/

[Johnnyb]

Hey @Josh, I have a quick question about the jQuery you wrote. I’m just wondering why and when you should use function(e) and when you should just use function(). I know about passing variables into functions eg: function(i), and I understand that e is shorthand for event, but even after looking here: http://api.jquery.com/event.data/ I still don’t understand how I should use it.

Maybe this should be a separate discussion, but just thought I’d ask it here as it featured in the code you wrote.

Many thanks!

[thomas]

@Johnnyb, unlike many languages, with JavaScript, you can pass any number of arguments to a function whether the function accepts them in its definition or not.

In the case of the event parameter, you don’t need to capture it in the function’s definition unless you plan on using it (e.g. var el = e.target). In the example @Josh gave, the script would work fine with or without the “e” parameter. Now, if he needed to get some information from the event object, it would have been required.

[Vaxfiend]

Many thanks on the feedback! I’ll let you know how it turns out…I’m still pretty new to JScript and such.

[Josh]

I’m just passing the event parameter because it’s a habit of mine. It’s not needed.

[Author]

Posts