Mouse Over Events, Proximity #1

Open
bmike2013 opened this Issue Jul 4, 2012 · 0 comments

Comments

Projects
None yet
1 participant
@bmike2013

I love this plugin.

But there's one thing I want to do. I'd like it so when you hover over an image, the SVG elements fade away revealing the original image (or any image you want, we don't need the plugin to decide that).

Now, I'm vaguely aware you can do Mouse Overs with Raphael, but although I have good knowledge of jQuery my Raphael knowledge is non-existent. I look at the code and I'm just...not sure. It's quite confusing for me (I'm more a designer really..).

Plus, that would only apparently work when you hover on one element at a time. That's no good, you want the hover to affect not just one element, but a portion of the surrounding elements.

There are other plugins and methods to do this with normal JavaScript and HTML (Proximity and Approach)....but not SVG, and I don't know how you would tie them in.

So, do any of you experts know of a way to do this? Or is it functionality you could add to the plugin? Absolutely don't expect anyone to do the leg work for me, I would be quite happy to figure this out for myself, I just need some rough idea of direction.

Anyway I won't get better at Javascript if I don't learn for myself.

Many thanks in advance.

Edit:

I think it's something like this, but I can't seem to tie it in. Even if I can, I have a feeling it will either affect only one element, or possibly all of them, rather than a group of elements around the one you're hovering on.

                el.mouseover(function() {
                this.attr({
                    fill: '#000'
                }); 
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment